Form Block

The Responsive Blocks Addon offers a Form Block; a tool designed to help you create elegant and functional forms on your WordPress website, all without the need for any programming skills.

With this, you can collect information from visitors, such as their names, email addresses, and other details.

How to Use the Form Block? #

Install the Responsive Blocks Addon to use the form block. In your WordPress dashboard, navigate to the page where you want to add the form.

From the Responsive Blocks library, select the Form widget to add a form to the editor.

You can also add the form block by typing “/form” on the editor and selecting the Form block from the suggestions.

You can start by choosing a form variation from the preset options available in the form block.

Contact Form
Subscribe Form

Once you select the form preset, a form will be pasted on the editor.

1. Contact Form #

Easily add and customize a pre-built contact form for your website, allowing users to inquire about products or services, ask questions, or provide feedback.

Get a custom subscription form for your website in one click. Use this form block to build and expand your email subscriber list for newsletters, updates, and promotional content.

Content Settings in Form Block #

Responsive Blocks provides you with multiple formatting settings to easily customize the contents of your form.

1. General Settings #

Input Fields: Add, remove, or arrange custom fields to your form. You can click on the edit button to customize the field container individually.

2. Form Options #

Email to: Enter the default email address to see responses collected from the form.
Email Subject: Enter the title of the email.

3. Submit Messages #

Success Message: Enter the message to show after the form is successfully submitted.
Error Message: Enter the message to display when there is a problem with the server.

Select the form and click on the Styles tab to begin formatting. Responsive Block Addon offers the following customization options:

1. Labels #

Size: Select the size for your labels
Spacing: Use the slider to adjust spacing.

2. Input Fields #

Size: Select the size for your labels
Spacing: Use the slider to adjust spacing.
Screen type: Select screen type to customize responsiveness.
Input Padding: Use the slider to add custom padding to the input field box.

3. Button #

Normal Color: Choose button color and button background color.
Hover Color: Choose button color and button background color when hover.
Button Padding: Adjust the padding for the button.
Button Border Radius: Customize the button border-radius.
Button Alignment: Select the button alignment.

4. Colors #

Color: Customize color for the label, input text, input background, border, helper label, required label, success message, and error message.

5. Border #

Border Width: Use the slider to select a custom border width.
Border Radius: Use the slider to select a custom border-radius.

6. Help and Submit Messages #

Helper Text Size: Select custom help text size.
Success/Error Message Size: Select custom success/error text size.

Field Settings #

Field settings are displayed only when you select an individual field. You get complete customization options to tailor your form according to your needs.

1. Content Settings #

Field Type: You can choose any field type, like text, text area, email, URL, number, date, or checkbox.
Field Label: Enter a custom field name or use the toggle button to hide the label name.
Placeholder: Enter placeholder text for the container.
Help Text: Enter the text to be displayed when hovered.
Default Value: Enter the default value for the field container.

2. Style Settings #

Label Color: Select a custom color for your label name.

Your form is now formatted as per your preferences.

Forms serve as useful tools for collecting user data, lead generation, customer feedback, or subscription sign-ups. Use the Form block and effortlessly create and customize forms as per your preferences.

Form Block