Docs

[ryanschaefer41]

I’m trying to add a responsive lightbox in the footer that pops up a sign-up form. I’m adding it in a widget.

Here’s the code for the lightbox:

[formlightbox_call title=”MyTitle” class=”4″]<div style=”float:left; margin: 1px;”>Get Deals</div>[/formlightbox_call]
[formlightbox_obj id=”4″ style=”padding: 10px;max-width: 100%;height: auto !important;width: auto !important;”]

The signup form is contained in that afterwards. Currently, it’s just pasting the form and the code above directly in the footer and the lightbox isn’t working at all.

Hope this makes sense and thanks in advance for the help!

[Rupok]

Hi there,

Are you using any third party plugin for that form? If the shortcode is right, it should work fine within the Text Element in widget area. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[ryanschaefer41]

Thanks for the quick response. Is there a responsive lightbox that is native to X that I can use?

[Rad]

Hi there,

There is, but in a form of shortcode. You can check it here http://demo.theme.co/integrity-1/shortcodes/responsive-lightbox/

Thanks!

[ryanschaefer41]

Thank you. I’m unclear how to add a single form instead of a group of images, though. Is this something you can walk me through? Thanks!

[Rad]

Hi there,

Sure, but I’ll create a sample as it may be more confusing with instruction. Would you mind providing your admin login credentials in private reply? But it will be simple as this

<div style="hidden_form" style="display: none;">

<div id="this_is_my_form">And my form goes here</div>

</div>

<a href="#this_is_my_form" class="form_trigger">Click me to open the form</a>

[lightbox selector=".form_trigger"]

I notice that your form is already related to existing lightbox, should you use different form and what form?

Thanks!

[ryanschaefer41]

This reply has been marked as private.

[Rad]

Hi there,

Is is the original code in the footer, this serve as a backup

[visibility type="visible-desktop"]<div style="float:left; margin: 1px;"><a href="/about-us/">About Us</a><img src="http://mycoveraid.com/wp-content/uploads/2015/06/spacer.png" width="30px"></div>
<div style="float:left; margin: 1px;"><a href="/contact-us/">Contact Us</a><img src="http://mycoveraid.com/wp-content/uploads/2015/06/spacer.png" width="30px">
</div>
<div style="float:left; margin: 1px;"><a href="/press/">Press</a><img src="http://mycoveraid.com/wp-content/uploads/2015/06/spacer.png" width="30px">
</div>
[formlightbox_call title="CoverAid" class="4"]<div style="float:left; margin: 1px;">Get Deals<img src="http://mycoveraid.com/wp-content/uploads/2015/06/spacer.png" width="30px"></div>[/formlightbox_call] 
[formlightbox_obj id="4" style="padding: 10px;max-width: 100%;height: auto !important;width: auto !important;"]
<form action="http://kglobal.createsend.com/t/r/s/drutfj/" method="post" id="subForm" align="center">
<span style="color: #809196; font-size: 26px; font-family:Source Sans Pro; line-height:90%; text-align:center;">WE'VE GOT YOU COVERED</span></br></br>
<span style="color: #809196; font-size: 22px; font-family:Source Sans Pro; line-height:90%; text-align:center;">Sign up to get CoverAid deals sent to your inbox.</span></br></br>
<div><label for="fieldName"> Name</label><input id="fieldName" name="c m-name" style="width: 300px; color:#809196" type=“text" size="20" maxlength="80"></div>
<div><label for="fieldEmail">Email Address</label><input id="fieldEmail" style="width: 300px;" type="email" name="cm-drutfj-drutfj" size="20" maxlength="80"></div><br/>
<div style="align:center;"><input type="submit" value="SIGN ME UP"></div></form>[/formlightbox_obj]
<div><span style="float:left; margin: 1;">
[button shape="pill" size="small" float="none" href="/shop/" info="none" info_place="top" info_trigger="hover" style="font-family:Quicksand;"]SHOP NOW[/button]</span></div>[responsive_text selector=".header-resp" compression="1.0" min_size="8" max_size="16"]</br>
<span style="text-align:left; width: 85%; float:left;">© 2015 CoverAid /
Web Design <a href="http://www.kglobal.com/" target="_new">kglobal</a></span>[/visibility]

