GravityWP

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

Erik van Beek

CSS Ready Classes selector for Gravity Forms

· ·

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.

Hire the best developers for Gravity Forms

If you’re looking for good and experienced Gravity Forms developers to help you with your questions about GravityWP (like CSS Ready Classes selector for Gravity Forms) and other add-ons, we advice you to hire experts on Codeable. Codeable is by far the most professional, dedicated and fun community to find the freelancer you need to help you with your WordPress questions.

Click here to visit Codeable