• Skip to primary navigation
  • Skip to main content

GravityWP

The best information about Gravity Forms, GravityView, Gravity Flow and other addons

  • Tutorials
  • Forms
  • Views
  • Workflow
  • PDF
  • Perks
  • Show Search
Hide Search
Erik van Beek

CSS Ready Classes selector for Gravity Forms

Erik van Beek · Feb 8, 2018 ·

Gravity Forms has CSS Ready Classes to style your form fields. Using these classes, you can easily create more advanced layouts for the fields in your forms. Excellent idea, however, the problem is you always need to remember what the exact class name is. Now with this CSS Ready Classes selector, you don’t need to remember. Simply click on a button to launch the pop-up and choose the class you want to add.

Download the CSS selector plugin (WordPress) Gravity Forms about CSS Ready Classes
  1. Add your custom CSS
  2. Simple pop-up (modal) to select your CSS
  3. Also 4 columns Gravity Forms fields supported
  4. Convenient button to add CSS Ready Classes to Gravity Forms field

Add your custom CSS

You can add your own CSS to the GravityWP - CSS Selector easily in your functions.php file. Just add the following code there. It adds quick buttons and an accordion on top of the modal. That way you can put easily your own CSS in the layout you want.
// Add custom css: quick buttons and accordion at the top of the GravityWP - CSS Selector modal
function my_custom_gwp_css_selector_add_css() {
    $html .= "<div class='gwp_quick_links'>
	<a class='gwp_css_link' href='#' rel='your_custom_css_class' title='Adds your_custom_css_class to the CSS field'>Custom css</a>
	<a class='gwp_css_link' href='#' rel='your_custom_css_class_2' title='Adds your_custom_css_class_2 to the CSS field'>2nd custom css</a></div>
	<li>
	<a class='gwp_css_acc_link' href='#'>Custom CSS</a>
	<div class='gwp_css_accordian'>
	<a class='gwp_css_link' href='#' rel='your_custom_css_class' title='Adds your_custom_css_class to the CSS field'>Custom css</a>
	<a class='gwp_css_link' href='#' rel='your_custom_css_class_2' title='Adds your_custom_css_class_2 to the CSS field'>2nd custom css</a>
	</div>
	</li>";
    return $html;
}
add_filter( 'gwp_css_selector_add_custom_css', 'my_custom_gwp_css_selector_add_css' );

Simple pop-up (modal) to select your CSS

Clean and simple pop-up that lists all the CSS Ready Classes.

Also 4 columns Gravity Forms fields supported

Choose for the new CSS Ready Class to make 4 columns.

Convenient button to add CSS Ready Classes to Gravity Forms field

The plugin adds a convenient button under the advanced tab next to the CSS Class field.
Download the CSS selector plugin (WordPress) Gravity Forms about CSS Ready Classes

GravityWP

© 2021 - This website is made possible by the wonderful services of
WordPress, GravityForms, GravityView, GravityWiz, Genesis Framework & WP Engine

  • About
  • Hire GF developers
  • Charts
  • Cheat Sheet