[visibility type="hidden-desktop"]<a style="float:right;" href="http://twitter.com/mycoveraid"><img src="http://mycoveraid.com/wp-content/uploads/2015/07/twitter-trans.png" height="35" width="35"></a><span style="float:right;"><img src="http://mycoveraid.com/wp-content/uploads/2015/06/spacer.png" width="10px" style="float:right;"></span><a style="float:right;" href="http://www.facebook.com/coveraid"> <img src="http://mycoveraid.com/wp-content/uploads/2015/07/facebook-trans.png" height="35" width="35"></a><a style="float:left;" href="/about-us/">About Us</a><br/>
<a style="float:left;" href="/contact-us/">Contact Us</a><br/>
<a style="float:left;" href="/press/">Press</a><br/>
[formlightbox_call class="555" title="CoverAid"]<span style="float:left;">Get Deals</span>[/formlightbox_call]
[formlightbox_obj id="555" style="padding: 0px 25px;max-width: 100%;height: auto !important;width: auto; !important;"]
<form action="http://kglobal.createsend.com/t/r/s/drutfj/" method="post" id="subForm" align="center">
<span style="color: #809196; font-size: 22px; font-family:Source Sans Pro; line-height:90%; text-align:center;">WE'VE GOT<br/>YOU COVERED</span></br></br>
<span style="color: #809196; font-size: 16px; font-family:Source Sans Pro; line-height:90%; text-align:center;">Sign up to get<br/>CoverAid deals sent to<br/> your inbox.</span></br></br>
<div><label for="fieldName">Name</label><input id="fieldName" style="width: auto; color:#809196" type="text" name="cm-name"></div>
<div><label for="fieldEmail">Email</label><input id="fieldEmail" style="width: auto;" type="email" name="cm-drutfj-drutfj"></div><br/>
<div style="align:center;"><input type="submit" value="SIGN ME UP"></div></form>[/formlightbox_obj]<br/><span style="float:left;">[button shape="pill" size="mini" float="left" href="/shop/" info_trigger="hover" style="font-family:Quicksand;"]SHOP NOW[/button]</span><br/>
[responsive_text selector=".header-resp" compression="1.0" min_size="6" max_size="16"]
</br><span style="float:left;">© 2015 CoverAid /
Web Design <a href="http://www.kglobal.com/" target="_new">kglobal</a></span>[/visibility]

This is the new code,

<div style="display:none" id="hidden_form">
<form action="http://kglobal.createsend.com/t/r/s/drutfj/" method="post" id="subForm" align="center">
<span style="color: #809196; font-size: 26px; font-family:Source Sans Pro; line-height:90%; text-align:center;">WE'VE GOT YOU COVERED</span><br><br>
<span style="color: #809196; font-size: 22px; font-family:Source Sans Pro; line-height:90%; text-align:center;">Sign up to get CoverAid deals sent to your inbox.</span><br><br>
<div><label for="fieldName"> Name</label><input id="fieldName" name="c m-name" style="width: 300px; color:#809196" type=“text" size="20" maxlength="80"></div>
<div><label for="fieldEmail">Email Address</label><input id="fieldEmail" style="width: 300px;" type="email" name="cm-drutfj-drutfj" size="20" maxlength="80"></div><br>
<div style="align:center;"><input type="submit" value="SIGN ME UP"></div></form>
</div>

<div><span style="float:left; margin: 1;">
<a class="footer_form_trigger x-btn footer_form_trigger x-btn-pill x-btn-small" href="#hidden_form" data-type="inline" style="font-family:Quicksand;">GET DEALS</a></span></div>
[lightbox selector=".footer_form_trigger"]
<div><span style="float:left; margin: 1;">
[button shape="pill" size="small" float="none" href="/shop/" info="none" info_place="top" info_trigger="hover" style="font-family:Quicksand;"]SHOP NOW[/button]</span></div>[responsive_text selector=".header-resp" compression="1.0" min_size="8" max_size="16"]<br>
<span style="text-align:left; width: 85%; float:left;">© 2015 CoverAid /
Web Design <a href="http://www.kglobal.com/" target="_new">kglobal</a></span>

