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.
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
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
MailChimp Settings
Check out this guide for a step-by-step walkthrough on setting up Mailchimp integration with Premium Blocks’ Contact Form.
API Key: Allows users to choose the source of their MailChimp API key (e.g., custom input or predefined settings).
API Key: A field where users enter their MailChimp API key for authentication.
Select List: Lets users choose the MailChimp audience (list) where new subscribers will be added.
Subscriber: Maps the email input from the form to the corresponding MailChimp email field.
Subscriber First Name Field: Assigns the first name input from the form to MailChimp’s first name field.
Subscriber Last Name Field: Assigns the last name input from the form to MailChimp’s last name field.
Subscriber Phone Field: Maps the phone number input from the form to MailChimp’s phone field.
Gutenberg Contact Form Block—MailChimp Settings
MailerLite Settings
This guide will walk you through the process of integrating Mailer Lite with Premium Blocks’ Contact Form.
API Token: Allows users to select the API token source for Mailer Lite (e.g., Default or Custom).
Subscriber Email Field: Maps the email input field from the form to the corresponding MailerLite email field.
Subscriber Name Field: Assigns the name input field from the form to MailerLite’s name field.
Gutenberg Contact Form Block – MailerLite 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 – 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.
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
Radio Fields Settings
Radio options: Add your radio options.
Required: Make the radio a required field or not.
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.
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 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 – 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 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
Configuring SMTP for Reliable Email Notifications
Configuring SMTP (Simple Mail Transfer Protocol) on your website is absolutely vital to guaranteeing consistent email delivery from your Contact Form. SMTP guarantees you never miss crucial form entries by helping emails not be tagged as spam or fail-through. WP Mail SMTP is a plugin that offers a guided setup mechanism for tying your WordPress site to your email service provider. Check this YouTube tutorial for a thorough overview of installing SMTP, including creating a Gmail account. Correcting SMTP guarantees seamless email notifications and helps to prevent possible problems with your forms.
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.
