Gravity Forms is by far one of the most popular, user friendly, easy to use form plugins for WordPress. With its many hooks and filters it is easy for developers to make it do pretty much anything.
I was working on a small website development project for the CO2 Coalition. The design called for the notification in a popup instead of the normal page redirect or AJAX notification.
I work with the Genesis Framework by StudioPress. Below you will see the hook genesis_after_footer. If you aren’t using this framework, make sure you change that to wp_footer.
You will put your custom notification in the Form Settings of the particular form you are making this popup for. $confirmation on line 10 is reserved for that. Notice that after this variable there is custom content. You can put anything you want there. From lines 15 on, we write some simple jQuery to close the popup and get rid of the overlay that we insert on line 16. Make sure to style that with CSS like so:
You could easily add some animation to this for more elegance. Something like animate.css would be nice. And there you have it.
Bonus: Keep The Form From Disappearing
An optional step is to keep the Gravity Form from disappearing after submission. Shout out to William in the comments for sharing this.
Tagged with: css, gravity forms, jquery
What do you think?
Do you have something to say about this post? Give us your opinion, insight, changes, or alternative way of doing something. We'd love to hear from you!
Love the idea of this.
If I understand correctly, a popup would appear instead of the TINY line of text saying, “We’ll be in touch” or whatever appears near the form. Apparently the gravity form goes to the top, too, which makes that tiny line of text even less available!
However, I tried your code (didn’t put in CSS yet, since couldn’t get code to work).
It looks exactly the same. Cleared cache, etc. Still no change.
Since I don’t have Genesis, I tried using “wp_footer” and also “wp_head” in place of your “genesis_after_footer” reference.
Am using Total Cache and Cloudflare, in case that makes any difference?
Can you tell me what plugin might get in the way of this.
SUCH a clever thing, but am discouraged.
Thanks for any reply.
Thanks for sharing your work on this. Can you tell me where exactly you are placing your php? In the functions file, a new custom page template, or somewhere else?
Never mind, I got it working. You rule for sharing! Many people are asking for this on the Gravity Forms support forums as well. Thank you!
Sorry for the late reply Chris. Glad you got it working!
Could someone please answer this question? Where does the code go?
Hey Paul,
Just put it in your
functions.phpfile. If you are using a pre-built theme, you can download a plugin called My Custom Functions and place the code in there (Appearance > Custom Functions).Hey there,
I am trying to implement your code and cant seem to get it working. I have tried to place it in the footer since I could not find where to put in the “Form Settings” section. Do you have any thoughts on where to specifically place this code in the settings?
Hey TJ,
Just put it in your
functions.phpfile. If you are using a pre-built theme, you can download a plugin called My Custom Functions and place the code in there (Appearance > Custom Functions).Hey – this worked really great – thank you! I have a question:
When I submit the form and receive the popup, the form is also removed from the page. Is there anything I can do to keep the form from vanishing on the page? I have a client who insists that the form remain on the page after someone submits it.
Update – figured it out!
William,
Glad you figured it out and thank you so much for sharing your fix for keeping the form from disappearing! I updated the Gist with a credit to you. I appreciate it.
Hi,
I can’t get this code to work.
Is it still valid? I´m using
wp_footerhook.Thanks a lot
Hey there,
First, do you get any errors in the Dev Tools console? Second, try changing
gform_confirmationtogform_confirmation_YOURFORMID. Make sure to change the YOURFORMID to the actual ID of your form.Hello,
That’s exactly what I´m looking for. But I have no idea from this stuff, please can you help! I installed My Custom Functions plugin and put in the code from the first window. I change
genesis_after_footertowp_footer, is it correct? I use WordPress with Avada theme.Should this work now or do I have to change more things in the code or add the code from the second window? Sorry for that. Would be very happy to get some help for dummies 🙂
Hey Noi,
First, do you get any errors in the Dev Tools console? Second, try changing
gform_confirmationtogform_confirmation_YOURFORMID. Make sure to change the YOURFORMID to the actual ID of your form.Hello Kevin,
thank you very much for the fast answer.
Changing the gform_confirmation to gform_confirmation_YOURFORMID doesn´t change anything.
The popup is just not showing up. After sending the form, the notification shows up normally on the page. It´s in the same place and not in a popup. The only difference is, that besides the notification, there is the OK button. After clicking this, the notification disappears.
Where does the code from the second window go?
I found this on the internet:
______________________________________
add_filter( ‘gform_after_submission’, ‘sw_gf_thanks_message’, 10, 2 );
function sw_gf_thanks_message( $thx_message ) {
add_action( ‘wp_footer’, ‘sw_gf_thx_msg’ );
}
function sw_gf_thx_msg() { ?>
alert( “Thank you for contacting us.” );
<?php }
______________________________________
This code is working and a popup appears, but I don´t like it. I would like to have the text from the notification settings in the form, like in your code. Also the appearance could be fancier.
How can I change your code that the notification pops up like this?
Would be very happy about some advice. Thank you very much for helping.
For those having issues, consider disabling AJAX. I could get the popup to load but the OK button wouldn’t dismiss it, and the overlay background wasn’t appearing. Removing AJAX from the form did the trick and now all is well. Thanks for the code!
Hey all, just found some awesome news to show the popup AND on AJAX!!
https://docs.gravityforms.com/gform_confirmation_loaded/
You might need to add some tweaking, but this is a good step in the right direction. I am doing this on a site now, so I can report back my findings when the site is ready for production.
Here is another link via Gravity Forms to their documentation for confirmations.
https://docs.gravityforms.com/category/developers/hooks/filters/confirmations-filters/
Hi Kevin (and William),
Firstly thanks so much for this, it’s exactly what I’m looking for.
Secondly, I am having a slight problem with the form reload fix. With Kevin’s original code it is working perfectly, but obviously then displays you the page sans form.
With the form reload fix it takes you to the same page, but for me it says “Oops! We could not locate your form.” and then the pop-up message underneath it (not in a pop-up).
Any help would be much appreciated.
Many thanks,
Joe
Having the same issue … were you ever able to resolve this?
Joe,
Did you ever find a solution. I had this working on a site, but looks like some update broke the fix that Kevin provided. I’m looking for a new fix.
I’ve started seeing the “Oops” message myself. I’m trying to figure it out and will post a solution if I do.