Adding your own customizable form within the Sitebuilder is easy with the Form widget. The flexibility of this widget enables you to create custom line items, to make gathering information and communicating with customers a valuable experience.
Upon dragging and dropping the Form widget onto your page, you have the option to choose a pre-made contact form or a blank one to customize. Once the form is completed, the information submitted will be sent directly to your email. By default, the email used will be the same email address you use to login to your Yola account. If you wish to update this email address, it can be easily done by simply by clicking on the "Settings" link in your Form widget.
Yola forms automatically include Google reCAPTCHAs, to combat blank form submissions and spam. A reCAPTCHA is a type of challenge-response test in an attempt to ensure that the response is generated by a person. The form submission is validated by ticking off the box next to "I am not a robot". Here's how to add, customize and edit your Form widget:
1. In your Sitebuilder, go to Widgets.
2. Select Popular from the drop-down menu.
3. Drag and drop a Form widget onto your page.
4. You have the option to choose a Contact Us or a Blank Form. Both forms allow you to add and delete, rename and move the location of your form fields.
5. You can edit the form settings at any time by clicking Edit on the upper-left hand corner of your Form widget.
6. To change the name of a field, click on the field name. You can delete the default text and add in your custom field name if you wish. You can also add default text to the text fields that your user will fill in.
7. You also have the option to change the name of the "Submit" button on the form, to a name more appropriate to your form or business.
8. To delete a field click on the red "X" in that particular field.
9. To move a field to another position on the form, click on the field and drag and drop this where you'd like it go.
10. To add another field to your form, click Add new field drop-down list. You have the choice to add:
- Single Line Text
- Multi-Line Text
- Multiple Choice
- Checkboxes
- Choose from a list
- Text
Once again, all these fields are customizable to suit your form needs.
11. Under the "Settings" tab is a field for editing the email address the form submissions are sent to, as well as a customizable completion message. This is the message that your site visitor will see after successfully submitting your form.
12. Once you are done customizing your form, click Save.
13. Click on the Desktop or Mobile icon to preview what your form will look like once it is published.
Controlling the Form width
When you add your form, you will notice that the form will take up the entire width of the site if it's not inside a container such as a Panel widget or Columns widget. If you wish to control the width of the Form widget, there are two options to do so:
Option 1: Use a Panel widget.
- In the Sitebuilder, go to Widgets > Popular.
- Drag and drop the Panel widget onto your page.
- Click Spacing.
- Under "Content Width", change to PX values and then select how wide you want your Form width to be.
- Click Save.
- Drag your Form widget into the Panel widget.
You should now see your Form widget display at the values you've set.
Option 2: Use a Columns widget.
- In the Sitebuilder, go to Widgets > Popular.
- Drag and drop a Columns widget.
- Drag your Form widget into one of the columns.
- Click on the vertical bar and drag to the left or right to control the space.
Please note: If you want the Form widget to display in the middle of your page, drag and drop another Columns widget into one of the Columns. You should now have 3 columns. Then, drag your Form widget into the middle column. Move the Column widget's vertical bars to the left or right to enlarge or decrease the space. Your Form widget will adjust accordingly.
If you're happy with your form, republish your site to make it public.