Forms block

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:

  1. Choose a location where you want to add your Forms block and click the Add a block (+) Plus button.
  2. In the Block library, choose Forms from the list to see the pre-designed layout for this block type.  
  3. Click the pre-designed layout you like to add it to your page.

no-logo-Forms-block-1.png

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.

no-logo-Forms-block-2.pngThe 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.

no-logo-Forms-block-3.png

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: 

  1. Click the form to activate the Form settings window. 
  2. In the General tab, click the Settings icon of the form field you want to edit.

    no-logo-Forms-block-4.png
  3. 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).
  4. You can also tick the Make required button, so the form cannot be sent without filling in this field.

    no-logo-Forms-block-5.png
  5. 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:

  1. Click the form to activate the Form settings window.
  2. 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. 
  3. Click the Create option message in the drop-down field to confirm adding the email.
  4. In this window, you can also change the Success message your visitors see when they submit the form. 
  5. 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.

no-logo-Forms-block-6.png

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).

WL - Forms - 1.png

The Contacts category (scroll down in the Add new item window to see them) includes the following fields:

  • Name
  • Email
  • 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, find the field you want to delete, and click its Delete icon.no-logo-Forms-block-8.png

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.

no-logo-Forms-block-9.png

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. 

no-logo-Forms-block-10.png

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.

no-logo-Forms-block-11.png

 

Was this article helpful?
0 out of 0 found this helpful