Thread Starter
Blake
(@alexanderblake)
[su_button url="{su_lightbox_content id="form-popup" margin="50" padding="50"]
Request a Complimentary Consultation
[contact-form-7 id="301" title="Essentials Package"][/su_lightbox_content}"] Request a Complimentary Consultation [/su_button]
That’s what I’ve got on the page.
I’m struggling with the same challenge –
Trying to use a button to open a form inside a fancybox.
It works great from a text link:
Click Here to send a message
(A Form Pops Up)
<div class=”fancybox-hidden” style=”display: none;”>
<div id=”contact_form_pop”>Thanks for your interest! Please Use this form to contact iSTOREi Network: [contact-form-7 id=”83″ title=”Footer Form”]</div>
</div>
(I have embedded this in a footer widget at http://instoreimplementation.net)
But so far I am failing in attempts to put the popup within a nicely formatted button:
<center>[su_button url=”http://instoreimplementation.net/#contact_form_pop” style=”flat” background=”#336699″ color=”#FFCC33″ size=”5″ center=”yes” radius=”0″]Contact iSTOREi Network[/su_button]</center>
Launching a pop-up from a button could be very useful on responsive sites viewed on small screens. Please help.
I realize my prior post did not show the code properly. Here’s a retry.
<a class="fancybox" href="#contact_form_pop" target="_blank" rel="nofollow">Click Here to send a message<br>(A Form Pops Up)</a>
<div class="fancybox-hidden" style="display: none;">
<div id="contact_form_pop">Thanks for your interest! Please Use this form to contact iSTOREi Network: [contact-form-7 id="83" title="Footer Form"]</div>
</div>
Thread Starter
Blake
(@alexanderblake)
Indeed. I love the lightbox feature of the SU plugin, and have had a gret experience embedding popup videos form text links, but I haven’t figured out how to have a shortcode button trigger a shortcode lightbox with the contact form shortcode as the content.
That’s just too many shortcodes for me.
I think the issue is nesting syntax, but I’m stumped so far.
Thread Starter
Blake
(@alexanderblake)
After scouring the net, I’ve learned how to embed shortcodes into page templates, but I still can’t seem to find where I can correct this nesting issue.
Hopefully someone know how to do this and can help!
So I feel like I got a little closer on this attempt, maybe. Trouble is, the button appears but it links back to the home page, not the popup form. Note that I am using Easy Fancybox, not the lightbox built into SU. Also ContactForm7. I stick with this because I the mashup works beautifully from a text link and I hope not to change it.
<center><a class="fancybox" href="#contact_form_pop" target="_blank" rel="nofollow">[su_button url="/#contact_form_pop" style="flat" background="#336699" color="#FFCC33" size="5" center="yes" radius="0"]Contact iSTOREi Network[/su_button]</a></center>
<div class="fancybox-hidden" style="display: none;">
<div id="contact_form_pop">Thanks for your interest! Please Use this form to contact iSTOREi Network: [contact-form-7 id="83" title="Footer Form"]</div>
</div>
Note that the button shortcode is inserted a between the a and /a, which is where the link text would normally go. Still hoping for further insights from the SU community.
