November 7, 2019: Fixed fatal error when Gravity Forms was not active.
Some of our Perks rely on JavaScript to handle DOM manipulation in the form. For example, Populate Anything uses JS when populating fields and Live Merge Tags. JavaScript hooks, and the snippets we write for those hooks, are always more complicated to integrate into your site. There’s generally two methods you can use to add custom JavaScript to your form, and both of them have their drawbacks.
- The easiest method to include custom JavaScript in your forms is to include them in an HTML Field on the form,
wrapped in
<script>tags. While an easy method, it can cause some issues with AJAX-enabled forms. No bueno. - The more complex route is to write a custom function to enqueue it and place it somewhere in your theme’s code. Like any custom code, there are a multitude of different methods, and even a seasoned developer can run into issues making sure the script is loaded in the right context and not loaded on pages where it isn’t necessary.
A Better Way
During a discussion about how we recommend managing code snippets to our customers, we came up with a third option: a plugin to easily add custom JavaScript to Gravity Forms. We already recommend Code Snippets to our users for managing their PHP-based snippets, but there wasn’t an easy way to add custom JS to a form and only load it on that particular form. So we made one. It’s called Gravity Forms Custom Javascript, and it adds a Custom Javascript field to your Form Settings.
Getting Started
|
Download, install, and activate the plugin. |
|
Navigate to your Form Settings to find the new Custom Javascript field. |
Once the plugin is installed and activated, you’ll find the Custom Javascript field in your Form Settings. It includes a robust editor that will automatically highlight syntax to make it easy to read.
It even includes code suggestions should you be inclined to write custom JavaScript straight into the editor.
All Snippets Welcome
We didn’t build this solely for Gravity Perks. Gravity Forms has a bunch of available snippets too, and any of the JS ones will work with this plugin. They also maintain a massive library of JavaScript hooks that you can take advantage of. While they aren’t immediately ready for use, most of them have code examples to get you started, and many of those examples are commonly requested features.
Why We Built This
Many of our Perks have additional hooks and filters that you can apply to adjust their behavior outside of the user interface. We typically add these to our products because we have an idea for a new feature, but haven’t worked out the details on how to expose that feature to our customers in a way that is easy to use and clear to understand. Instead of sitting on the feature until we have baked an interface, we publish the hook so it can benefit the customers that need it.
In most cases, simply publishing the hook with some documentation is enough for developers to start using the feature. They’ll write custom code that uses the hook, and their Perks start doing incredible new things. We also often write our own code snippets that use these hooks, and we suggest them to our customers through Support interactions. Our Advanced and Pro Gravity Perks licenses includes Snippet support, and we’re happy to offer a solution that involves dropping in some of our code to extend the capability of a Perk.
Many snippets are blocks of PHP. You copy the code and paste it into your theme’s functions.php file. Depending on the snippet you might need to adjust some parameters like a Form ID or Field ID, and sometimes you need to call a class. If you have trouble with the snippet, we have a guide to walk you through basic troubleshooting.
Questions? Feedback?
Do you have questions about how this works, or is there a feature missing that you would really love to have? We’re always open to feedback and want to know how we can improve this plugin.
Did this resource help you do something awesome with Gravity Forms?
Then you'll absolutely love Gravity Perks; a suite of 47+ essential add-ons for Gravity Forms with support you can count on.
Hi I’m using your experimental snippet that limits the number of values in a multi-select, but what if I have several multi-select with autocomplete in my form and I want each multi-select to have a different value limit? I know I can copy the entire script and adapt each time the “var fieldId” and “var maxSelected” but maybe there is a cleaner way of doing this?
Thanks
Marie
Hi Marie,
We’ve already followed up via email.
Best,
Just downloaded this plug in to insert js code into my gravity form. Code only works in my localhost, not in the actual webpage that I am developing. Any particular reason for this?
Hi Marcus,
It should work on the actual webpage. Since it’s working on the localhost, then I’m guessing there may be some conflict happening on the actual webpage. I’ll suggest you run a Theme/Plugin conflict test to check if this is the case or not and if possible narrow it down to the offending plugin.
Best,
Hello, I have bought a plugin for credit card payment, but it only works with the Total field.
My form is somewhat more complex because it performs some calculations beforehand and I cannot use products.
How can I assign a number that I have previously calculated in the Total field of type price?
Hi Antonio,
I’m not really sure of what you mean by, Total field of type price. We’ll need to take a look at the Form setup and also see the settings for the credit card payment plugin to know what solution would work for you. If you have an active Gravity Perks License, you can get in touch with us via our support form, so we can look into this further.
Best,
Hello, I m using wp Astra theme and paid subscription gravity form to create a donation form for my ngo. I want to change the currency sign from USD to INR (Indian rupee) for which I downloaded gravityviz plugin to add the script to make the change. Unfortunately I cannot see the customer code field under form settings..
I have tried to reinstall the plugin etc but still its not there.
Can you please help me here?
By the way form isnt live yet so i m providing the url
Thanks Prateek
Hi Prateek,
After activating the Gravity Forms Custom Javascript, the editor should be visible on the Form Settings page. What you’re experiencing is quite unusual, so in case it’s still not working for you, then I’ll suggest you run a conflict test. However, if the conflict test doesn’t help then you can get in touch with us via our support form, if you have an active Gravity Perks License so we can dig into this further.
Best
I think there’s a bug with Gravity Forms version 2.5.15.3 (latest). I have a form with a HTML Content. Whenever I edit this content, my js code inside your addon disappears. I’m using the current version below.
FYI, I have some js code inside the HTML Content too.
Actually whenever I edit the form, my JS code is gone from your addon. I’m using WP version 5.8.3. My site is not live yet.
Hi Rachel,
I was unable to recreate the issue on my end. The current version of Gravity Forms on their website is 2.5.15.4, so you may want to give that a try and see if it helps. Also, are you opening the form settings in a different browser tab? In case you have the form settings opened in one tab and the Form Editor opened in another tab, if you’re to save/update the form editor without refreshing the page, after saving the code, there is a possibility that the codes in the editor will be deleted. So you may want to look at that too. However, if this isn’t the issue you’re experiencing and you have an active Gravity Perks License, you can send us an export of your form export via our support form, and we’ll be happy to dig into this further.
Best,
Hi, I’m trying to use a JavaScript API call in the custom JavaScript plugin to send email collected in the gravity forms to the required service. The JavaScript API goes thus: ORIBI.api(“setUserEmail”, email);
Now, my problem is that I don’t know the variable name for the email in gravity forms. Can anyone help me please?
Hi Adeyemi,
This will require digging by our dev team. You can get in touch with us via our support form if you have an active Gravity Perks license so we can take a closer look at your setup.
Best,
Just trying this out for the first time. I’m using this snippet:
https://gravitywiz.com/disable-submission-when-pressing-enter-for-gravity-forms/
When I paste in the code it gives me an unexpected token on the first line. Doesn’t seem to like being wrapped in tags. Should those script tags only be used when you embed in an HTML field and it’s not needed when used in this plugin?
Hi Brian,
We already followed up on this via email, but I wanted to post this in the comment thread so other customers could see it.
It should work when removing the HTML tags from the snippet.
Best,
OMG, where would I be without Gravity Perks!!! I love and use several of their perks in my development, and just found this little gem.
I spent days trying to sort out how to automatically populate the client-side date and time into gravity form fields. PHP will only populate the server’s time and I need to populate the user’s current date and time.
Before seeing this amazing little plugin for Gravity forms I was trying to get it done with complex PHP and javascript snippets or using bulky timezone changing tools. Thanks to you guys I just had to insert the Javascript snippet below in my form settings, and now it works like magic! Thank you!
**Including the snippet below in case this helps anyone else with a similar headache.
//Outputs time in 24-hour format and date in MM/DD/YYYY format //Reference https://tecadmin.net/get-current-date-time-javascript/
var today = new Date(); var timeh = today.getHours(); var timem = today.getMinutes(); document.getElementById(“input_27_5_1”).value=(timeh); //Change the input to your hour field input ID document.getElementById(“input_27_5_2”).value=(timem); //Change the input to your minute field input ID var dateString = moment(today).format(‘MM/DD/YYYY’); document.getElementById(“input_27_4”).value=(dateString); //Change the input to your date field input ID
Hi Nicole,
Glad to hear our plugin helped including Javascript on your forms. You might also want to check out our Populate and Modify Dates and Times snippet. We recently added support for populating the user’s time into Time fields.
Would it be a possibility to add all of the Free Perk addons to the Gravity Perks Plugin? Possibly as a new tab? I keep finding these little gems without realising their awesomeness.
Hi Sven,
That’s a nice suggestion. I will pass this over to our developers.
Thanks for using Gravity Perks.
Best,
Totally agree with you, Sven! Still working through some of the thought work on this but we definitely think it’d add a ton of value for our customers. 🤘
Hello
I’m new to gravity forms, i created a demo environment and upload this plugin and activate but when i try to create a new form and go to “settings” buttom i can’t see this custom javascript option.
What can i do?
Hi Alvaro,
When testing locally, it seems to be working as expected.
If you have an active Gravity Perks License, you can get in touch with us via our support form with your account email address and we’ll be happy to dig into this further.
Best,
Hi. I have an issue, I have previously entered JS but now I’ve deleted it, the JavaScript window under that form’s settings is now clear, yet, the JS code I entered previously is still active. How can I disable/delete it completely? Thanks.
I have by the way updated “Custom Javascript” to newest version and so is Gravity Forms.
Hi Rytis,
It sounds like there might be some server side caching happening. Could you try in an incognito browser window and/or deleting the browsing history? That should address the issue.
If you have an active Gravity Perks License, you can get in touch with us via our support form with your account email address.
Cheers,
Hi
I’m experiencing an issue with this plugin.
It seems to randomly loses any script that I’ve entered it. This usually happens after I’ve saved and come back to the form later.
Anyone else experiencing this problem?
Hi Scott,
I was unable to recreate this issue. Could you check if you have the latest version of this plugin, and also update Gravity Forms to the latest version and see how it works.
Best,
Hi there, We have Gravity from that redirect on submit to Pardot and then Pardot redirects to a form specific thank you page. If I have two forms on the same page, I’d like to pass a unique datalayer per form. Is that possible with this plugin? Normally, I would put the datalayer script into the confirmations editor, but since we are using the redirection option I can’t.
Thanks in advance, Jim
Hi Jim,
It should work for each of the forms individually. You should be able to target the Field ID’s. If you are a Gravity Wiz customer, drop us a line Support a we will help you troubleshoot.
Best,
Hi, I have implemented a very simple code in GF 2.4.20.4 in your plugin : http://snippi.com/s/uezqntp but it doesn´t work. However, if I include the same code in an HTML field on the form, wrapped in tags, it works.
It happens the same when using filter: “gform_calculation_format_result ” Thanks for your help.
Hi Juan,
I just tested your code on both GF 2.4.* and GF 2.5.* and it worked when I added it to the form using the Gravity Forms Custom JavaScript plugin. If you have a Gravity Perks License, you can get in touch via our support form and we’ll be happy to dig into this further.
Best,
Hey guys, I have implemented this code in GF 2.5 RC1 in your plugin field: https://snippi.com/s/kp6utsp
The source code generated looks like this: https://snippi.com/s/51i79nz
Unfortunately, the code is run between 1-3 times, reproducably. AJAX is enabled in the form.
When implemented like this it is running correctly, only once: https://snippi.com/s/m613x5z
Hi Harry,
Can you try this updated version of the snippet and see if it works for you? This snippet ensures that the code runs only once.
Best,
Hey Samuel,
thanks, that worked! I couldn’t find any documentation on it so I guess that is due to 2.5 still being a release candidate.
Best Harry
Hi – Do you have a few examples to get us started? For instance, I would like to have the ability to choose several options from a drop down list, look up corresponding values, and then on the form submission page have the digested report sent.
Is it possible?
Hi Rose,
Unfortunately, we do not offer custom coding support. You will have to get a developer to assist you. In case you don’t have a developer you can hire one from Codeable
Best,
First, really great little utilitarian plug in. VERY helpful. Not a big issue, but the article shows the Custom Javascript field under the form settings with line numbers and code hinting. I’m not seeing that in my field. Is there something I’m missing. Thanks again for this helpful plugin.
If you have Gravity Forms’ No Conflict mode enabled, go ahead and update to v1.5 of the snippet (now available above). Let me know if you have any other issues. 🙂
Does this still work? Not seeing a custom js field?
Hi Matt,
Custom JS is not used as a field, but it’s displayed at the bottom part of the Forms Settings Page: https://imgur.com/a/GDVAP8X
Best,
I try to export and import the forms and dont load the javascript code…
Hi Nicolas, I’m unable to reproduce this. Imported forms are importing the JS that is saved in the JSON export and triggering when I preview the form. If you’re a Gravity Perks customer, we’ll be happy to dig in via the support form.
There’s a very strange issue with this. I have a piece of simple js code added to the form with jquery selectors that target an input of a form with ID 80:
jQuery(“#gform_fields_80”).on(“change”,”#input_80_2″, ( function(e) {}
After numerous faield tries, I realized that for some reason, the zero is removed from the code on the front end. So the actual js added to the form is:
jQuery(“#gform_fields_8”).on(“change”,”#input_8_2″, ( function(e) {}
I installed the latest version of this plugin and same thing happens. Any ideas?
Hi Andrei, fixed in v1.4; updated above. Thanks for pointing this out. 🙂