Embed & Style Gravity Forms Using Gutenberg Block Styler

Block Styler For Gravity Forms adds a dedicated Gravity Form Styler block to the WordPress Gutenberg editor.

With this block, you can easily embed any Gravity Form on your website and visually customize its design without writing CSS code.

This step-by-step guide explains how to embed and style your forms.

• A WordPress Website
• Gravity Forms Plugin
• Gutenberg Block Styler For Gravity Forms Plugin

Add Gravity Form Styler Block On WordPress Page

1. Open a WordPress page in edit mode.

2. The Gutenberg editor will load your page content.

3. Search for the Gravity Form Styler block and select it.

4. The block is now added to your page layout.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Embed Gravity Form On Gutenberg Block Editor

1. Select the added block on your page.

2. In the Gravity Form Styler sidebar settings, open the Shortcode Params panel.

3. Choose your form from the Select Gravityform dropdown menu.

4. Your Gravity Form will load live inside the Gutenberg editor.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Shortcode Parameter Settings

1. In the Gravity Form Styler block sidebar settings, select the Shortcode Params panel.

2. Select Gravityform — Dropdown menu to choose the form to display.

3. Show Title — Toggle switch to show or hide the form title.

4. Show Description — Toggle switch to show or hide the form description.

5. Ajax — Toggle switch to enable smooth AJAX form submission without reloading the page. Disable to use standard page refresh submission.

6. Tab Index — Specify the starting keyboard tab navigation index for form fields.

7. Field Values — Pass dynamic default field values. See Gravity Forms Dynamic Population for guidance.

8. Reference: Gravity Forms Shortcodes Documentation

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

General Settings

1. In the Gravity Form Styler block sidebar settings, select the General panel.

2. CSS ID — Set a custom HTML element ID for the form container.

3. Load Google Fonts Manually — Enable this switch to automatically load selected Google Fonts on your website frontend. Disable if your theme already includes these fonts.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Form Wrapper Setting

1. In the Gravity Form Styler block sidebar settings, select the Form Wrapper panel.

2. The form wrapper is the main outer container surrounding your form.

3. Customize the following layout properties:

   • Padding
   • Margin
   • Background Color / Image
   • Border Style & Color
   • Border Radius (Corner Rounding)

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Form Title Settings

1. In the Gravity Form Styler block sidebar settings, select the Form Title panel.

2. Controls the typography and appearance of the main form title when Show Title is enabled.

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Form Description Settings

1. In the Gravity Form Styler block sidebar settings, select the Form Description panel.

2. Controls the appearance of the form description text shown below or above the title when Show Description is enabled.

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Progress Bar Wrapper Settings

1. In the Gravity Form Styler block sidebar settings, select the Progress Bar Wrapper panel.

2. The progress bar wrapper is the outer container enclosing multi-step form progress indicators.

3. Customize styles for:

   • Padding
   • Margin

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Progress Bar Title Settings

1. In the Gravity Form Styler block sidebar settings, select the Progress Bar Title panel.

2. Controls the progress step text (such as Step 1 of 3) shown above multi-step forms.

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Progress Bar Settings

1. In the Gravity Form Styler block sidebar settings, select the Progress Bar panel.

2. Customize the visual appearance of the animated progress fill bar.

3. Customize styles for:

   • Background Color
   • Percentage Text Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Section Break Container Settings

1. In the Gravity Form Styler block sidebar settings, select the Section Break Container panel.

2. Section breaks divide form fields into separate logical sections. This panel controls the container surrounding section titles and descriptions.

3. Customize styles for:

   • Padding
   • Margin
   • Border Bottom Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Section Break Title Settings

1. In the Gravity Form Styler block sidebar settings, select the Section Break Title panel.

2. Style the heading text for form section dividers.

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Section Break Description Settings

1. In the Gravity Form Styler block sidebar settings, select the Section Break Description panel.

2. Style the explanatory text included inside section dividers.

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Standard Field Label Settings

1. In the Gravity Form Styler block sidebar settings, select the Standard Field Label panel.

2. Controls the text labels displayed above form fields.

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Required Field Indicator (Asterisk) Settings

1. In the Gravity Form Styler block sidebar settings, select the Required Field Indicator (Asterisk) panel.

2. Controls the asterisk symbol (*) displayed next to required form field labels.

3. Set the color for the required asterisk indicator.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Sub-Label Settings

1. In the Gravity Form Styler block sidebar settings, select the Sub-Label panel.

2. Controls secondary sub-labels (such as First Name / Last Name labels on Name fields).

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Input Field Container Settings

1. In the Gravity Form Styler block sidebar settings, select the Input Field Container panel.

2. Controls the wrapper box enclosing individual form fields, including their labels, inputs, descriptions, and validation messages.

3. Customize styles for:

   • Padding
   • Margin

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Input Field Description Settings

1. In the Gravity Form Styler block sidebar settings, select the Input Field Description panel.

2. Controls helper text displayed below input fields.

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Input Field Settings

1. In the Gravity Form Styler block sidebar settings, select the Input Field panel.

2. Controls the design of text fields, textareas, and select dropdown boxes.

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color
   • Border Style & Color
   • Border Radius
   • Background Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Input Placeholder Settings

1. In the Gravity Form Styler block sidebar settings, select the Input Placeholder panel.

2. Controls hint text displayed inside empty text inputs and select dropdowns.

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Footer Settings

1. In the Gravity Form Styler block sidebar settings, select the Footer panel.

2. Controls the bottom container wrapping submit, next, and previous navigation buttons.

3. Customize styles for:

   • Margin
   • Padding

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Button Settings

1. In the Gravity Form Styler block sidebar settings, select the Button panel.

2. Controls submit, next, and previous buttons.

3. Customize styles for:

   • Margin
   • Padding
   • Button Alignment
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color (Default & Hover)
   • Background Color (Default & Hover)
   • Border (Default & Hover)
   • Border Radius (Default & Hover)

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Confirmation Message Settings

1. In the Gravity Form Styler block sidebar settings, select the Confirmation Message panel.

2. Controls the thank-you message displayed after successful form submission.

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color
   • Background Color
   • Border Style & Color
   • Border Radius

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Validation Message (Form) Settings

1. In the Gravity Form Styler block sidebar settings, select the Validation Message (Form) panel.

2. Controls the error alert box displayed at the top of the form when fields are missing or invalid.

3. Customize styles for:

   • Padding
   • Margin
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color
   • Background Color
   • Border Style & Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Field Validation Settings

1. In the Gravity Form Styler block sidebar settings, select the Field Validation panel.

2. Controls validation error messages displayed below individual form fields.

3. Customize styles for:

   • Container Margin
   • Container Padding
   • Container Background Color
   • Border Style & Color
   • Font Family
   • Font Size
   • Font Weight
   • Font Style
   • Line Height
   • Letter Spacing
   • Word Spacing
   • Text Transformation
   • Text Alignment
   • Font Color

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Advanced Settings

1. In the Gravity Form Styler block sidebar settings, select the Advanced panel.

2. Add custom CSS class names to target your Gravity Form with custom styling rules.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial