Is it possible to put the confirmation of a form submission into a pop up box?
That site that I've been working with CSS tabs has been presenting some unique issues for me. You guys have been great about coming up with solutions. Looking to see if you have another ace up your sleeves.
Scott, I had a similar question about a month ago, basically, I repositioned the inline confirmation text via CSS and used some jQuery to bling it out a bit. You could probably expand on the idea and position the confirmation above the tabs, etc. to your preference.
http://forum.gravityhelp.com/topic/confirmation-questions
There's a short demo video link on there to see it in action.
Thanks Kevin, the video looked great, and I agree, I think this application will work great for my needs as well. The linky to the template code is returning nothing there. Do you still have that available?
Hey Scott, thanks for the head's up. It looks like the tinypaste link went away. Here's the new page template link.
Thanks Kevin. I checked out that file and it didn't have any extra secret Mojo in it like I thought it might. Which means I'm missing something else.
I figure I'm about 80% there, but not sure what 20% I am missing. I have added the style elements to my style.css file and I added the script code to my header file of my theme. (which looks like I can modify, as my theme looks like it calls the .js library already)
Do i need to tell GF to use that CSS styling somewhere?
http://www.seelouisvillehomes.com/1092-white-clover-way-la-grange-ky-40031-mls-1236832
Scott,
I did a quick test on the inquire form and didn't see the confirmation at first after sending, but when I clicked back on the inquire tab, I saw the confirmation briefly in the top left corner of the page, then it dismissed itself.
This is probably because the content in the tab is hidden with the CSS and the confirmation div is inheriting from that. I'm not sure offhand how to overcome that. You may have to play with the CSS a bit and see if anything works. I'll tinker around here and see what I can come up with.
As a quick alternate idea, you could always use the "redirect to page" option - redirect it back to the same page passing a variable in the querystring. Use a little php to check for the querystring and if it exists open a javascript popup window or show a hidden div (preferable to avoid popup blockers).
It will still take a little bit of work, but because of the tabs, it might be the way you need to go.
Okay, not much luck with the standard/inline confirmation method so far, but this may be a suitable alternative for you.. still keeps the basic effect from the first example too.
You'll need to change the form confirmation setting to redirect to the same page your forms are on and then set up a querystring parameter and unique value for each form.. I used "confirm" as the parameter in my example but it's totally up to you what to use.
Now, I went created a new page template for the form to reside on, and included a simple php switch/case statement based on the query string. That way, you can show different messages based on which form was submitted if you'd like.
<?php
//show different confirmation messages based on the querystring value
$formconfirm = $_GET['confirm'];
switch ($formconfirm)
{
case form1:
echo "<div id=\"gforms_confirmation_message\">Thanks for submitting the first form. We'll be back in touch with you soon.</div>";
break;
case form2:
echo "<div id=\"gforms_confirmation_message\">Thanks for submitting the second form. We'll be back in touch with you soon.</div>";
break;
case form2:
echo "<div id=\"gforms_confirmation_message\">Thanks for submitting the third form. We'll be back in touch with you soon.</div>";
break;
}
?>you can download my sample page template if you'd like to see the whole thing put together.
Once that's done, you can submit the form, it should redirect back to the form page passing the variable and the php will return the correct confirmation message. The jQuery effect from the first example is still there and works like a charm.
It's a little nicer when you see it in action, so again, here's a quick video screencast
One last note, I would make sure to place the php statement in the markup OUTSIDE of the tabbed content, or else you'll be back to the other issue where it's hidden by the tab visibility.
Just for fun, I created one quick variation on the confirmation popup. I styled the second one differently, with a transparent png background that looks like a "talk bubble".. something for a little inspiration.
Hi Kevin,
Sorry for the question...... :(
I got your file template, i have copied it into:
gm-studio.co.uk/model-contest/wp-content/plugins/gravityforms/popup_confirm_redirect.php, than i have changed the confiramtion setting like here:
http://c0848462.cdn.cloudfiles.rackspacecloud.com/b22de20d8add895ed86fb5173ef15001.png
But sorry, ho can i associate the file popup_confirm_redirect.php to the sumit button?
Thanks
Giorgio
The template file should be saved in the root of your theme folder - along with the page.php file, etc - Not in the plugin folder. Once it's in the root of the them folder, you can go to the confirmation page you've created in the WordPress admin, and you should be able to select the new template from the page template selector in the "page attributes" box on the right.
screenshot: http://grab.by/8v1w
droidus
Member
I'm trying this using the simple method. I can get the pop-up to appear, and Im happy that I can customise the position and appearance of the pop-up in CSS, but when the pop-up appears, the form disappears.
http://66.147.244.226/~colligan/get-in-touch/
Try the callback form for ease of testing.
Any idea whats going on here?
When the form is posted, the confirmation message replaces the form. You would need to automatically refresh the page after the confirmation disappears for the form to re-appear.
droidus
Member
Hi Kevin, thanks for that. Is that what happens in your vid? http://www.screenr.com/b32
Sorry to be a PITA, but how would I get my submit to do exactly the same thing?
droidus
Member
I also have a bunch of fancybox classes which I've applied to the find us and disclaimer links - is there anyway to just apply one of these link classes to the submit button and open the confirmation page in a pop-up? Ala: "a href="/find-us/" class="iframeFancybox1" or is the method above the only way to do it?
Haven't ever tried that but you can use this filter to modify the button markup.. add a new class, etc.
http://www.gravityhelp.com/documentation/page/Gform_submit_button
droidus
Member
OK, thanks Kevin.
I've just abandoned it at this stage. None of the solutions above really work, I cant redirect to a specific page as the form appears on every page and Ive already spent way to long on it already. Next time maybe.
It would be a really nice feature on new releases if there was an option to have the form reload automatically and the confirmation message appear in a pop-up window.
Thanks for your help anyway. Id say the filter option might be the way to go for anyone else trying this, especially if you already have some jquery pop-ups running on your site.
