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.
CSS Ready Classes selector for Gravity Forms
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.