/ Documentation /Blocks/Gravity Form Styler

Gravity Form Styler

Forms created with Gravity Form plugin can be styled with this block. You can set the color, border, and typography for various fields of the form and make it attractive.

Note: To use this block, make sure you have the Gravity Form plugin installed and activated.

Key Features –

  • List all available Gravity Forms, so that you can choose the required one
  • AJAX Form Submission
  • Tab Index for multiple gravity forms
  • The predefined style for form input fields – Box and Underline
  • Border for each input field with style options like width, radius, color, etc.
  • Typography and Color options for Content (Label, Input text)
  • Separate customization options for Radio & Checkbox (Size, Typography, Color, Border)
  • Total customization for Submit Button
  • Styling for Field Validation (Success/ Error) messages
  • Spacing for all form elements
gravity-form-styler-block-settings

General

This tab allows choosing a specific Gravity Form from the list. Once you choose a form, you can –

  • Enable AJAX Form Submission: This feature allows submitting form data in the background without page reload.
  • Using Multiple Gravity Forms: If you have multiple Gravity Forms on the same page, you would need to set a Tab Index. Refer article to see how Tab Index works.
  • Title & Description: A form title and its description can be displayed.

Field Style and Border

This tab offers options to style input fields like name, email, subject, message, etc. You can choose a predefined Box or Underline style, apply a border and customize it.

Content

The label of the form fields and its input text can be customized under the Content tab. You can choose different typography and colors.

Customization options for Radio & Checkbox

If your form contains Radio & Checkbox fields you can style them according to your color theme. Labels of these fields have typography and color settings.

gravity-form-styler-radio-check

Settings for Submit Button

The following settings are available for Submit Button –

  • Button Alignment
  • Button Font
  • Border Style
  • Border Width
  • Border Radius
  • Text Color – Normal, Hover
  • Background Color – Normal, Hover
  • Border Color – Normal, Hover
  • Button Padding (px)

Styling for Field Validation (Success/ Error) messages

Whenever a user enters input in the field, it gets validated. If it is invalid error message gets displayed else on successful form submission success message gets displayed. Various styling options are available under the Success/ Error Message tab.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

On this page
Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.