Form Widget

The Form Widget in your Website Editor lets you add forms, such as contact forms, to any page of your website so visitors can send information straight to your inbox. Every submission is emailed to the recipient you choose, and every DecoNetwork theme template already includes a pre-built contact form using this widget, so most stores can adjust an existing form instead of building one from scratch.

Watch the following video for a quick overview of how to use the Form Widget, and read below for more detailed instructions and information on settings.

In This Article

• Prerequisites
• Why use this feature?
• Step 1: Add a Form Widget to your website
• Step 2: Add fields to a form
• Step 3: Configure form design settings
• Best Practices
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why use this feature?

The Form Widget gives visitors a direct way to reach you, such as through a contact form, without needing a separate mailbox app or third-party tool. Because the system retains the recipient, fields, and confirmation settings you configure, every submission afterward is automatically routed and formatted the same way, so you set it up once and it keeps working.

• Capture enquiries and leads directly from your website instead of relying on visitors to email you separately
• Route submissions to the right inbox by choosing the store owner's email or a custom recipient address
• Reduce spam reaching your inbox with built-in Akismet filtering and optional captcha protection
• Control what happens immediately after a visitor submits, using a custom redirect page and confirmation message
• Match the form's look to the rest of your site using the same styling options as the Style Editor

Step 1: Add a Form Widget to your website

1. Click WIDGETS in the Website Editor toolbar.

   The Widgets tab opens, listing available widgets grouped by category.

2. Locate the Form widget in the BASICS section.

   

   The Form Widget in the BASICS section of the Widgets tab.

3. Drag the Form widget into an allowable area of the page, such as within a row, within a column, or between, above, or below existing widgets.

   The form is added to the page pre-populated with default fields, including Name, Email, Subject, and Message.

   

   The default fields added with a new Form Widget.

   Once the form is inserted, the Form Settings popup opens with the Properties tab selected.

   

   The Form Settings popup, opened to the Properties tab.

4. Configure the form:

   1. Heading: enter a title to display above the form.

   2. Recipient Type: choose Use store email owner to send submissions to your account's owner email, or Use custom email to display a Recipient field where you can enter a custom email address instead.

      

      The Recipient field, shown when Use custom email is selected.

   3. Button Label: specify the text shown on the submit button.
   4. Post Submit Page: select the page visitors are redirected to after submitting. If no page is selected, the visitor stays on the same page.
   5. Post Submit Message: enter a message to display once the form has been submitted.
   6. Show Captcha: tick this to display the Captcha tool at the bottom of the form, protecting it against bots and spammers. Akismet, a spam filtering service, is also integrated by default and checks submissions against a global spam database to catch malicious content before it reaches you. When spam is detected, the visitor sees the message "Unable to send message. Please contact the site owner directly through email. Sorry for the inconvenience."
   7. Edit or add fields as needed (see Step 2).

   Because these settings are retained with the widget, every future submission is emailed to the recipient you set, redirected to the page you chose, and protected by the spam filtering you enabled, without needing to reconfigure anything.

5. Click OK to save the form.

6. Click Save, then Publish at the right of the Page Settings Bar.

   The form becomes visible and functional on your live website.

Step 2: Add fields to a form

1. With the Form Widget selected, click the + button at the bottom of the Properties tab (you may need to scroll down).

   

   The + button used to add a new field to the form.

   The field type options are displayed.

   

   The available field types you can add to the form.

2. Select a field type:
   • Text: adds a text field to your form.
   • Text Area: adds a multi-line text field to your form.
   • Select: adds a dropdown list to your form.
   • Checkbox: adds checkbox options to your form.
   • Radio: adds radio button options to your form.
   • Name: adds a name field to your form.
   • Password: adds a password field to your form.
   • Address: adds address fields to your form.
   • Twitter: adds a Twitter account field to your form.
   • Email: adds an email field to your form.
   • Website: adds a website field to your form.
   • Date: adds a date field to your form. The format for entering the date will be MM/DD/YYYY
   • Time: adds a time field to your form. The format for entering the time will be HH:MM:SS
   • Number: adds a numerical field to your form.
   • Line: adds a horizontal line to your form.
   • File: adds file upload field to allow customers to attach a file to their form submission.

