This documentation provides comprehensive insights into the Form Blocks developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Form block name.
3. Then select the appear block ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Form and its child block.
3. After on the right side, Click on the Block. Then the Form details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab (Parents Blocks)

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences. Customize for the Parent’s blocks. Any changes will applied to all items.

General Section

Go to Basic > General

Presets of Form

There are different presets available, Select any that prefer your choose.

1. Presets: Select the Preset 1 from the selection panel and it appear here.

2. Presets: Select the Preset 2 from the selection panel and it appear here.

3. Presets: Select the Preset 3 from the selection panel and it appear here.

Customize General Section

This section provides a control for the general,

1. Presets: Click on the presets selector and the pre-made styles will appear. you can select any.
2. Show fields icon: Enable the switcher to show the Icon.

ADD NEW FORM FIELDS

1. Click on the ” Add Field + ” button on the bottom right section of Form Fields. It will appear a modal with embed form blocks.

2. Search by the block name.
3. Select the exiting block from the section.

Country Field Add

1. Search by “ Country Field ” and it will appear the country field block
2. Select the searched block, “ Country Field “.

3. After appearing the ” Country Field ” Just click on it and it will appear a popup will appear.
4. Select the Country from there. The country and the Country Flag appear left side of the country.

5. After selecting the country, It will appear on the right.

Date Time Field Add

1. Search by “ Date Time Field ” and it will appear the country field block
2. Select the searched block, “ Date Time Field “.

3. Just click on the Date Time Field and it will appear a selection template of Calendar.
4. Pic a date from there, The Months, Year and Day appear on there. Select any of them.

5. After selecting the date it will appear on this fields.

Phone Number Field Add

1. Search by “ Phone Number Field ” and it will appear the country field block
2. Select the searched block, “ Date Time Field “.

3. Select the Country Dialling Code on the Left side. It will appear the Country Flag, Name and Dialling Code.
4. Choose the country code you want to select.

5. After select the Country code write the Phone Number.

Checkbox Field Add

1. Search by “ Checkbox Field ” and it will appear the country field block
2. Select the searched block, “ Date Time Field “.

3. The selected checkbox appear on the right there.

Number Field Add

1. Search by “ Number Field ” and it will appear the country field block
2. Select the searched block, “ Number Field “.

3. Number Fields appear on there, It will allow number only.

By following this From relevant fields can be added on there.

Form Settings Section

Go to Basic > Form Settings Section

Set settings for the form,

1. Form Title: Set the title form.
2. Notification Type: Set the type for notification (e.g.: Send Mail, Save Response (Pro), Save Response & Send Mail (Pro) ).
3. Email To: Set an email that email will receive the form submission.

4. Email CC (Optional): Set email cc for receiving the form submission. “cc” stands for “carbon copy. It’s used to include additional recipients who should be informed but aren’t directly responsible for any action items.
5. Email BCC ( Optional ): Set email cc for receiving the form submission. “BCC” stands for “blind carbon copy.” It secretly includes recipients in an email without others seeing their addresses.
6. Email Subject: The email subject is a concise summary of the content or purpose of the email. It helps recipients understand the context and importance of the message at a glance.

Form Submission Section

Go to Style > Form Submission

Set form submission settings by following this,

1. Success Type: Set the success type (e.g.: Message, Redirect(Pro)).
2. Message Position: Set the position for the message (e.g.: Form Top, Form Bottom).
3. Success Message: Set a message for success.
4. Fail Message: Set message for the email failed.
5. Validation Message: Set the message for the validation form.

Submit Button Section

Go to Basic > Submit Button

This section provides control for the Submit Button,

1. Label: Set the label for the submit button.
2. Alignment: Set alignment for position.
3. Show Icon: Enable the switcher to show the Icon.

4. Select Icon: Select the icon from the icon library.
5. Position: Set the position for the icon (e.g.: left, right).

Google Recaptcha Section

Go to Basic > Recaptcha

Set the Google recaptcha settings for the form,

1. Enable Google reCaptcha:
2. Click on the link to set the settings. It will navigate to the dashboard of Zoloblocks.

Go to API Settings Tabs

1. Click on the API Settings tabs, It appears the tabs control the setting API keys for different sections.
2. Click on the Edit Settings Button.