There was a problem with lightbox, but could be due to cache which is now gone. Please disable other lightbox plugin too.

Thanks!

[ryanschaefer41]

This reply has been marked as private.

[Rue Nel]

Hello There,

This is not an error. It is the usual display when a shortcode is added to the content and then the plugin used for that shortcode is deactivate. This happens because Form Lightbox plugin is deactivated. If this lightbox has caused some conflict, I would suggest that you modify your shortcode and use the builtin lightbox we have in X.

To make the form as responsive, please remove the width of the input fields. At the moment, the fields were at fixed width which is 300 pixels. To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width:1200px){
  body .ilightbox-holder.light,
  body .ilightbox-holder div.ilightbox-container {
    width: auto !important;
    max-width: 90%;
  }

  #hidden_form #subForm input{
    max-width: 90%;
    width: 80% !important;
  }
}

We would loved to know if this has work for you. Thank you.

[ryanschaefer41]

This reply has been marked as private.

[Lely]

Hi There,

1.) You have added the lightbox selector twice on the button class field. Check the following part of the code:

<a class="footer_form_trigger x-btn footer_form_trigger x-btn-pill x-btn-large" href="#hidden_form" data-type="inline" style="font-family:Quicksand;">ASK HERE</a></span></div>
[lightbox selector=".footer_form_trigger"]

Look for this footer_form_trigger x-btn footer_form_trigger. That’s two instance of footer_form_trigger.

Update that part of the code to this:

<a class="footer_form_trigger x-btn x-btn-pill x-btn-large" href="#hidden_form" data-type="inline" style="font-family:Quicksand;">ASK HERE</a></span></div>
[lightbox selector=".footer_form_trigger"]

2.) From your form code, I can see that this form was submitted and post to this link:http://kglobal.createsend.com/t/r/s/drutfj/. You should setup that link to process the mail and send to your preferred email address.

3.) That is because you have use text field and then just add padding to look like textarea. That is wrong. Look for this part:
<input id="fieldName" name="c m-name" style="width: 300px; height: 200px; color:#809196" type="text" size="40" maxlength="500">
It should be like this:
<textarea id="fieldName" name="c m-name" style="width: 300px;height: 200px; color:#809196;" type="text" size="40" maxlength="500"></textarea>

Hope this helps.

[ryanschaefer41]

Thanks! A couple things I’m still unsure on.

1) I updated the code to remove the second instance of “footer_form_trigger” and there are still multiple boxes. Tried changing a couple things up and it still didn’t work. Is there anything else that could be causing it?

2) That code is used in the footer button “Get Deals.” It’s a sign up form (or it should be at least – that was set up by you guys in comment #1329425). So, does that mean I need a different link for the questions? And if so, how would I set that up?

3) Worked perfectly!

Thanks in advance, and thanks again for all of your help. This is really, really useful.

[Rad]

Hi there

1. I don’t see multiple boxes. Please check the attached screenshot.

2. I didn’t set it up, it was there already. I also provided the original code on that comment. I only implemented the lightbox, the form is the same how it was. The processing of the form depends on the form and not in the lightbox, which is why I was asking if you’re going to replace the form. Form data is posted outside your site (a different URL http://kglobal.createsend.com/t/r/s/drutfj/), hence, processing is something I can’t help with, please contact the provider of the form.

Thanks!

[ryanschaefer41]

Hi

1. I attached two screenshots of what I’m seeing. The second one is what happens when I drag the box to the left.

2. I set up a new form using the “Contact Form 7” add-on. It’s showing me a shortcode of [ninja_form id=1]. How do I get this to adhere to the format we’ve made?

3. I also noticed that the Contact form from the footer shows up when I click “Get Deals” in the footer, but only on the Contact page. Do you know why this is?

Thanks again!

[Author]

Posts