Contact Form

Add a contact form with custom fields, design options, spam protection, and email notifications.

Requirements

To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Contact Form Widget.

The Contact Form Widget is ready to be used anywhere:

Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.

Fast Setup

The Contact Form Widget has a wide array of settings and can be used for more than just a contact form. However, setting up a simple contact form for your website is super quick.

Title: Enter a widget title.
Display Title: Use the checkbox below the widget title to display or hide the widget title.

Settings

To Email Address: Where contact emails will be delivered to. You can send to multiple emails by separating the emails with a comma (,).
From Email Address: It will appear as if emails are sent from this address. Ideally, this should be in the same domain as this server to avoid spam filters.
Default Subject: Subject to use when there isn’t one available.
Subject Prefix: Prefix added to all incoming email subjects.
Success Message: Message to display after message successfully sent.
Submit Button Text: The text displayed in the form’s submit button.
Button ID: An ID attribute allows you to target this button in JavaScript.
Onclick: Run this JavaScript when the button is clicked. Ideal for tracking.
Indicate Required Fields With Asterisk (*): Enable to show which of your fields are required.
Log IP Addresses: List in contact emails, the IP address of the form sender.

Fields

Go to the Fields section below and edit the default fields as required. The default fields are:

  • Your Name
  • Your Email
  • Subject
  • Message

Use the down arrow icon next to each field to edit, the page icon to duplicate, and the cross icon to delete. Use the Add link below to add a new form field.

Using the above basic settings, you can deploy a customized simple contact form in minutes.

When adding a new field, the following field types are available:

  • Name: only one instance of this field type can be used.
  • Email: only one instance of this field type can be used.
  • Phone Number: When set to required this field type will check for at least three numbers.
  • Number: A field for the entry of numbers.
  • Subject: only one instance of this field type can be used.
  • Text
  • Text Area
  • Dropdown Select: Enable the “Allow multiple selections” setting to let users choose multiple select options.
  • Checkboxes: The Description field supports HTML if you’d like to add a link below a checkbox.
  • Radio

Important: Only one instance of the Name, Email, and Subject field should be used. If more than one Name, Email, or Subject field is used, only the last field will be sent. If an additional Name, Email or Subject field is required, please use a Text field.

Important: When adding a Dropdown Select, Checkboxes or Radio field, please scroll down and add Options to the field. If no options are added, the field won’t display.

The Contact Form widget doesn’t offer a Reply-To field. If an Email field is used in the form, the widget will use that as the Reply-To email address. This allows you to reply to contact form messages by clicking the Reply button in your email client.

The following additional contact form fields are available as part of SiteOrigin Premium.

  • Datetime Picker
  • Location
  • Layout Builder: A mini-instance of Page Builder. Add rows, cells, and widgets.

Find out more about these additional fields in the SiteOrigin Premium documentation.

Autoresponder

SiteOrigin Premium adds an autoresponder section to the Contact Form widget. The below settings are offered as part of the Contact Form addon.

Enable the Use autoresponder checkbox to setup your autoresponder.

From Name:
The name of the person the automatic response email will come from.

From Email:
The email address the automatic response email will come from.

Response Email Subject:
The email subject to be used.

Response Email Message:
The responder email message body.

To find out more about the Contact Form addon in SiteOrigin Premium, please, see the SiteOrigin Premium documentation.

Spam Protection

The Contact Form widget offers spam protection using the following services:

  • Honeypot
  • Browser Check
  • Google reCAPTCHA V2
  • Google reCAPTCHA V3
  • Really Simple CAPTCHA Plugin
  • Akismet

Honeypot:
Adds a hidden form field that only bots can see. The form will reject the submission if the hidden field is populated.

Browser Check:
Runs a check on submission that confirms the submission came from a browser. Requires the user to have JavaScript enabled.

reCAPTCHA

reCAPTCHA is a free service from Google that helps protect websites from spam and abuse. A “CAPTCHA” is a Turing test to tell humans and bots apart.

reCAPTCHA V2 adds an “I’m not a robot” checkbox and can serve the user image challenges. reCAPTCHA V3 doesn’t require user interaction and runs in the background, generating a user score. The SiteOrigin Contact Form Widget offers both reCAPTCHA V2 and V3.

To find out more, please, visit Google’s guide Choosing the type of reCAPTCHA.

Choose between:

  • Disabled
  • V2
  • V3
V2

reCAPTCHA v2 Site Key and reCAPTCHA v2 Secret Key:
Both key’s are available from the reCAPTCHA site: https://www.google.com/recaptcha.

