Forms Block
Use the Forms Block to create a basic contact or appointment form.
Quick links
Overview
In the Gutenberg editor, open the block section and click or drag the Forms Block to the editor area. Main elements of the block are:
- Subtitle
- Title
- Paragraph
- Form
- Submit button
Note: Because of the frequency of use, the first three elements (Subtitle, title and paragraph) of the Text Block are integrated in almost every Sana block.
Settings
If the settings side panel is not visible while working on your page or post, click on the Settings icon in the top left corner of the editor toolbar. Once opened you will see all the available options of the selected block, organized into collapsible tabs.
General
- Content Align – Align the entire block content left, center or right
- Padding – Add top and bottom block padding
- Background – Choose a solid color or a background image
Note: Content Align positions containers within the block, while Text Align positions text within its own container.
Subtitle, Title, Paragraph
- On/Off toggle – Display or hide the element
- Text Align – Align text left, center or right within its own container
- Font Size – Choose from nine preset sizes or add a custom font size
- Text Color – Select a color for the subtitle, title and paragraph
Form
- Form Type – Choose between the Contact and Appointment form types
- Label Color – Select a color for the field label text
- Error Color – Select a color for the error message and field border
- Input Text Color – Select a color for text inside the fields
- Input Background Color – Select a background color for all form fields
- Input Border Color – Select a border color for all form fields
Submission
- Submit to – Choose the email address that will receive the submitted form
- From – Insert a name that will appear as the email sender
- Subject –Select a filed that will appear as the email subject
- Subject Value – Insert your own subject text (visible when subject is set to Custom)
- Reply to – Select an email field that will become a reply address
- Receive as – Choose in which format you wish to receive the submitted data
- After Submission – Choose what happens after a successful submitting
Messages
- Successful Submission – Insert a message for a successfully submitted form
- Failed Submission – Insert a message that appears if the form was not submitted
- Required Field – Insert a message that appears if one or more required fields was not filled
- Invalid E-mail – Insert a message that appears if the email address is invalid
Submit Button
- Style – Show the link as a button or hyperlink with an arrow
- Font Size – Choose from nine preset sizes or add a custom font size
- Text Color – Select a color for the link/button label
- Background Color – If the link style is set to Button, choose a color
- Border Radius – If the link style is set to Button, set the corner roundness (px)
Responsive
- Hide on Desktop – Block is visible on mobile, but not on desktop screens
- Hide on Mobile – Block is visible on desktop, but not on mobile screens
Tip: You can create two separate blocks for a section of your page and load each block on a different screen size.
Form Fields
Within the Forms Block you will find three types of Form Fields. These inner blocks behave like modules that give you more flexibility and control over your content.
Tip: Inner blocks are similar to regular blocks. Feel free to move them around, delete them or add new ones.
Input Field
- Type – Select the type of data you wish to collect in this input field
- Required – The field must be filled out before submission
Select Field
A Select Field allows the user to choose a single option from the drop down menu. In the Settings panel you can edit, add or remove available choices. You can also make the field a required one for submission.
TextArea Field
- Size – Choose the desired size (height) of the text field
- Required – The field must be filled out before submission
