How to Create a Form with 10Web Builder

Forms are essential for collecting user information, inquiries, and feedback. With the Form widget in 10Web Builder, you can easily create custom forms and receive submissions by email. This guide walks you through adding, customizing, and configuring a form, including setting up email notifications.

Add the Form widget

1. Open 10Web Builder and navigate to the page where you want to add a form.
2. Click the “+” button to add a new section.
3. In the Widgets panel, search for Form and drag it into your section.
4. A default form with three fields (Name, Email, Message) will appear.

Customize form fields

1. Select the Form widget to open the settings in the Content tab.
2. Under Form Fields, click Add Item to add a new field.
3. Choose a field type (e.g., Text, Email, Textarea, Checkbox, etc.).
4. Set the Label, Placeholder, and Required options as needed.
5. Drag fields to rearrange their order.

Configure form settings

1. Open the Submit Button section to customize the button text and size.
2. In the Actions After Submit section, make sure Email is listed. This ensures form submissions are sent to your email.
3. Open the Email section and configure the following:
   • To: Enter the email address where form submissions should be sent.
   • Subject: Set the subject line to help identify form submissions.
   • Message: By default, all form data is sent. To customize, replace the [all-fields] shortcode with specific field shortcodes from the Advanced tab of each form field.
   • From Email: Specify the sender's email address (should be from your domain to avoid spam issues).
   • From Name: Set the sender name for the emails.
   • Reply-To: Define the email address where replies will be sent.
   • Cc/Bcc: Add additional recipients if needed.
   • Send As: Choose between Plain Text or HTML format.

Style the form

1. Open the Style tab to customize:
   • Field spacing, width, and border styles.
   • Button color, size, and typography.
   • Background color and padding for the form container.
2. Adjust these settings to match your website design.

Publish and test the form

1. Click Update to save changes.
2. Preview the page to test the form.
3. Submit a test entry to ensure the form functions correctly and emails are received.

Need more details?

Check out our comprehensive guide on the Form widget for advanced options and troubleshooting tips.