Embed & Style Gravity Forms Using Gutenberg Block Styler

Block Styler For Gravity Forms adds a Gravity Form Styler gutenberg block.

With this block you can embed a gravity form and style it.

This guide is a detailed guide on how to embed and style a gravity form.

Pre-requisites

  1. A WordPress website
  2. Gravity Forms plugin
  3. Block Styler For Gravity Forms plugin

Tools

  1. Computer

Total Duration : 10 minutes

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 1 - Add Gravity Form Styler Block On WordPress Page

Add Gravity Form Styler Block On WordPress Page
  1. Open a WordPress page in edit mode.
  2. Gutenberg editor loads the page content.
  3. Search for the Gravity Form Styler block and select it.
  4. The block is now added to the page.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 2 - Embed Gravity Form On Gutenberg Block Editor

Embed Gravity Form On Gutenberg Block Editor
  1. You need to select a gravity form for the block.
  2. In the Gravity Form Styler block settings, select the Shortcode Params accordion setting.
  3. Select a gravity form from the Select Gravityform dropdown
  4. The gravity form will load on the gutenberg editor.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 3 - Shortcode Parameter Settings

Shortcode Parameter Settings
  1. In the Gravity Form Styler block settings, select the Shortcode Params accordion setting.
  2. Select Gravityform - Dropdown to select a gravity form
  3. Show Title - A toggle switch to show/hide gravity form title
  4. Show Description - A toggle switch to show/hide gravity form description
  5. Ajax - A toggle switch. Enable to configure gravity forms submission via ajax. Disable to submit form using POST.
  6. Tab Index - Specify the starting tab index for the fields of this form.
  7. Field Values - Specify the default field values. Refer to https://docs.gravityforms.com/using-dynamic-population/ for details
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 4 - General Settings

General Settings
  1. In the Gravity Form Styler block settings, select the General accordion setting.
  2. CSS ID - Set the CSS ID selector for the gravity form
  3. Load Google Fonts Manually - Styles for form title, description, label etc have ability to set a google font. Enable this toggle switch and google fonts will be loaded on the frontend automatically. Disable this toggle switch t and you will have to manually add the google fonts of the frontend.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 5 - Form Wrapper Setting

Form Wrapper Setting
  1. In the Gravity Form Styler block settings, select the Form Wrapper accordion setting.
  2. A form wrapper is a main container that wraps the gravity form.
  3. In this setting you can style
    • Padding
    • Margin
    • Background Color/Image
    • Border
    • Border Radius
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 6 - Form Title Settings

Form Title Settings
  1. In the Gravity Form Styler block settings, select the Form Title accordion setting.
  2. Form title, as the name suggests, is the title of the form. It is shown when the Show Title toggle in Shortcode Params settings is enabled.
  3. Add 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 cards required.

Step 7 - Form Description Settings

Form Description Settings
  1. In the Gravity Form Styler block settings, select the Form Description accordion setting.
  2. Form description, as the name suggests, is the description of the form. It is shown when the Show Description toggle in Shortcode Params settings is enabled.
  3. Add 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 cards required.

Step 8 - Progress Bar Wrapper Settings

Progress Bar Wrapper Settings
  1. In the Gravity Form Styler block settings, select the Progress Bar Wrapper accordion setting.
  2. Progress bar wrapper is the container that wraps a progress bar.
  3. Add styles for
    • Padding
    • Margin
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 9 - Progress Bar Title Settings

Progress Bar Title Settings
  1. In the Gravity Form Styler block settings, select the Progress Bar Title accordion setting.
  2. Its represents the Step x of x text of the progress bar
  3. Add 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 cards required.

Step 10 - Progress Bar Settings

Progress Bar Settings
  1. In the Gravity Form Styler block settings, select the Progress Bar accordion setting.
  2. This is for styling the progress bar element.
  3. Add styles for
    • Background Color
    • Percentage Text Color
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 11 - Section Break Container Settings

