Hi fourwhitesocks, I suppose you are using the Inline Content mode for displaying these two forms? And before submitting the first form, the two links display the different forms correctly? What happens if you fill out the second form first? Does the first form then show the success message from the second form too?
I think the ‘problem’ is not coming from FancyBox but from these forms. After submission (via AJAX) the form shows a success message but the form script does not differentiate between the two forms so the same message appears on both.
To test this theory, simply remove the hidden divs around the two forms and submit one without opening it in the lightbox. The success message should then show up on both forms too.
Ok thank you…I think I might have solved it but to answer your questions:
(not sure about the inline Content mode..so can’t answer that)
Yes, before submitting the first form the two links work perfect.
Before I solved it (I think) I didn’t try the second form first..
I ended up finding some other guidance and it said to make sure the links need to reference two different ID’s and for styling purposes use two different classes..also of course different contact form #’s and titles; so I think that is actually what you are talking about with the script not differentiating between the two forms. ** Also my problem wasn’t that it was the same message my problem was that if you had to send a second form from the same page when you clicked on the link to do the second form it would popup with the success message already there…BEFORE sending. I know kinda confusing.
Here’s what I’ve done so far and after submitting the first form so far the second form didn’t pop up already saying THANKS YOUR MESSAGE HAS BEEN SENT.
Here’s my test code and these are on the same page:
POPUP FORM 1
Contact President
<div class=”fancybox-hidden1″ style=”display: none;”>
<div id=”contact_form_pop1″>[contact-form-7 id=”89″ title=”Contact form 1″]</div>
POPUP FORM 2
Contact Sales
<div class=”fancybox-hidden2″ style=”display: none;”>
<div id=”contact_form_pop2″>[contact-form-7 id=”151″ title=”sales”]</div>
</div>
P.S. I actually have to add more forms to the same page so I will try and keep this updated 😉
A link to your site will help more than a 1000 words 😉
...
<div class="fancybox-hidden1" style="display: none;">
<div id="contact_form_pop1">[contact-form-7 id="89" title="Contact form 1"]</div>
...
<div class="fancybox-hidden2" style="display: none;">
<div id="contact_form_pop2">[contact-form-7 id="151" title="sales"]</div>
</div>
The class class="fancybox-hidden" should remain the same for all instances but it’s not obligatory. That class actually does the same as style="display: none;" (hide the inline content) and is only there for some cases where the WordPress HTML editor strips inline styles. So if you want and the part style="display: none;" does not get removed when you switch to the editor View tab, then you can simply leave that class out.
The ID however must indeed be different for each instance. And the corresponding link/button must match the unique ID. So it looks like (Not sure, your link code has been converted to real links. Use the CODE button when pasting code on these forums) you did that correctly. If you keep changing the ID by incrementing the number at the end then you can create more instances without any problem.
Still, the fact that the form success message from one form also showed on the other form seems unrelated to FancyBox.
Ok THANK YOU!! I think I do understand! It seems like i’ve done the correct things and it does seems to be working correctly for me now!
I was able to finally successfully make 6 different forms on one page using the Easy Fancy Box Plugin and Contact Form 7 with it working perfectly, success message and all. Below is an example of the code and how I made it work…
This code works perfect for me, you can just change and add your own Contact Form 7 Shortcodes; and I wrapped the whole thing in a div each time for styling. Hope this helps someone!!
<div class="contact">
<a href="#contact_form_pop1" rel="nofollow">Contact Whoever</a>
<div class="fancybox-hidden1" style="display: none;">
<div id="contact_form_pop1">[contact-form-7 id="89" title="President"]</div>
</div>
<div class="contact">
<a href="#contact_form_pop2" rel="nofollow">Contact Whoever someone else</a>
<div class="fancybox-hidden2" style="display: none;">
<div id="contact_form_pop2">[contact-form-7 id="151" title="sales"]</div>
</div>
