How do you link a form (lightbox) to an existing phrase in a document?

  • Profile Image
    Twitterthons
    Asked on April 16, 2012 at 03:28 PM

    I would like to link to an exsisting phrase on the website instead of adding the piece of code given with the embed form section. 

    Example: Today is the best day of your life. Click here to sign up.

    I would like the "Click here to sign up" link to open up the associated lightbox form when the link is chosen.

    Also, where is the option to have the form open up. 

     

  • Profile Image
    fxr
    Answered on April 16, 2012 at 06:20 PM

    It would be easier to show you exactly how to do this if we have the URL of where your form is to be embedded by I will give an example. 

    Get the link box embed code by clicking on Embed Form then the Lightbox icon

     

    Add your lightboxs script embed code to the <head> section of your webpage:

    Only put the code between the two <script> tags into your <head> section, it will look a bit like this:

     

    <script src="//www.jotform.com/min/g=feedback" type="text/javascript">

    new JotformFeedback({

    formId:'12972052359',

    base:'http://www.jotform.com/',

    windowTitle:'200th Annual Somerset Ball',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

     

    When you get your lightbox embed code, you will also be given some code to use which will open the lightbox when it is clicked; you can place this code anywhere on your webpage. 

    <a class="lightbox-12972052359" style="cursor:pointer;color:blue;text-decoration:underline;">200th Annual Somerset Ball</a>

     

     

    The link text defaults to the name of your form, but you can change it, e.g

    <a class="lightbox-12972052359" style="cursor:pointer;color:blue;text-decoration:underline;"> Click here to sign up.</a>

     

    Does that help explain the process? if you need any further explanation let us know, or if you want to tell us which form you want to use in a lightbox and provide a link to where its to be embedded, we could provide more precise instruction. 

  • Profile Image
    Twitterthons
    Answered on April 16, 2012 at 11:44 PM

    Thank you for that info. However, I would like to do something slightly different. Please go to http://heritagesecure.net/heritage_secure_standardized_test_preparation.htm.

    I am not interested in adding any new text, as is the case above with "Click here to sign up." I would, instead, like to link the existing text like that at the bottom of the page - "twitter: @HSecure  |  phone: 415.727.0243  |  email: success@heritagesecure.com" - so that the lightboxed form (form/21062457716149) comes up when it is chosen. 

    Thanks

  • Profile Image
    idarktech
    Answered on April 17, 2012 at 12:45 AM

    Hi,

    Yes that's possible. Just like what my colleague stated above, you can replace the default text generated by JotForm. To achieve this, open your heritage_secure_standardized_test_preparation.htm file, look for this line:

    <p class="address_bar2" align="right">twitter: @HSecure&nbsp; |&nbsp; phone: 415.727.0243&nbsp; |&nbsp; email: success@heritagesecure.com</p>

    delete that and replace it to this:

    <p class="address_bar2" align="right"><a class="lightbox-12972052359" style="cursor:pointer;">twitter: @HSecure&nbsp; |&nbsp; phone: 415.727.0243&nbsp; |&nbsp; email: success@heritagesecure.com</p></a>

    You can check the preview here:

    http://www.idarktech.com/test/sample_website.html

    Let me know if you need further assistance. Thanks.

  • Profile Image
    Twitterthons
    Answered on April 17, 2012 at 02:01 AM

    Thank you so much. It worked!

  • Profile Image
    idarktech
    Answered on April 17, 2012 at 02:27 AM

    Glad to know it works. Cheers!