Set SITE KEY

1. SITE KEY: Set the site key.
2. SECRET KEY: Set the secret key.
3. Click on the ” Save Changes ” button and save it.

Style Tab (Parents Blocks)

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Label Section

Go to Style > Label

Set the label for the section,

1. Label Color: Set the color for the label.
2. Required Color: Set the required color.
3. Typography: Set the typography for the label.
4. Margin: Set margin for the label.

Field Icons Section

Go to Style > Field Icons

1. Color: Set color for the field icons.
2. Icon: Set the size for the icon.

Input Fields Section

Go to Style > Input Fields

This section provides control for the input fields,

1. Text Color: Set the color for the input text.
2. Placeholder Color: Set the placeholder color.
3. Typography: Set typography for the input fields.
4. Border: Set a border for the input.

5. Border Radius: Set the border corner edges rounded.
6. Padding: Set padding for the input fields.
7. Background: Set background color.

Fields Focus Section

Go to Style > Fields Focus

Set focus for the input fields,

1. Color: Set the color for the field focus.
2. Width: Set the width for the fields.

Submit Button Section

Go to Style > Submit Button

This section provides control for the submit button,

1. Typography: Set the typography for the submit button.
2. Border: Set the border for the button.
3. Border Radius: Set the border corner edges rounded.

4. Padding: Set padding for the inner space.
5. Margin: Set the margin for the button.

Normal State for Submit Button

6. Color: Set the color for the submit button.
7. Background: Set the background for the button.

Hover Stae for Submit Button

The changes will appear on mouse hover,

8. Hover Color: Set the hover color for the button.
9. Background: Set the background for the button.

Message Section

Go to Style > Message

This section provides control for the message, This message will appear on success or error occurs after submitting the form.

1. Close Button Color: Set the close button color for the message.

Success Tab

2. Color: Set the color for the success message.
3. Typography: Set typography for the message.
4. Border: Set a border for the success message.

5. Border Radius: Set the border rounded.
6. Padding: Set the padding.
7. Background: Set the background for the message.

Error Tab

8. Color: Set the color for the error message.
9. Typography: Set typography for it.
10. Border: Set the border for the error.

11. Border Radius: Set the border radius for the error message.
12. Padding: Set padding for the error message area.
13. Background: Set the background.

Form (Child Blocks)

Here we will work with the Child blocks of the Form. The changes will applied to the relevant item only. Let’s follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Select the Form Child block under the Progress Bar parent blocks.
3. On the right side, the selected Form Child details will appear.
4. The Form Child controls will appear here. ( Basic, Style, Extra ).

Basic Tab ( Child Block )

This tab provides control to customize the child item of the Form child.

General Section

Go to Basic > General

This section provides control for the general section,

1. Show Label: Enable the switcher to show the label for the icon.
2. Is it Required Fields?: Enable the switcher to show the required fields.
3. Show Icon: Enable the switcher to show the Icon.
4. Show Requreid Symbol: Enable the switcher to show the required symbol.

Content Section

Go to Basic > Content

Set customization for the content fields,

1. Field Label: Set the Field label for the content.
2. Placeholder: Set the placeholder for the text fields.
3. Required Message: Set the required message.
4. Select Icon: Select the icon for the text fields.

Style Tab ( Child Block )

This tab provides the controls of the Progress Bar Child Items. The changes will apply only to relevant items. Let’s Explore all the controls.

Label Section

Go to Style > Label

Make the appearance changes by following this,

1. Lable Color: Set the color for the label.
2. Required Color: Set the required Color.
3. Typography: Set the typography for the label.
4. Margin: Set outer space by setting the margin.

Field Section

Go to Style > Field

Make appearance changes for the fields section,

1. Text Color: Set the color for the text.

2. Placeholder Color: Set the placeholder color for the input fields.
3. Typography: Set the typography for the field.
4. Border: Set the border color.

5. Border Radius: Set the border corner radius.
6. Padding: Set inner spacing by padding.
7. Background: Set the background for the input fields.

Icon Section

Go to Style > Icon

Make the icon customization,

1. Color: Set the color for the icon.
2. Icon: Set the icon size.

Extra Tab Controls

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

The Video help you to learn more about the block. Please visit the demo page for examples.

Thanks for being with us.