Contact Form

8 min read Updated

The Contact Form addon adds three field types to the SiteOrigin Contact Form widget: Datetime Picker, Location and Layout Builder. It also adds merge tags, which put a visitor’s answers into the subject and messages, and an autoresponder, which sends the visitor an email after they send the form.

View the Contact Form demo.

For the widget’s other settings, see the Contact Form widget documentation.

Requirements

Go to SiteOriginPremium Addons and activate Contact Form. This also activates the Contact Form widget at PluginsSiteOrigin Widgets.

Build a booking form with a Datetime Picker field, a merge tag, and an autoresponder:

Where to Find the Settings

Edit a SiteOrigin Contact Form widget. The addon adds these settings to the widget form:

  • Fields: in each field, the Field Type list has three more types: Datetime Picker, Location and Layout Builder. A Merge Tag setting shows below Description. The settings for the new types show at the end of the field when you select that type: Datetime Options, Location Options or Builder Field.
  • Below Fields, above Spam Protection: the Use autoresponder. checkbox and the Autoresponder section.

Merge Tags

A merge tag puts the value a visitor enters in a field into a subject or a message. For example, Northfield Studio thanks each visitor by name.

  1. Open the Name field and enter name in Merge Tag. Don’t type the square brackets here.
  2. Open Settings and change Success Message to: Thanks, [name]. We’ll reply within one working day.
  3. Save. A visitor called Sarah Mitchell sees “Thanks, Sarah Mitchell. We’ll reply within one working day.”

You can use merge tags in these places:

  • The subject of the email you receive: Default Subject and Subject Prefix in Settings.
  • Success Message in Settings.
  • Response email subject and Response email message in Autoresponder.

Merge tags don’t work in the body of the email you receive. The body already lists every field.

Write the tag exactly as you entered it, with the same case, in square brackets. If the visitor leaves the field empty, the tag shows as you typed it, for example [company]. Use merge tags on required fields.

At the moment, a merge tag on a Checkboxes field stops the form from working when you use the tag. Don’t add merge tags to Checkboxes fields.

Datetime Picker Field

The Datetime Picker field shows a date field with a calendar, a time field with a list of times, or both. When both show, they sit side by side. Use it for bookings and appointments.

The email shows the value under the field’s Label. With the date and time pickers, the value looks like “Wednesday 7 October 2026 2:30 pm”. With the date picker only, it looks like “Wednesday 7 October 2026”, or it uses the WordPress date format (see Global Settings).

The settings are in Datetime Options.

Show Date Picker
Shows the date field. Default: on.

Calendar Always Visible
Shows the calendar on the page at all times. When off, the calendar opens when the visitor clicks the date field. Default: off.

Date Picker Label
The label above the date field. Leave it empty to show no label. Default: Date.

First Day of the Week
Sunday or Monday. Default: Sunday.

Disable
None, Weekends or Weekdays. Visitors can’t pick the disabled days. Default: None.

Prefill Date Picker With Current Date
Fills in today’s date when the page loads. Default: off.

Disable Dates
Dates, date ranges and weekdays that visitors can’t pick. Separate the entries with commas and no spaces.

  • A date: YYYYMMDD, for example 20261225.
  • A date range: two dates with a hyphen, for example 20261221-20261231.
  • A weekday: the first three letters, for example Sun.
  • today or tomorrow.

For example: today,20261221-20261231,Sat,Sun. An entry after a space is ignored. At the moment, visitors in time zones west of UTC (for example North and South America) see each disabled date and range one day early.

Show Time Picker
Shows the time field. Visitors pick from a list of times, every 30 minutes. Default: off.

Time Picker Label
The label above the time field. Leave it empty to show no label. Default: Time.

Use 24h format.
Shows times in 24-hour format, for example 14:30. When off, the time field uses the time format at SettingsGeneral. Default: off. The email always shows the time in 12-hour format when the date picker also shows.

Prefill Time Picker With Current Time
Fills in the visitor’s current time when the page loads. Default: on.

Disabled Times
Times that visitors can’t pick. Write a range with a hyphen and separate ranges with commas, for example 12:00pm-1:30pm,17:00-23:59. A range that ends before it starts runs over midnight, for example 5:00pm-8:00am. A single time disables 30 minutes from that time.

Hide Disabled Times
Removes the disabled times from the list. When off, they show but visitors can’t pick them. Default: off.

The calendar shows the years that you set in the global settings.

Location Field

The Location field lets a visitor enter an address. As the visitor types, Google suggests addresses. A map below the field shows the address. The visitor can also click the map or drag the marker, and the field fills in the nearest address. The map is 200px high.

The field uses the Google Maps widget’s settings. Go to PluginsSiteOrigin Widgets, find Google Maps, click Settings and enter your API key. If Require consent before loading Maps API is on there, the map shows the consent prompt first. See the Google Maps widget documentation for how to get a key.

Keep the Google Maps widget active. At the moment, if it is inactive, a page with a Location field shows an error.

Address suggestions use Google’s Places Autocomplete service. Google no longer offers this service to new Google Maps customers, so suggestions may not show with a new API key.

The settings are in Location Options.

Show Google Map
Shows the map below the address field. Turn it off to show only the address field. Default: on.

Map ID
A Map ID from the Google Cloud Console. Use it to style the map in the console.

Default location
The address that fills the field and centers the map when the page loads.

Center on user’s location
Asks the visitor to share their location, then centers the map on it. It needs Show Google Map. If the visitor declines, the map uses Default location. The site must use HTTPS. Default: off.

Layout Builder Field

The Layout Builder field puts Page Builder content inside the form, for example a heading, an image or a note between two fields. It doesn’t collect a value, and it doesn’t show in the email. It needs Page Builder by SiteOrigin.

  1. Add a field and set Field Type to Layout Builder.
  2. In Builder Field, click Open Builder.
  3. Add rows and widgets, then close the builder.

Leave Required Field off. The field has no value, so a required Layout Builder field stops the form from sending. At the moment, use one Layout Builder field per page. With more than one, all of them use the row and column styles of the first.

Autoresponder

The autoresponder sends the visitor an email after they send the form. Select Use autoresponder. to show the Autoresponder section.

The autoresponder goes to the address in the form’s Email field. It is sent only after your own email is sent. Add an Email field to the form and make it required. If the form has no Email field, or the visitor leaves it empty, the autoresponder goes to the From Email Address in the widget’s Settings.

From name
The sender name. Default: the display name of the user who adds the widget.

From email
The sender address. Replies from the visitor go to this address. Use an address at your site’s domain, so the email is less likely to go to spam. At the moment, if this is empty, the autoresponder is not sent.

Response email subject
Default: Message received!

Response email message
The body of the email. It has a visual editor, so you can add links and formatting. Default: Thanks for contacting us. We’ll get back to you shortly.

You can use merge tags in the subject and the message, for example: Hi [name], thanks for your booking request.

Global Settings

Go to SiteOriginPremium Addons, find Contact Form and click Settings. These settings apply to every Datetime Picker field on the site.

Datepicker min year
The first year the calendar shows. You can pick a year from 110 years ago up to last year. Default: 110 years before the current year.

Datepicker max year
The last year the calendar shows: Current year, Next year or an earlier year. Default: Current year.

Visitors can pick any date from 1 January of the min year to 31 December of the max year, including past dates. Use Disable Dates to block dates.

Use WordPress date format
Uses the date format at SettingsGeneral in the date field. Only d/m/Y, m/d/Y and Y/m/d work. Other formats use the default format, for example “Wednesday 7 October 2026”. When the time picker also shows, the email uses the default format. Default: off.