I have a form with 5 steps (wizard if you will), I need users to be able to step thru the form without the page refreshing. I know ajax is the answer but before I start from scratch, I'd like to know if anyone has successfully done this before...any pointers, suggestions are welcome.
Thanks!!
Gravity Forms includes AJAX page changing by adding ajax=true to your Gravity Forms shortcode, it should work as you expect.
Glad you are happy. Let me know if any issues come up.
Check out the documentation on this page:
http://www.gravityhelp.com/documentation/page/Embedding_A_Form
ok, thats helpful but i still have some problems.
first of all my form is already on the page in a widget area, not the post area itself - does this matter? perhaps its better to add the ajax in the PHP code instead. can you take a look at the page below. i activated Ajax per the instructions using the shortcode and it still seems like the page refreshes especially in chrome.
http://globalgoldandsilver.com/diamond-buyers
if i should do it in PHP, can you provide the line of code that i should add?
thanks for the great support!
You should be able to do a multi-page form in a Widget using AJAX. Go to the widget, and click Advanced Options and Check Enable AJAX.
sorry, its not like that. its not a widget.
its a custom template. the forms are built into that. i cant edit the forms from a post/page or the widget area.
i have so far added the short code as you originally described but it does not work properly. can you please take a look and make any recommendations you see fit.
http://globalgoldandsilver.com/diamond-buyers
i only need to enable the AJAX on select pages that have a multiform.
Can you show me what code you used to embed the form so I can check to make sure there are no errors? Any other details you could give me would help a great deal. Also, testing in the Twenty-Eleven theme to make sure it isn't theme related would be very helpful.
this is the code for the sidebar of the page we have discussing. specifically its "<div id="tabs-2"> , 22 lines down.
[php]
<div id="sidebar_inner_page">
<div id="sidebar_inner_page_inner">
<div id="tabs">
<ul>
<li><a href="#tabs-3" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/dimond-quote-button.png" alt="" border="0"/></a></li>
<li><a href="#tabs-2" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/tab02.png" alt="" border="0"/></a></li>
<li><a href="#tabs-1" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/tab01.png" alt="" border="0"/></a></li>
<!--
<li><a href="#tabs-4" rel="nofollow"><img src="<?php //bloginfo('template_url'); ?>/images/tab04.png" alt="" border="0"/></a></li>
-->
</ul>
<ul id="livechat" style="margin-top:10px; list-style:none;">
<li><a href="$zopim.livechat.window.show()" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/tab04.png" alt="" border="0"/></a></li>
<div id="tabs-2">
<!--Diamond Quote Request-->
<?php gravity_form(5, true , true ); ?>
</div>
<div id="tabs-1">
<div class="tablinks">
<ul>
<li><h3 class="center"><span style="color: #f1df0d;">BROOKLYN, NY</span></h3></li>
<li><h4>718-833-5900</h4></li>
<li class="links"><a href="index.php?page_id=13" rel="nofollow">Schedule Appointment</a>
</ul>
<ul>
<li><h3 class="center"><span style="color: #f1df0d;">MANHATTAN, NY</span></h3></li>
<li><h4>212-575-2975</h4></li>
<li class="links"><a href="index.php?page_id=13" rel="nofollow">Schedule Appointment</a>
</ul>
<ul>
<li><h3 class="center"><span style="color: #f1df0d;">UNION COUNTY, NJ</span></h3></li>
<li><h4>908-264-8126</h4></li>
<li class="links"><a href="index.php?page_id=13" rel="nofollow">Schedule Appointment</a>
</ul>
</div><!--tab links div ends here-->
</div>
<div id="tabs-3">
<!--Request A Free Quote-->
<?php gravity_form(1, true , true ); ?>
</div>
<!--<div id="tabs-4">
<center><p><h3><span style="color: #f1df0d;">CLICK BELOW</span></h3>
<a href="$zopim.livechat.window.show()" rel="nofollow"><img src="http://whitemediadev.com/globalgoldandsilver/wp-content/uploads/2012/06/1340230174_chat.png"></a><h3><span style="color: #f1df0d;">TO CHAT WITH US TODAY!</span></h3></p></center>
</div>-->
</div> <!--tabs div ends here-->
</div><!--sidebar_inner_page_inner ends here-->
</div><!--sidebar_inner_page ends here -->You're using this:
<?php gravity_form(5, true , true ); ?>Take a look at the documentation here:
http://www.gravityhelp.com/documentation/page/Embedding_A_Form#Function_Call
There are a lot more parameters available for that function call. You need to include the parameters to make AJAX true. Try this:
<?php gravity_form(5, true, true, false, '', true); ?>ok, i tried it. the page still seems to refresh a bit. i will forward this info to the developer. please let me know if you have any other suggestions. i do see in the source code that AJAX is now there.
just to confirm, AJAX should allow a smooth transition from one part of the form to the next without any refresh, right?
That does not seem correct to me. It does not appear smooth.
Can you create a temporary page on the site and embed this form there? Be sure to enable AJAX in the shortcode when you insert the form shortcode. See how that looks. If it's not jerky there, then it's a problem with the template or how the form is embedded into the template. If it's still jerky, then we have to determine if there is a plugin or theme conflict on your site.
done,
looks the same to me,
It works differently when embedded in the page with the shortcode. Would you agree? The refresh is not a complete page refresh, is jumps a bit to the top of the form, but does not reload the page completely. Watch the browser address bar when checking the difference between the two pages.
I didn't look closely but I would make sure that the required scripts are being loaded. When you embed a form in a template like that, rather than the shortcode method, you need to enqueue your own scripts. Please see this and make sure the scripts are being loaded.
http://www.gravityhelp.com/documentation/page/Gravity_form_enqueue_scripts
Beyond that, check for plugin conflicts. http://rkt.gs/testing
I did notice you are loading jQuery many multiple times. That's not good.
That may or may not be related, but the older versions are unnecessary. You have a ton of scripts loaded on that page and I think one of them is creating a conflict and causing this problem.
Got It!
actually it was not the "enqueue".
in the back and forth i had accidentally used the wrong from ID and that was the problem!
now everything works fine with or without the "enqueue", should i leave it in?
another question; is it possible to make the cursor insert automatically into the top most input field?
BTW - THANK YOU for your amazing support. i would like to leave gravity forms a review, where would you like one?
For the enqueue, if you leave it in, and the script is already loaded in some other manner, it won't be added again. That's the beauty of the enqueue function. If it works, leave it alone. I would personally leave it IN, in case you remove a plugin or some other function which was providing jQuery. That way, your enqueue function will start loading the script and you'll never notice a difference.
Steve, please begin a new topic for this question as it is unrelated:
another question; is it possible to make the cursor insert automatically into the top most input field?
However, the solution to that is to add a bit of JavaScript that sets the cursor focus when the page is loaded. Google knows.
Testimonials, which are always appreciated, can be left here. And we always appreciate a shout out on Twitter @rocketgenius.com.
Glad you got that resolved, and thank you.