Contact Form Widget

To use the Contact Form widget, ensure it’s enabled in the Widgets Bundle dashboard at PluginsSiteOrigin Widgets. The Contact Form widget can be inserted into any theme widget area at AppearanceWidgets or any page or post using Page Builder.

Once the Contact Form widget has been inserted into your theme widget area or page/post using Page Builder, hover over it and click the Edit link to begin.

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.

1. Click the Settings heading and ensure the To email address is correct. The default value for this setting will be your WordPress installation email address. Below, check the Success message, the message presented to users after submitting the form, change it as required. The success message defaults to Thanks for contacting us. We’ll get back to you shortly.. Finally, check the Submit button text and change as required. The button text defaults to Contact Us.

2. 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 customised simple contact form in minutes.

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

  • Name
  • Email
  • Phone Number
  • Subject
  • Text
  • Text Area
  • Dropdown Select
  • Checkboxes
  • Radio

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 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

 

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.