The Form Widget allows you to create forms, such as Contact Forms, to gather information from your website visitors. The information submitted in the form will be emailed to the email address of your choice. The Contact page in all the theme templates supplied in the DecoNetwork Website Editor all contain contact forms created using the Form Widget.
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, you will learn how...
- To add a form widget to your website
- To add fields to a form
- To configure the design settings for a form
To add a form widget to your website:
- Click on the WIDGETS button in the Website Editor Toolbar.
- Browse the Widgets tab to locate the Form Widget in the BASICS section.
- Click and drag the Form Widget into a container on your website page.
Allowable areas the widget can be inserted into include:
- Within rows
- Within columns
- Above or below existing widgets
- Between existing widgets
By default, the form will be populated with some fields, including Name, Email, Subject, and Message.
Once the form is inserted into your web page, the Form Settings popup will be displayed, with the Properties tab selected.
- Configure the form.
- Enter a title for your form in the Heading field.
- In the Recipient Type field, select the recipient option determining who you want information submitted in the form to be sent to.
- Use store email owner: will send the information to the email specified for the store owner.
- Use custom email: will display a Recipient field, allowing you to enter a custom email address.
- In the Button Label field, specify a label for the submit button.
- In the Post Submit Page field, select the page that you want the user to be redirected to once the form has been submitted.
- In the Post Submit Message field, enter a message to be displayed when the form has been submitted.
- Tick the Show Captcha checkbox to display the Captcha tool at the bottom of the form. The Captcha tool will protect the form against bots and spammers.
- Edit/Add fields. (See below for instructions).
- Click OK.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
To add fields to a form:
- Click on the + button at the bottom of the Properties tab (you may need to scroll down).
The field type options will be displayed.
- 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.
- Configure the settings for the field.
All fields will have the following settings:
- Required: tick this checkbox to make this field compulsory.
- Label: the title of the field.
- Start new line at this field: tick this checkbox to display this field on a new line.
- Container Width: lets you set the width of the field's container as a percentage of the width of the container in which it is located. You can use the slider or enter a percentage value into the Container Width field.
The following setting will be available for certain fields where you may want to pre-set the information in the fields:
- Placeholder: lets you enter a particular value to be used to pre-populate the field.
The following setting will be available if the field has options to choose from:
- Options: lets you specify a number of options for your website visitor to choose from. Enter each option on a new line.
The following setting will be available if Label Above is chosen for the form layout style (in the Design tab):
- Description: lets you enter a description on how to complete the field.
The following setting will be available if Label Left is chosen for the form layout style (in the Design tab):
- Label Width: lets you set the width of the field's label, in pixels.
- Click OK to accept the changes.
- Click OK to save the form.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
To configure the design settings for a form:
- Click on the Design tab in the Form Settings popup.
- Select a layout style for the form.
- Label Above: displays labels above fields in the form.
- Label Left: displays labels to the left of fields in the form.
- Configure the heading font and color.
The procedure for configuring the heading font is the same as for editing the font style in the Style Editor. Click here for instructions.
The procedure for configuring the heading color is the same as for editing an element's color in the Style Editor. Click here for instructions.
- Configure the label font and color.
The procedure for configuring the label font is the same as for editing the font style in the Style Editor. Click here for instructions.
The procedure for configuring the label color is the same as for editing an element's color in the Style Editor. Click here for instructions.
- Configure the input field style.
The procedure for configuring the input field is the same as in the Style Editor. Click here for instructions.
- Configure the submit button style.
The procedure for configuring the submit button style is the same as for editing the button style in the Style Editor. Click here for instructions.
- Click OK to save the changes.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
Comments
0 comments
Please sign in to leave a comment.