Having trouble embedding lightbox form code into IM Creator

chakas

Asked on October 1, 2017 at 7:21 AM

I created a jotform which I want to show up in a lightbox on my imcreator page. I have the generated code and can paste it into ImCreators raw HTML editor so that the opt-in link text shows. But when I click the linked text (in preview mode), nothing happens.
Sabbir

Replied on October 1, 2017 at 9:16 AM

Can you give us the link where your lightbox form is not working?
chakas

Replied on October 1, 2017 at 10:43 AM

Hi
I realised I can only view the lightbox once the imcreator page is published.
So it works now. Is there an easy way to resize the box and scale of the contents? Is it HTML code scaling?
Get Outlook for iOS
________________________________
...
Sabbir

Replied on October 1, 2017 at 10:56 AM

Hello,

Glad that it worked for you.

You can resize the box by changing the dimension from your lightbox code provided by Jotform.

It should scale the content based on the size. Let us know if it works for you.
chakas

Replied on October 1, 2017 at 10:43 PM

Can you provide code that can make the opt in text sit in a coloured button to stand out more?
Get Outlook for iOS
________________________________
...
John_Benson

Replied on October 2, 2017 at 3:21 AM

Are you referring to this form? Here's the link: http://www.jotform.co/form/72731254505856

Do you want to change the color of the Button? See image below:

If yes, you can change it by adding this custom CSS code to your form:

.form-submit-button {

background: #ff9900 !important;

}

To add a custom CSS code to your form, please follow this guide:

How-to-Inject-Custom-CSS-Codes

Here's the result on my cloned form:

If you're referring to a different button, please let us know and provide more details so we can assist you properly.

Thank you.
chakas

Replied on October 2, 2017 at 4:43 AM

Yes that's the form but I don't mean that button. That form is designed to pop up in a light box upon click the displayed "opt-in" text (see the code: I changed the optin text to "get early access". It's this text that I would like to stand out more. I.e by making a button around it or making it larger
Get Outlook for iOS
________________________________
...
Sabbir

Replied on October 2, 2017 at 4:55 AM

Please try this code to create a button instead of the Opt in text:

<div id="button-wrap-inner"><a class="btn" href="#">Get Early Access</a></div>

Use this CSS to style the button:

.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}

.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}

You just have to link the button just like the way you did with the text link for the lightbox to come up.

Let us know if you have any further query.
chakas

Replied on October 2, 2017 at 6:43 AM

Thanks for that. Sorry but im a novice with html so I'm not quite sure where to add the CSS part.
Can you edit my code below accordingly (ive highlighted where i put your first line of code)?
Sabbir

Replied on October 2, 2017 at 6:54 AM

This CSS code needs to be embed in your website's page where you have put the button(which brings the lightbox once clicked)code.

You can add this CSS in between the <head> </head> tag on top of your page.

Before the closing </head> tag, put the css code:

<style type="text/css">

.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}

.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}

</style>

I am assuming you were trying to add a screenshot here with your post. But it didn't appear.

Please follow this link to know how to add screenshots in our support forum:

https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

If you are still facing problem, let us know and you can add screenshot now.
chakas

Replied on October 2, 2017 at 7:43 AM

No, actually you (jotform) provide a ready to go lightbox code option on your sight. All I had to do was select the lightbox embed option on jotform, copy the code and paste it into a raw HTML editor on my website page. My website page cannot be directly edited. It is done through imcreator's HTML editor(an object oriented element that you place on the template page).
So my only option is to add this additional style code somewhere within the jotform lightbox code that was already provided to me. I was hoping you could just slot it in the appropriate place.
Get Outlook for iOS
_____________________________
...
Sabbir

Replied on October 2, 2017 at 8:03 AM

In your editor, put the following code for the button and the lightbox code. Use your lightbox code here with your form ID.

//This is the lightbox code for Form ID:72642877444971

<script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript">

var JFL_72642877444971 = new JotformFeedback({ formId: '72642877444971', base: 'https://form.jotformpro.com/', windowTitle: 'Product Order Form', background: '#FFA500', fontColor: '#FFFFFF', type: '0', height: 500, width: 700, openOnLoad: 0 }); </script>

<style type="text/css">
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}

.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
        </style>

        <div id="button-wrap-inner">
          <a class="btn lightbox-72642877444971">Get Early Access</a>
        </div>


Please change the above green form ID with your form ID. You need to put the lightbox code along with the css and button code in your HTML editor.
chakas

Replied on October 2, 2017 at 9:43 AM

Worked Great,
thanks for spoon feeding me!
________________________________
...
Sabbir

Replied on October 2, 2017 at 9:57 AM

Glad to know it worked for you finally.

Thanks for using Jorform.
chakas

Replied on October 2, 2017 at 8:43 PM

So sorry to bug you again but
Would you know the code to make the button link scroll to a point within the page instead
Last question I promise
Get Outlook for iOS

________________________________
...
John_Benson

Replied on October 2, 2017 at 10:13 PM

To better assist you, I have moved your new question to a new thread.

We will be addressing your issue shortly on this URL: https://www.jotform.com/answers/1263349

Thank you for your understanding.