Gutenberg Contact Form Block Tutorial

Introduction

Gutenberg Contact 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.

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.

General Settings

You can select from our pre-made presets such as: Fill Color, Outline, Fill Rounded, Outline Rounded, or Underline.

  • 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 General Settings, layouts presets, success and error message, etc.
Gutenberg Contact Form Block – General Settings

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 - Submit Actions & Button Settings
Gutenberg Contact Form Block – Submit Actions & Button Settings

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

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

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 Feed Block Checkbox Options

Radio Fields Settings

  • Radio options: Add your radio options.
  • Required: Make the radio a required field or not.
Radio require toggle enabled for Gutenberg Contact Form Block
Gutenberg Contact Form Block Radio Options

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

Hidden Field Settings

  • Value: Set the hidden field Value.
Gutenberg Contact Form Block Hidden Value

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's label styling options.
Gutenberg Contact Form 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 contact Form Block's inputs styling options.
Gutenberg Contact Form Block – Inputs Styling Options

Inputs Icon/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 Contact Form Block Radio, checkbox, and inputs icon styling options.
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 Contact Form Block button styling options.
Gutenberg Contact Form 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.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks