What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    how i can create a lightbox form with a button instead of text to open?

    Asked by bluepearconsulting on November 25, 2013 at 02:45 AM

    how i can create a lightbox form with a button instead of text to open?



    This is a re-post of a comment on How to Create a Lightbox Form

    lightbox form create
  • Profile Image

    Answered by ralphbrabante on November 25, 2013 at 03:31 AM

    @bluepearconsulting

    Hi,

     

    Good Day Mate! I am here just to try helping you out from your problem. My understanding from your concern is you want to call the lightbox form in a different approach not only by simple text link but instead you want it to be a button. Well the article that you read is correct but as you can see it gives a simple text link to call the form light box so here is what you need to do.

    1. first follow the user guide that you shown earlier: How to Create a Lightbox Form

    and you will get this code (this code is not for your form its for my sample form so it's a little bit different)


    <script src="//cdn.jotfor.ms/static/feedback2.js?3.1.1082" type="text/javascript">
    new JotformFeedback({
    formId:'33277573542863',
    base:'http://jotform.co/',
    windowTitle:'Test From for Exam',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:false,
    height:500,
    width:700
    });
    </script>
    <a class="lightbox-33277573542863" style="cursor:pointer;color:blue;text-decoration:underline;">Test From for Exam</a>


    2. Eliminate the "Test Form for Exam" from the code and replace it using the input type form element so that you can have a button that can call your light box form.

    to understand more about input type element here is a link for you http://www.w3schools.com/tags/att_input_type.asp

     

    3. Replace the Test Form for Exam text in the code and use input type form instead just like this:


    <script src="//cdn.jotfor.ms/static/feedback2.js?3.1.1082" type="text/javascript">
    new JotformFeedback({
    formId:'33277573542863',
    base:'http://jotform.co/',
    windowTitle:'Test From for Exam',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:false,
    height:500,
    width:700
    });
    </script>


    <a class="lightbox-33277573542863" style="cursor:pointer;color:blue;text-decoration:underline;">

    <input id="form_button" type="button" value="Form">

    </a>

    You should have now a button action just like the button in this video: http://screencast.com/t/FvoKdjax

     

    Note: You can change the input type value which is "Form" by any text you like to appear in your button.

     

    4. Done You are good to go!

     

    I hope this help mate!...


  • Profile Image

    Answered by alliphil on October 27, 2015 at 10:19 PM

    Is it possible to change the color of the button from gray to something else?

  • Profile Image

    Answered by Sammy on October 28, 2015 at 03:31 AM

    You can create CSS styles withing the page you embedded then assign a class with the styling to the button as follows.

    <script src="//cdn.jotfor.ms/static/feedback2.js?3.1.1082" type="text/javascript">
    new JotformFeedback({
    formId:'33277573542863',
    base:'http://jotform.co/',
    windowTitle:'Test From for Exam',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:false,
    height:500,
    width:700
    });
    </script>

    <style>
    .btn{
    color:red;
    background-color:green;
    width:40%;
    height:50px;
    cursor:pointer;
    }
    </style>
    <a class="lightbox-33277573542863" style="cursor:pointer;color:blue;text-decoration:underline;">

    <input id="form_button" type="button" value="Form" class="btn">

    </a>

     

    Please let us know if this addresses your situation.

  • Profile Image

    Answered by alliphil on October 28, 2015 at 08:46 AM

    Hmm.... I'm not familiar with CSS so this may be above my head.  Do you just put the CSS code right along with the other html code on the page?

  • Profile Image
    JotForm Support

    Answered by beril on October 28, 2015 at 11:28 AM

    Hi,

    First of all, you need to copy your lightBox code to  text file.

    I will show you step by step how to do this:

    1)    Delete openOnLoad : false part from your code.

    2)    Paste the code below as you see ın screen shot:

     

    <style>
    .btn{
    color:red;
    background-color:green;
    width:40%;
    height:50px;
    cursor:pointer;
    }
    </style>

    3) Change the code below that marked with the pink area:

    <a class="lightbox-33277573542863" style="cursor:pointer;color:blue;text-decoration:underline;">

    <input id="form_button" type="button" value="Form" class="btn">

    </a>

     

    Let us know, if you have any question or issues. We will be glad to assist you.

  • Profile Image

    Answered by anandrajog on June 16, 2016 at 05:20 PM

    I want the user to click on a picture before the lightbox is opened. Can we do it?
  • Profile Image
    JotForm Support

    Answered by Mike on June 16, 2016 at 07:07 PM

    @Anandrajog,

    We have moved your question into a separate thread to be able to address it properly.

    https://www.jotform.com/answers/862779

    We will get back to you shortly.