Customize the Gravity Forms CSS

Customizing the Gravity Forms CSS is easily one of the most painful aspects of working with Gravity Forms. Over time, I’ve collected several resources which I’ll share with you here.

Plugins

This is the latest tool I found that made me so happy after trying other Elementor methods, because this one is free and it works perfectly:
PowerPack Elementor Gravity Forms Widget

I’ve recommended this one to a few people, and they’ve enjoyed it:
Gravity Forms Styler

This is an interesting one that integrates with many different WordPress themes and plugins:
CSS Hero (demo)

This one is by WordPress support company Maintainn:
Gravity Forms Custom Styles

Tutorials

Gravity Forms + Bootstrap: Helpful function for adding Bootstrap classes to Gravity Forms fields

Styling Gravity Forms with Bootstrap

A collection of tutorials on how to format and style Gravity Forms



Note: Some of these are affiliate links and I may earn a commission if you purchase through one of them. I’m not writing here to make money so feel free not to use — they’re available as an easy way for you to say thank you if you appreciate me pointing you to something that ends up being useful for you.



Questions? Email Me

Prevent Gravity Forms Entry Creation

While you can’t currently prevent Gravity Forms from creating an entry (and you may not want to just in case it breaks something else that needs the entry information in the course of processing the form submission), you *can* delete the entry after the form has finished submitting using the gform_after_submission_{$form['id']} action hook and the Gravity Forms API.

So, if your form ID is 10, your code would be:

add_action( 'gform_after_submission_10', 'mysite_gform_after_submission_10', 10, 2 ); function mysite_gform_after_submission_10 ( $entry, $form ) {
GFAPI::delete_entry( $entry['id'] );
}

If you don’t want to worry about code, and want to be able to just enable this on any form you’d like by checking a box on the Form Settings page, use the Gravity Forms Utility plugin.

Disclaimer: You’ll want to check the other Gravity Forms integrations you’re using (if any), and make sure they don’t depend on a Gravity Forms entry after the form has been submitted. For example, the Gravity Forms + Stripe extension adds payment information to the entry and looks for it later. If the entry isn’t there, some of the Stripe functionality will be unavailable.



Questions? Email Me

Dynamically Pass Values from One Gravity Form to Another

Need to pass a value from one Gravity form to another? No problem!

Here’s how:

  1. On form #2, on the Advanced tab of the field you wish to dynamically populate, check the box to ‘Allow dynamic population’ and then specify the parameter name that will contain the value for this field.

    In the example below, I want to dynamically populate my product field. pass-field-values-to-another-form-dynamic-parameters

  2. On form #1, create a confirmation, selecting the ‘Page’ type and then the ‘Page’ you want to use. This page should be the one that contains form #2.

  3. Check the box to ‘Pass field data via Query String’ and then use the Merge Tags button to insert the fields you want to pass to form #2. Each field should be assigned to one of the parameter names you specified in step #1, and multiple values are separated by an ampersand (&).

    In the provided sample, two field values will be passed to the second form: phone={Phone:1} and email={Email:2}. pass-field-values-to-another-form-confirmation

Hope that helped!

Gravity Forms documentation: http://www.gravityhelp.com/documentation/page/Using_Dynamic_Population



Questions? Email Me

Use Conditional Logic in your Custom Gravity Forms JavaScript

Say you’re writing some custom JavaScript for your Gravity Forms form display and need to compare a form value with a conditional logic rule from a feed or elsewhere. Gravity Forms has some JavaScript already written to do the comparison for you, housed in the conditional_logic.js file. Although this file is only enqueued by default when a field on the form itself contains conditional logic, you can use the gform_enqueue_scripts hook to enqueue it based on your parameters. Then simply create your own “conditional logic” rule in an Array (using the proper format: fieldId, operator, value) and you’ll be able to pass the form ID and your rule to the gf_is_match function to effortlessly compare any field on your form with another value. Here’s an example: var rule = ['fieldId': '1', 'operator':'>', 'value':'10']; if ( gf_is_match( formId, rule ) ) { //handle your business } Enjoy! 🙂

Questions? Email Me