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

  • Profile Image
    bluepearconsulting
    Asked 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

  • Profile Image
    ralphbrabante
    Answered 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
    alliphil
    Answered 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
    Sammy
    Answered 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
    alliphil
    Answered 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
    beril
    Answered 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
    anandrajog
    Answered 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
    Mike
    Answered 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.