Section Break Container Settings
  1. In the Gravity Form Styler block settings, select the Section Break Container accordion setting.
  2. Section break, break up fields into different sections. The section break container is the container the wraps section break title and description
  3. Add styles for
    • Padding
    • Margin
    • Border Bottom Color
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 12 - Section Break Title Settings

Section Break Title Settings
  1. In the Gravity Form Styler block settings, select the Section Break Title accordion setting.
  2. Style the title of the section break.

  3. Add 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 cards required.

Step 13 - Section Break Description Settings

Section Break Description Settings

  1. In the Gravity Form Styler block settings, select the Section Break Description accordion setting.

  2. Style the description of a section break.
  3. Add 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 cards required.

Step 14 - Standard Field Label Settings

Standard Field Label Settings
  1. In the Gravity Form Styler block settings, select the Standard Field Label accordion setting.
  2. It represents the label for input element
  3. Add 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 cards required.

Step 15 - Required Field Indicator (Asterix) Settings

Required Field Indicator (Asterix) Settings
  1. In the Gravity Form Styler block settings, select the Required Field Indicator (Asterix) accordion setting.
  2. This represents the asterix character shown for required fields.
  3. Set color for the character
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 16 - Sub-Label Settings

Sub-Label Settings
  1. In the Gravity Form Styler block settings, select the Sub-Label accordion setting.
  2. It represents the sub-label text for input elements.
  3. Add 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 cards required.

Step 17 - Input Field Container Settings

Input Field Container Settings
  1. In the Gravity Form Styler block settings, select the Input Field Container accordion setting.
  2. Its the main container for an input field. It encloses the label, sublabel, description, error, input field etc elements.
  3. Add styles for
    • Padding
    • Margin
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 18 - Input Field Description Settings

Input Field Description Settings
  1. In the Gravity Form Styler block settings, select the Input Field Description accordion setting.
  2. It represents the text that describes an input field
  3. Add 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 cards required.

Step 19 - Input Field Settings

Input Field Settings
  1. In the Gravity Form Styler block settings, select the Input Field accordion setting.
  2. It represents input fields for text, textarea and select dropdown.
  3. Add 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
    • Border Radius
    • Background
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 20 - Input Placehoder Settings

Input Placehoder Settings
  1. In the Gravity Form Styler block settings, select the Input Placehoder accordion setting.
  2. It represents the placeholder text used for elements like text, textarea and select dropdown.
  3. Add 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 cards required.

Step 21 - Footer Settings

Footer Settings
  1. In the Gravity Form Styler block settings, select the Footer accordion setting.
  2. It represents the section that wraps submit, next and previous button
  3. Add styles for
    • Margin
    • Padding
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 22 - Button Settings

Button Settings
  1. In the Gravity Form Styler block settings, select the Button accordion setting.
  2. It represents the buttons in a gravity form
  3. Add 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, both default and hover
    • Background Color, both default and hover
    • Border, both default and hover
    • Border Radius, both default and hover
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 23 - Confirmation Message Settings

Confirmation Message Settings
  1. In the Gravity Form Styler block settings, select the Confirmation Message accordion setting.
  2. It represents the confirmation message on successful form submission.
  3. Add 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
    • Border
    • Border Radius
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 24 - Validation Message (Form) Settings

Validation Message (Form) Settings
  1. In the Gravity Form Styler block settings, select the Validation Message (Form) accordion setting.
  2. It represents the validation error message shown at the top of the form.
  3. Add 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
    • Border
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 25 - Field Validation Settings

Field Validation Settings
  1. In the Gravity Form Styler block settings, select the Field Validation accordion setting.
  2. It represents the validation error a form field.
  3. Add styles for
    • Container Margin - The container that wraps the error message
    • Container Padding - The container that wraps the error message
    • Container Background Color - The container that wraps the error message
    • Border
    • 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 cards required.

Step 26 - Advanced Settings

Advanced Settings
  1. In the Gravity Form Styler block settings, select the Advanced accordion setting.
  2. Set custom CSS classes for the gravity form
FREE DOWNLOAD

Start your FREE trial. No credit cards required.