Contact Form Widget

The SiteOrigin Contact Form widget is a self-contained contact form featuring several field types, spam control, and a huge array of styling options.

Requirements

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

The Contact Form widget can be inserted into any theme widget area at AppearanceWidgets or any post/page using Page Builder by SiteOrigin. If you’re using the Block Editor, the Contact Form widget can be inserted via the SiteOrigin Layout or SiteOrigin Widget block.

Fast Setup

The Contact Form widget has a wide array of settings and can be used for a lot 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.
  • Subject: only one instance of this field type can be used.
  • Text
  • Text Area
  • Dropdown Select
  • 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

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 Google’s reCAPTCHA service and Automattic’s Akismet.

reCAPTCHA V2

Please note: Make use of reCAPTCHA V2, it isn’t currently possible to use reCAPTCHA V3.

reCAPTCHA adds a section to the bottom of your form that asks users to enable a checkbox to verify that they are human and not a bot.

Use Captcha
Enable this setting to use reCAPTCHA.

ReCaptcha Site Key and ReCaptcha 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.

Akismet

Akismet is an advanced automated anti-spam system. To make use of 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 that 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 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.