Section: Contact form

Everything you will need to know on how to setup your contact form section

Jalal avatar
Written by Jalal
Updated over a week ago

The contact form section makes it possible for you to add a section with a contact form, this comes in handy on some pages!

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on 'add section' which can be found in your left sidebar

2) Scroll down, or search for 'Contact form', then click on 'Contact form'.

3) Done, your Contact form section is added.

General settings

The general settings contains the settings for the styling, layout and the setup of the 'Contact form' section.
Simply click on the 'section' to open the settings.

On the right sidebar, the following settings will show

Position:
This setting will determine the alignment of the text fields. Do you want them aligned in the center or aligned on the left?


Heading size:
Select the size of the heading from a range of small to extra large. When you choose for "Extra large", the size of the description will also be a bit larger than normal. The heading size you choose here is only applied to desktop view, you can customize the mobile heading size globally in the general theme settings under "Typography".

Heading:
Set the heading of the form, in this case it's 'Contact form'

Button color scheme:
Set the color scheme of the buttons within this section.

Show input field placeholders
Do you want to show placeholders? Like 'Name' within the name field? Then enable this setting.

Compact view
Enable this if you want the form to be shown in a compact view.

Spacing

Bottom spacing desktop/mobile:

Set the spacing on the bottom for desktop and mobile.

That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.

How to configure the contact form?

You can edit your contact form, to determine which elements you want to use, for example only the name and email adress. That way you can configure the contact form to your likings.

1. Editing the contactform items.
To edit the contact form you simply click on the contact form item you want to edit in your sidebar on the left of your screen.

After you clicked the item (name in this example), on the right of your screen the following sidebar will open.

Text label:
Set the title of the label (field), for this example its 'Name'

Text placeholder:
Set the placeholder of the field, this will show in the input field, so the customer will always know how you would like to receive their data.

Required field:
Check this box to make the field required.

All the input fields have the same settings and can also be removed. To remove it, simply click on the 'Remove block' button.

Did this answer your question?