Docs

[Rubin]

Hey Caroline,

for me everything works just fine what’s exactly the problem?

[Caroline T]

If you do not fill out all the required fields and hit submit I just get a little loading icon beside the submit button. I never get notified of the fields that need to be filled out.

[Kory]

Hey Caroline,

I’m not entirely sure as there are no errors being thrown in the JavaScript console, but I’m guessing this might have to do with the fact that you have two forms on the same page with the same ID when you launch it in the lightbox like so. Regretfully, we cannot support this particular request as the error occurring is happening with a custom implementation as we do not support content in lightboxes at this time and this appears to be an error with the duplicate forms produced by the lightbox. Personally, from a usability or accessibility standpoint placing a form in a lightbox like so is not the best idea as it will hinder users with disabilities or with JavaScript blocked from going through your form properly. It is typically best to leave forms on the page itself, which is why you never really see complex forms like this in lightboxes or popups.

We thank you for your understanding.

[proximomktg]

Are you any closer to having a solution for this? I attempted it with the code you suggested and it placed the form on the page and a button that effectively opened in a lightbox, but I don’t need the form on the page as well. Also, it will not work in the topbar.

This is a much needed feature as there are CTAs many marketers would like to use on the page without displaying the entire form until someone clicks a button. Also, avoiding navigating away from the page is ideal.

Thanks.

[Friech]

Hi There,

As always, your feedback is greatly appreciated. Unfortunately the lightbox bundled with the theme can only display images or videos. Please try to utilize the content dock extension instead.

Hope it helps, Cheers!

[Lincoln S]

Hi Themeco,

I’m just wondering how you guys are coming along with this thread? I’ve had a look at a number of the solutions on this thread and multiple others and it appears this is the closest I’ve come… I’m really not that interested in either installing a secondary plugin (because X plugins are great), I would however be happy to code some CSS.

I’m just wondering, while others were able to get the following code working, I was unable to…:

<div id="my-content">
  [contact-form-7 id="123" title="Contact Us"]
</div>

<a href="#my-content" class="lightbox-selector x-btn" data-type="inline">Send us a message</a>

[lightbox selector=".lightbox-selector"]

I understand the structure of all of this, but my div content is still visible; the result is my contact form with my button below it, which opens up the lightbox perfectly.

My question, how do you hide the preceding div content (contact form) so that only the button appears and once clicked, only then opens up the lightbox with the form content? Also, what is the data-type=”inline” function for? Perhaps this is the part that I’m missing…?

[Rue Nel]

Hey There,

Thanks for updating this thread! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[Caleb C]

This reply has been marked as private.

[Caleb C]

I also created a MailChimp “Subscriber Popup Form” and I can’t get it to appear on the site. Thanks for any help you can provide!

[Lely]

Hello Caleb,

Thanks for the URL.
You can add it like this:

<div id="mailchimp-form" style="display:none">
 Mailchimp form code/shortcodegoes here
</div>

<a href="#mailchimp-form" class="lightbox-selector x-btn" data-type="inline">Sign Up[lightbox selector=".lightbox-selector"]</a>

Hope this helps.

[Caleb C]

Thanks so much for the reply, I appreciate your help!

Unfortunately I’m still having some issues. This is what I have right now and excuse me for these mistakes I am still learning as I go along, I just downloaded this theme a couple days ago:

<div id="mailchimp-form" style="display:none">
 <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us11.list-manage.com","uuid":"747c0d86c4efc1cebeb75d027","lid":"a9cfbc4846"}) })</script>
</div>

<a href="#mailchimp-form" class="lightbox-selector x-btn" data-type="inline">Sign Up[lightbox selector=".lightbox-selector"]</a>

Thanks and let me know what you think might work!

[Friech]

Hi There,

Sorry, but our responsive lightbox is only for images and videos. Forms or pages could be possible with custom development. But that would fall outside of support that we can offer.

Thank you for understand.

Cheers!

[Tristan A]

Hi guys,

The code you gave to Caleb would do EXACTLY what I want it to do. It was this code:

<div id="mailchimp-form" style="display:none">
 Mailchimp form code/shortcodegoes here
</div>

<a href="#mailchimp-form" class="lightbox-selector x-btn" data-type="inline">Sign Up[lightbox selector=".lightbox-selector"]</a>

In my header, I have a button that I would like to trigger such a lightbox with a mailchimp form, so that code is what I need. However, I have trouble getting my head round, as how to do this. The code for the button is:

<div class="BannerBtn"><span class="optin topbar-banner">Click here now </span><a href="/articles-2" class="optin topbar-btn"> BUTTON CAPTION HERE</a></div>

I think it should be fairly simple… any thoughts?

Thanks!

[Tristan A]

This reply has been marked as private.

[Lely]

Hello Tristan,

Please change this:
<div class="BannerBtn"><span class="optin topbar-banner">Click here now </span><a href="/articles-2" class="optin topbar-btn"> BUTTON CAPTION HERE</a></div>

To this:

<div class="BannerBtn"><span class="optin topbar-banner">Click here now </span><a href="#mailchimp-form" class="lightbox-selector x-btn optin topbar-btn" data-type="inline">Sign Up[lightbox selector=".lightbox-selector"]</a></div>

Please make sure you’ve added the following on one RAW content element:

<div id="mailchimp-form" style="display:none">
 Mailchimp form code/shortcodegoes here
</div>

Hope this helps.

[Author]

Posts