Gutenberg Block Styler For Gravity Forms

Gutenberg Block With Styling Options

Gutenberg is fast-loading interactive WordPress Visual Editor. It’s fast, interactive, customizable & widely accepted. More and more people including agencies are using it for building websites.

Gutenberg Block Styler For Gravity Forms provides a gutenberg block to interactively style a gravity form.

It provides ton of style options for all the different elements of a gravity form. All the style customization happen real-time within the gutenberg editor. This gives you live feedback that allows you to make any adjustments instantly.

Here’s a brief overview on styling & embedding options.

• General – Set CSS ID, toggle for google font loader.
• Shortcode Params – Select and embed a gravity form.
• Form Wrapper – It’s the main wrapper that contains the form. Set styles for margin, padding, background, border & border radius
• Form Title – Set margin, padding and typography for the form’s title.
• Form Description – Set margin, padding and typography for the form’s description.
• Progress Bar Wrapper – A multi-page gravity form can have a progress bar to show page progress. The progress bar wrapper is a main container around the progress bar. Set margin and padding for it.
• Progress Bar Title – One of the elements of a progress bar is the title. Set styles for margin, padding, typography and opacity.
• Progress Bar – It’s the main progress bar element. Set background color for progress completed and the color for the percentage text.
• Section Break Container – A section break is a content separator for your gravity form. The section break container is the main wrapper for the section break. Set styles for margin, padding and border bottom color.
• Section Break Title – Style the margin, padding and typography for the title of the section break.
• Section Break Description – Style the margin, padding and typography for the description of the section break.
• Standard Field Label – It’s the label for the input elements on the form. Set styles for margin, padding and typography.
• Required Field Indicator (Asterix) – For a required field, an asterix prefixes next to the label. Set style for asterix color.
• Sub-Label – Complex gravity form input element like name has multiple input elements like first name, last name etc. Sub-label is the label for such elements. Set styles for margin, padding and typography.
• Input Field Container – It’s the main container wrapping the input field. Set styles for margin and padding.
• Input Field Description – Each input field can have a description. Set styles for margin, padding and typography.
• Input Field – It handles generic style for input fields like text, email, tel, url, textarea and select elements. Set styles for margin, padding, typography, border, border radius and background.
• Input placeholder – A text and textarea element can have placeholder text. Set style for typography for such elements.
• Footer – A footer for gravity form holds the submit buttons. Set styles for margin and padding for the footer.
• Button – A gravity form has submit, next and previous button. Set styles for button margin, padding, alignment, typography, background, border and border radius.
• Confirmation Message – On successful submission of a form, a confirmation message is show. Set styles for margin, padding, background, typography, border and border radius of such message.
• Validation Message (Form) – This validation message shows on the top of the gravity form. Set styles for margin, padding, typography, background and border.
• Field Validation – This styles the validation error shown next to a field. Style the field errors margin, padding, background, border and typography.