The Forms block is the one that houses a contact form – an easy and handy feature that allows your site visitors to get in touch with you. Our contact forms are fully automated, so you only need to specify your email address and create the form fields so that any time someone makes a form submission on your published site, it’s automatically delivered to your inbox. No third-party integrations are needed.
Below we will review how to edit the Forms block and the contact form specifically.
Adding a Forms block
Here’s how to add this block to your page:
- Choose a location where you want to add your Forms block and click the Add a block (+) Plus button.
- In the Block library, choose Forms from the list to see the pre-designed layout for this block type.
- Click the pre-designed layout you like to add it to your page.
Customizing block settings
You can customize the Form block with the help of its control pane. To activate it, click the block and then click the Block settings icon.
The Block settings menu will appear. It consists of two tabs: the Layout tab and the Appearance tab.
In the Layout tab, you can switch the block layout and choose which elements should be displayed in the block. To hide a specific block element (for example, if you want to remove an email address), remove the blue tick next to the element’s name.
In the Appearance tab, you can make the following changes:
- Block style: Change the color scheme of the block.
- Block spacing: Adjust the white spaces (margins) at the top and bottom of your block.
- Block height: Adjust the block's height by turning the fullscreen on and off.
- Media content location: Change the map position (for the block layout that has it).
- Form location: Choose where your form will be located (left or right side).
- Media settings: Add a black & white filter to the map within this block.
Note: Depending on the block layout you choose, you may have more or fewer controls in the Appearance tab.
Once you are done customizing block settings, click Save.
Customizing contact form fields
To customize the elements of a contact form, follow these steps:
- Click the form to activate the Form settings window.
- In the General tab, click the Settings icon of the form field you want to edit.
- In the Edit item menu, you can customize the Label (the text over the field) and the Placeholder (the text inside the field that hints to the visitor what to enter).
-
You can also tick the Make required button, so the form cannot be sent without filling in this field.
- Click Submit once done.
Specifying the contact form receiver
To make your form work, you need to specify the receiver email address – where the submissions will be sent to.
Here is how to specify the receiver email address for your contact form:
- Click the form to activate the Form settings window.
- In the Advanced tab, you will see your registration email added to the Recipients field. You can remove it from the list of form recipients by clicking the X icon near it or add one or more emails by typing into the field.
- Click the Create option message in the drop-down field to confirm adding the email.
- In this window, you can also change the Success message your visitors see when they submit the form.
- Once done, click Submit to confirm the changes.
Adding a new field
To add a new field, click the form to activate the Form settings window and then click the round Plus (+) button.
In the Add new item menu, you can choose a field type. The field types are grouped into two categories.
The Basic category includes the following fields:
- Short text (useful for short entries)
- Long text (useful for longer messages)
- Drop-list (allows your site visitors to choose from several options)
- Checkboxes (allows your site visitors to select one or multiple action items from the list)
- Radio buttons (allow your site visitors to choose only one option from a list of mutually exclusive choices)
- Date and Time (both fields work great for appointment or meeting requests).
The Contacts category (scroll down in the Add new item window to see them) includes the following fields:
- Name
- Phone
- Address
- Company
- Position
- Link
After you've chosen the new field type, add a Label (the name of the field) and a Placeholder (the text inside the field that hints to the visitor what to enter). You can also mark the field as required.
Once done customizing the new field, click Submit.
Read an extensive article on how to let your visitors schedule an appointment or a meeting.
Changing the order of fields in the form
You can change the order of items in the form by grabbing a hamburger icon next to the form title in the list and dragging it up or down the list. Form fields will be adjusted automatically.
Deleting form fields
To delete a form field, go to the Form settings and find the field you want to delete, and click its Delete icon.
Note: The Email field cannot be deleted since without it your form will not function. This field is where your visitors put their email addresses so that you can contact them later.
Creating a GDPR-compliant form
When you collect personal information from your visitors, such as names and email addresses, you must obtain consent from them.
Add a user consent request field to your contact form by clicking the Display GDPR consent field option in the Advanced tab.
You can fully customize the text of the consent field by clicking the default text and typing in or pasting your own wording. You will also need to add links to your terms and conditions pages.
Read more about GDPR compliance and privacy policy in our dedicated article.
Customizing the form button
You can modify the text in the button by clicking it and typing in the new words. To change the button color, you can apply the new color palette to your website. For more information about button editing, review this tutorial.
Security
Your websites are protected from massive entry of fake users and automated bots by hCaptcha.
Also, the suspicious information added to the fields of your form that looks like spam or scam triggers the following notice in the email right above the message itself.
We hope you find this article helpful. If you have any questions left, please contact our Support Team.
Ready to use your new knowledge? – Edit your site!