Form widget lets you gather information from visitors. Visitors fill out the form and submit their details to the website owner. These submissions can be directed to the website database or sent as an email.
Content tab
By default, the widget creates a form with three fields – Name, Email, and Message.
Form Fields
- Form Name: Assign a name to your form.
- Display Title and Description: Choose to show or hide the form's title and description.
When Display Title and Description is enabled you will have additional options available for customization.
- Size: Choose the size of the title and description.
- HTML Tag: Specify the HTML tag to be used for the title.
- Alignment: Determine the alignment of the title and description within the form.
- Description: Enter the description text that accompanies the title.
When clicking on the Name, Email, or Message fields, you will find both Content and Advanced tabs available to customize each field.
Content
- Type: Specify the field type to filter out irrelevant data.
- Label: Assign a descriptive name to the field (e.g., Name) to instruct users on what information to input.
- Placeholder: Also referred to as ghost text, this text appears within the field to offer additional guidance.
- Required: Toggle to specify whether users must fill in this field to successfully submit the form.
- Column Width: Determine how much space the field occupies.
Advanced
- Default Value: Enter information that will automatically populate a field unless the user changes it.
- ID: Assign a unique identifier to your field to facilitate the use of submission information.
- Shortcode: Implement a shortcode in your field to avoid entering the same information repeatedly.
- Add Item: Add an empty field to your form.
- Input Size: Set the field's height and the maximum length of the data entered in the field.
- Label: Toggle the switch to display or hide the field name.
- Required Mark: Toggle the switch to indicate whether the field is required.
Buttons
- Column Width: Define the size of the space allocated for the button, which will influence its placement.
- Alignment: Position the button to the right, left, or center within the allocated space.
-
Step Buttons:
Next/Previous: Step buttons navigate users forward to the next page of the form or back to the previous page. If you prefer not to use "Next" and "Previous" as labels, use the text box to enter alternative labels. -
Submit Button:
Display Submit Button: Determine whether the Submit button is visible or hidden on the form. If you opt to enable this option, you will be provided with customization options for the button.
Submit: Set the default label or text displayed on the Submit button itself.
Icon: Choose the icon for the submit button.
-
Display Reset Button: Choose whether the reset button is visible or hidden on the form. If the button is enabled you will be given the following options for customization:
Reset: Allows users to clear entered data and revert to the form's initial state.
Icon: Set the icon for the button. - Button ID: Provide an ID for your button to facilitate easy identification and efficient processing of collected information later on.
Text After Buttons
Set the text that appears immediately following the button on a form.
Actions After Submit
Include actions like opening or closing a popup, sending email notifications, integrating with third-party services etc. By default, there are two options already included: Collect Submissions and Email.
Collect Submissions
Form submissions are typically collected and made accessible to the website owner through WP Admin when visitors submit information.
- To: The email address(es) to which the form submission will be sent.
- Subject: The subject line for the form submission email.
- Message: The body content of the form submission email.
- From Email: The email address that will appear as the sender of the form submission email.
- From Name: The name that will appear as the sender of the form submission email.
- Reply To: The email address where replies to the form submission email should be directed.
- CC: The email address(es) to which the form submission will be sent.
- BCC: Email addresses of recipients who will receive a copy of the form submission email without being visible to other recipients.
- Meta Data: Additional data about the form submission, such as submission time and user information, not visible to the form recipients.
- Send As: The format in which the form submission email will be sent, such as plain text or HTML.
For more details on post-submission actions, please refer to this article.
Steps Settings
The Steps Settings define how visitors are informed about their current position in a multistep form. These settings are divided into two categories: Type and Shape.
- Type: Determine the style or layout of the steps in the multi-step form.You can choose from None, Text, Icon, Number, Progress Bar,Number & Text, Icon & Text.
- Shape: Define the visual appearance of the step indicators. You can choose from Circle, Square, Rounded, None.
Additional Options
- Form ID: Assign a unique Form ID when using custom code to avoid conflicts.
- Form Validation: Choose between browser default validation or create custom validation for form input.
- Custom Messages: Craft your own messages for form submission outcomes when default browser messages are inadequate or fail to display.
Style tab
Form
- Columns Gap: Adjust the space between columns in your form. This setting applies when there are multiple fields arranged in a row.
- Rows Gap: Modify the spacing between fields vertically in your form using the slider.
Title
- Text Color: Specify the color of the field name text.
- Typography: Define the font type and size for the field name.
- Text Shadow: Add a shadow effect behind the field name text.
- Spacing: Adjust the spacing between elements or characters within the field name text.
Description
- Alignment: Align the description text to the left, center, right or justified.
- Text Color: Choose the color of the description text.
- Typography: Define the font type and size for the description text.
- Spacing: Adjust the spacing between characters within the description text.
Label
- Spacing: Adjust the distance between the label and the field for optimal layout.
- Text Color: Define the color of the field name text.
- Typography: Specify the font type and size for the field name text.
HTML Field
- Spacing: Adjust the amount of space surrounding the elements within your HTML field.
- Text Color: Specify the text color used within your HTML field.
- Typography: Customize the font size and type used in your HTML field.
Field
- Text Color: Define the color of the placeholder text.
- Typography: Specify the font size and type for the placeholder text.
- Background Color: Set the color of the field box background.
- Border Color: Choose a color for the field's border.
- Border Width: Specify the thickness of the border around the field.
- Border Radius: Round the corners of the border by adjusting the border radius.
Buttons
- Typography: Define the font size and type for all buttons within the form.
- Border Type: Apply a border to all buttons in your form. You can choose from None, Solid, Double, Dotted, Dashed, Groove.
- Normal/Hover: Define button appearance for Normal and Hover states. Customize Hover state with optional button Animations, such as Grow, Shrink, Pulse, Pulse Grow, etc.
Next & Submit Button
- Background Color: Set the background color for both the Next and Submit buttons.
- Text Color: Define the text color for both the Next and Submit buttons.
Previous & Reset Button
- Background Color: Set the background color for both the Previous and Reset buttons.
- Text Color: Define the text color for both the Previous and Reset buttons.
- Border Radius: Apply rounded corners to all buttons on the form.
- Text Padding: Control the spacing between the button border and the text for all buttons in the form.
Text after buttons
- Alignment: Adjust the alignment of the text.
- Text Color: Set the color of the text.
- Typography: Define the font style and size for the text.
- Text Shadow: Optionally add a shadow effect to the text.
- Spacing: Adjust the spacing around the text.
Messages
- Typography: Define the font size and type for the message text.
- Success Message Color: Set the color of the message when the form is successfully submitted.
- Error Message Color: Choose the color of the message when the form submission fails.
- Inline Message Color: If displaying custom messages within the form, set the color for inline messages.
Steps
- Typography: Specify the font size and style for the step display.
- Spacing: Adjust the distance between the steps in the display.
- Padding: Define the space between the step indicators and the form body.
Inactive/Active/Completed
- Primary Color: Set the color of the step indicator.
- Secondary Color: Determine the background color of the step indicator.
- Divider Width: Use the slider to set the width of the horizontal line between individual steps.
- Divider Gap: Adjust the spacing between the step indicators and the horizontal line separating steps using the slider.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.