3. Configure the field's settings as needed:

   

   The settings available when configuring a field.

   • Required: makes the field compulsory before the form can be submitted.
   • Label: the field's title.
   • Start new line at this field: forces the field onto its own line instead of sitting beside the previous one.
   • Container Width: sets the field's width as a percentage of its container. You can use the slider or enter a percentage value.
   • Placeholder: pre-fills the field with example or default text (available on fields where a pre-set value makes sense).
   • Options: defines the choices available for fields with selectable options, such as Select, Checkbox, or Radio, with each option entered on its own line.
   • Description: additional field context, available when the Label Above layout style is chosen in the Design tab.
   • Label Width: sets the label's width in pixels, available when the Label Left layout style is chosen in the Design tab.
4. Click OK to accept the field.
5. Click OK again to save the form.

6. Click Save, then Publish.

   The new field appears on the live form and is included in every submission going forward.

Step 3: Configure form design settings

1. Click the Design tab in Form Settings.

   

   The Design tab in the Form Settings popup.

2. Select a layout style:
   • Label Above: field labels appear above each field.
   • Label Left: field labels appear to the left of each field.
3. Configure the heading font and color using the same options as the Style Editor.
4. Configure the label font and color using the same options as the Style Editor.
5. Configure the input field style using the same options as the Style Editor.
6. Configure the submit button style using the same options as the Style Editor.
7. Click OK to save.

8. Click Save, then Publish.

   The updated styling applies to the form on your live website, matching the rest of your site's design.

Best Practices

• Enable Show Captcha on public-facing forms to reduce spam submissions before they reach your inbox.
• Choose Use custom email as the Recipient Type when enquiries need to go to a specific team or department instead of the store owner's account.
• Mark essential fields, such as Email, as Required so you always have enough information to respond.
• Keep the default Name, Email, Subject, and Message fields for general contact forms, since most enquiries only need this information.
• After publishing, submit a test entry yourself to confirm the email arrives, the Post Submit Page loads, and the Post Submit Message displays correctly.

Troubleshooting

Problem: Form submissions aren't arriving in the inbox you expect.
Cause: The Recipient Type or custom email address is set incorrectly, or the message was filtered as spam.
Solution: Reopen the Form Widget, confirm the Recipient Type and email address under Form Settings, and check the recipient's spam or junk folder.

Problem: Visitors see the message "Unable to send message. Please contact the site owner directly through email. Sorry for the inconvenience."
Cause: Akismet's built-in spam filtering flagged the submission as spam.
Solution: This message is expected for suspected spam submissions. If genuine visitors see it repeatedly, review your Show Captcha setting, since enabling it can help distinguish real visitors from bots.

Problem: A newly added field isn't showing up on the live form.
Cause: The field was saved in the widget, but the page wasn't published afterward.
Solution: After clicking OK to save the field and the form, click Save, then Publish, in the Website Editor toolbar.

FAQs

Can I remove the default Name, Email, Subject, and Message fields?
Yes. Each field can be edited or removed from the Properties tab like any other field you add, though most contact forms keep at least an Email field so you can respond to enquiries.

What's the difference between Label Above and Label Left?
Both control where a field's label displays relative to the field itself. Label Above places the label directly above the field and supports an additional Description option. Label Left places the label beside the field and uses a configurable Label Width instead.

Does the Form Widget work on any page?
Yes. It can be dragged into any allowable area of a page, including rows, columns, or between, above, or below other widgets.

Do I need to enable Show Captcha if Akismet is already filtering spam?
No, it isn't required. Akismet spam filtering applies automatically, and Show Captcha is an additional layer you can enable for extra protection on forms that attract heavier spam traffic.

Additional Resources

• Website Pages WYSIWYG Editor
• Style Editor
• Widget Settings - Advanced
• Widget Settings - Responsive Properties
• Text Widget