Having trouble embedding lightbox form code into IM Creator

  • Profile Image
    chakas
    Asked on October 01, 2017 at 07: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.

  • Profile Image
    Sabbir
    Answered on October 01, 2017 at 09:16 AM

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


  • Profile Image
    chakas
    Answered on October 01, 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
    ________________________________
    ...
  • Profile Image
    Sabbir
    Answered on October 01, 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.


  • Profile Image
    chakas
    Answered on October 01, 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
    ________________________________
    ...
  • Profile Image
    John_Benson
    Answered on October 02, 2017 at 03: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.

  • Profile Image
    chakas
    Answered on October 02, 2017 at 04: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
    ________________________________
    ...
  • Profile Image
    chakas
    Answered on October 02, 2017 at 06: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):



    ________________________________
    ...
  • Profile Image
    Sabbir
    Answered on October 02, 2017 at 06: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.



  • Profile Image
    chakas
    Answered on October 02, 2017 at 07: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
    _____________________________
    ...
  • Profile Image
    Sabbir
    Answered on October 02, 2017 at 08: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
     
     

     <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><!-- end button-wrap-inner -->
       

    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.


  • Profile Image
    chakas
    Answered on October 02, 2017 at 09:43 AM

    Worked Great,
    thanks for spoon feeding me!
    ________________________________
    ...
  • Profile Image
    Sabbir
    Answered on October 02, 2017 at 09:57 AM

    Glad to know it worked for you finally.

    Thanks for using Jorform.

  • Profile Image
    chakas
    Answered on October 02, 2017 at 08: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

    ________________________________
    ...
  • Profile Image
    John_Benson
    Answered on October 02, 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.