Gutenberg Contact Form Block

Introduction

Gutenberg Form Blocks simplifies the process of building WordPress forms, whether you’re collecting feedback, conducting surveys, or capturing user information. With its intuitive interface and user-friendly features, you can effortlessly design visually appealing forms that seamlessly integrate with your website’s aesthetics with Premium Blocks.

Visit Demo Page

Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Contact Form Block?

Insert the Premium Form Block into your Gutenberg editor.

Gutenberg Form Block Support Inner Blocks. You have the option to add more fields, including various types such as:

Name
Email
Checkbox
Radio
Toggle
Phone
URL
Hidden
Accept
Date
Textarea
Select

If you need to ask for more information from your visitors, you can easily add extra fields to the form. Just click on the “+” icon and pick the type of field you want to include. For example, you could add a field to ask for the visitor’s phone number or to request their mailing address.

Gutenberg Contact Form Block General Settings

Fill Color – Change the background color of the form.
Outline – Add or customize a border around the form or its elements.
Fill Rounded – Apply rounded corners to the form elements with a background color.
Outline Rounded – Fill Rounded, but for elements with an outline, give it rounded corners.
Alignment – Set the text alignment within the form. Options are “Left”, “Center”, and “Right”.
Success Message – Customize the message that appears when a form is successfully submitted.
Error Message – Set the message that displays when there is an error in form submission.

Gutenberg Contact Form Block Submit Actions & Button Settings

Submit Actions: This section lets you configure what happens after the form is submitted. Options include:
Send Email: If toggled on, the form will send an email upon submission.
MailChimp: Integrates with the MailChimp service to add the submitter to a mailing list or send a transactional email.
MailerLite: Similar to MailChimp, this integrates with MailerLite for email marketing or automation.
FluentCRM: Connects with FluentCRM for customer relationship management tasks.
Redirect: This option will redirect the user to a different page after the form is submitted.
Button: Under this section, you can customize the appearance of buttons within the form:
Fill Color: Change the background color of the button.
Outline: Adds or customizes the button’s border.
Rounded Fill: Provides a button with rounded corners and a solid background.
Rounded Outline: Offers a button with rounded corners and only an outline with no fill.
Circled Fill: Gives the button a circular shape with a solid background.
Circled Outline: Create a button with a circular shape and an outlined border.
Alignment: Align the button within the form. Options include “Left”, “Center”, and “Right”.
Button Size: Select the size of the button.

Gutenberg Contact Form Block Name Field Settings

Autocomplete Dropdown: Enable or disable the browser’s autocomplete feature.
Placeholder Field: Add placeholder text.
Required Toggle: Enable or disable to set whether the form name is a required field.

Gutenberg Contact Form Feed Block interface for creating a form field, featuring settings for 'Form Name' with options for autocomplete, placeholder text, and a toggle to make the field required. — Gutenberg Contact Form Feed Block – Form Name Options

Gutenberg Contact Form Block Email Field Settings

Autocomplete: Choose the autocomplete option.
Placeholder: Set a placeholder for the Email field.
Enable Icon: Enable the field icon.
Select Icon: Set an icon for the field.
Required: Enable whether the email input is required or not.

Email options for Premium Contact Form block on Gutenberg editor — Gutenberg Contact Form Feed Block – Form Email Options

Gutenberg Contact Form Block Checkbox Fields Settings

Checkbox options: Add your checkbox options.
Required: Make the checkbox required or not.

Gutenberg Contact Form Feed Block Checkbox Options

Gutenberg Contact Form Block Radio Fields Settings

Radio options: Add your radio options.
Required: Make the radio required or not.

Radio require toggle enabled for Gutenberg Contact Form Block — Gutenberg Contact Form Block Radio Options

Gutenberg Contact Form Block Toggle Field Settings

Style: Choose the style of the toggle rounded or squared.
On state: Set a value for the toggle when it is on.
Off state: Set a value for the toggle when it is off.
Default State: Set a Default State for the toggle.
Required: Make the toggle required or not.

Toggle form from Premium Contact Form block on Gutenberg editor — Gutenberg Contact Form Block Toggle Options

Gutenberg Contact Form Block Hidden Field Settings

Name: Set the hidden field name.
Value: Set the hidden field Value.

Gutenberg Contact Form Block Checkbox Options

Gutenberg Contact Form Block Styling Controls

Gutenberg Contact Form Block’s Lable Style

Typography: Controls the font size of the label text.
Color: Set the text color for both the normal and hover states of the labels, allowing for a visual distinction when users interact with the labels.

Gutenberg Form Feed Block – Label Styling Options

Gutenberg Contact Form Block’s Inputs Style

Typography: Allows setting the font properties for text inside the input fields.
Color: Offers color selections for text in Normal, Hover, and Focus states.
Background: Provides an option to set the background color of the input fields.
Placeholder: Color customization for placeholder text.
Border: Settings for border style, width, and color.
Button Radius: Set the roundness of the corners for each input field, with individual control over the top, right, bottom, and left corners.
Margin: Adjust the outer space around elements; options to set values in pixels, em, or percentage.
Padding: Control the inner space within the elements; also adjustable in pixels, em, or percentage.

Gutenberg Form Feed Block – Inputs Styling Options

Gutenberg Contact Form Block’s Radio/Checkbox Style

Normal, Hover & Focus are Tabs for configuring the radio button’s style in its default state, hover state, and when it is in focus.
Background: Option to change the background color of the radio button.
Element: Option to customize the appearance of the radio button itself.
Border: Settings to adjust the border style with predefined styles like solid, dotted, dashed, etc.
Border Width: Controls to set the thickness of the border for the top, right, bottom, and left edges individually.
Border Color: Color picker to change the color of the border.
Border Radius: Options to adjust the roundness of the border corners for each side of the radio button.

Gutenberg Form Feed Block – Radio Styling Options

Gutenberg Contact Form Block’s Button Style

Typography: Adjust the font settings for the button’s text.
Color: Change the text color for Normal and Hover states.
Background Type: Select the background styling for the button.
Border: Choose the border type and adjust the border settings.
Border Radius: Set the roundness of the button’s corners.
Margin: Adjust the space around the button.
Padding: Set the space inside the button’s border.

Gutenberg Form Feed Block – Button Styling Options

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group

Gutenberg Contact Form Block Tutorial

Table Of Content