Theme:
Set the reCAPTCHA color scheme to Light or Dark.

Challenge Type:
Choose between the regular image challenge or an audio challenge.

Size:
Choose between Normal or Compact.

V3

reCAPTCHA v2 Site Key and reCAPTCHA v2 Secret Key:
Both key’s are available from the reCAPTCHA site: https://www.google.com/recaptcha.

Really Simple CAPTCHA

The Really Simple CAPTCHA plugin offers a GDPR (DSVGO) compliant CAPTCHA that’s super quick to set up. Go to PluginsAdd New, search for and install Really Simple CAPTCHA. Once activated, edit your SiteOrigin Contact Form and enable the CAPTCHA via Spam ProtectionReally Simple CAPTCHAEnable Really Simple CAPTCHA.

The following additional settings are available:

  • Background Color
  • Text Color

Akismet

Akismet is an advanced automated anti-spam system. To use this service with the Contact Form Widget, you’ll need the Akismet plugin installed, activated, and linked to the Akismet service. If you don’t already have Akismet installed, the plugin can be downloaded from PluginsAdd New, use the search form top right to search for Akismet, install and activate. Akismet requires a key. A free plan is offered for personal sites and blogs. To find out more, see https://akismet.com/plans/.

Use Akismet Filtering:
Enable to make use of Akismet automatic anti-spam filtering.

Spam Action:
Select the action that should be carried out when spam is detected. Show error message or Tag as spam in the email subject message.

Design

Here you’ll find a wide array of design-related settings. Click on any of the section headings to begin customizing.

Container

Background Color: Set the container background color.
Padding: Set the container padding.
Border Color: Set the container border color.
Border Width: Set the container border width.
Border Style: Set the border style.

Field Labels

Font: Select the label font family.
Font size: Enter the label font size.
Color: Select the label font color.
Position: Select the label position. Choose between above, below, left, right or inside.
Width: Enter the label width.
Align: Select the label alignment. Choose between left, right, center or justify.

Fields

Form fields are the locations within the form where users will insert their data.

Font: Select the field font family.
Font Size Enter a font size to be used for the form fields.
Text Color: Select a field text color.
Margin: Enter a field margin.
Padding: Enter a field padding, this is spacing within the form field.
Height: Enter a form field height.
Background: Select a field background color.
Border Color: Select a field border color.
Border Width: Enter a field border width.
Border Style: Select a border style.
Border Rounding: Use the slider to select a border rounding/radius.

Field Descriptions

Size: Enter a font size to be used for field descriptions.
Color: Select a description text color.
Style: Select a description font style. Choose between italic or normal text.

Error Messages

Error Background Color: Select the error message background color.
Error Border Color: Select the error message border color.
Error Text Color: Select the text color to be used for error messages.
Error Padding: Enter the error message padding.
Error Margin: Enter the error message margin.

Submit Button

Style Submit Button: Enable to apply style settings to the submit button or disable to use of default theme styling.

Background Color: Select the button background color.
Gradient Intensity: Use the slider to select the gradient intensity. Set to zero to remove the gradient.
Border Color: Select a button border color.
Border Style: Select a button border style.
Border Width: Select a button border width.
Border Rounding: Select button border rounding value to be used. Set to zero to remove rounding.
Text Color: Select a button text color.
Font Size: Enter a button text font size.
Font Weight: Select a button text font weight. Choose between normal, semi-bold or bold.
Padding: Enter the button text padding.
Width: Optionally enter a button width.
Align: Select the button alignment. Choose between left, right or center.
Inset Highlight: Use the slider to select the button inset highlight. This is the white highlight at the bottom of the button.

Input focus

These settings apply to the form fields when a user clicks on them, activating the focus state.

Style: Choose a focus border style.
Color: Choose a focus border color.
Width: Enter a focus border width.

Logging Form Entries

The Contact Form Widget doesn’t currently offer entry logging. If you’d like to add this functionality, you might consider a plugin like WP Mail Logging.

Global Settings

Go to PluginsSiteOrigin WidgetsContact Form: Settings to edit the global settings that apply to all forms. The following settings are available:

Responsive Breakpoint
This setting controls when the field max width will be disabled. The default value is 780px.

Scroll Top
After submission, scroll the user to the top of the contact form.

Advanced Customizations

Add additional headers to the contact form using the siteorigin_widgets_contact_email_headers filter. For example, the following snippet will CC [email protected].

Add Additional Headers

add_filter( 'siteorigin_widgets_contact_email_headers', function( $headers ) {
	$headers[] = 'Cc: [email protected]';

	return $headers;
} );