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

    Adding a pop up box to show terms and conditions

    Asked by amitchell on November 16, 2011 at 11:00 PM

    Our form requires the user to review the terms and conditiona prior to submiting.

    Is there a way to have a pop up box so the user can read the conditions and then close that pop up box.

    Thanks

     

    Page URL:
    http://jotform.com./form/13065136726

    review pop-up pop up termst and condition
  • Profile Image
    JotForm Support

    Answered by idarktech on November 16, 2011 at 11:36 PM

    Hi Amitchell,

    Thanks for asking. Regarding your question, please see How to add agreement check box to a form in our user guide.

    On the checkbox options from that guide,  you can use the code below to create a pop-up window for your terms and conditions link. Just simply change the highlighted link below to your terms and conditions link.

    <a target="_blank" href="javascript:void window.open('http://www.jotform.com','','scrollbars=yes,menubar=yes,resizable=yes,left=30,top=30,height=500,width=650')"> link</a>

    Let us know if you need further assistance. Thank you and have a great day!

  • Profile Image

    Answered by cheekyface on March 11, 2013 at 08:34 PM

    Is it possible to add this same thing as a light-box (instead of pop-up) containing terms & conditions ...or as in my case I'd like to do this to add a 'more info' link for products/services selected.

  • Profile Image

    Answered by jefreylandicho on March 11, 2013 at 09:30 PM

    Yes it is likely possible, you can try adding this script in your header

    <script type="text/javascript" src="//gettopup.com/releases/latest/top_up-min.js"></script>

    then using the html editor, create a link e.g.

    <a target="_blank" href="http://mywebsite.com/conditions.html" rel="nofollow" class="tu_iframe_800x600">Terms and Conditions</a>

    where 800x600 is the dimension of your lightbox.

    Do not hesitate to contact us again if you need further assistance.

     

  • Profile Image

    Answered by cheekyface on March 12, 2013 at 01:49 AM

    Before I give this a go can I ask if this is going to work wihtout embedding the form?  I mean can I enter the code somewhere in the form itself or must I add the code to the form after I place it on a webpage?

    Also I have added the following code to a checkbox field and it doesn't work as a pop up.  Instead it opens to an page in a new tab.  Using chrome & firefox.

     

     

    Face Painting more info'.

    -----

    Ballooning more info'.

     

    Face Painting <a target="_blank" href="http://www.cheekyface.com.au/forms/services/face_painting.htm" rel="nofollow" onclick="window.open('http://www.cheekyface.com.au/forms/services/face_painting.htm', 'popup','width=250,height=500,scrollbars=yes,resizable=no,toolbar=no, directories=no,location=no,menubar=no,status=no,left=250,top=50'); return false">more info'.</a>

    -----

    Ballooning <a target="_blank" href="http://www.cheekyface.com.au/forms/services/balloons.htm" rel="nofollow" onclick="window.open('http://www.cheekyface.com.au/forms/services/balloons.htm', 'popup','width=250,height=500,scrollbars=yes,resizable=no,toolbar=no, directories=no,location=no,menubar=no,status=no,left=250,top=50'); return false">more info'.</a>

     

    Am I missing something?

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 12, 2013 at 03:04 AM

    @cheekyface

    Sorry but you have to put that on your web page, you can't inject that directly on the form builder.

    --

    You can use the following script.

    <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/face_painting.htm','','scrollbars=yes,menubar=yes,resizable=yes,left=30,top=30,height=500,width=650')"> link</a>

    Thanks!

  • Profile Image

    Answered by cheekyface on March 12, 2013 at 03:29 AM

    That works thanks!!

    One more question.  Is there any way I can reduce the size of the linked text?  I want it to be smaller than the font of the item next to the check box.  If I can't reduce it I may then use an image link with a question mark instead.

     

    So for example:

    If I'm using this below - the blue text is what I want to shrink:

    Face Painting <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/face_painting.htm','','scrollbars=yes,menubar=no,resizable=yes,left=30,top=30,height=350,width=250')">more info'.</a>

     

    It should look something like this:

    Face Painting more info'.

  • Profile Image

    Answered by cheekyface on March 12, 2013 at 03:35 AM

    Never mind.  I got it!

    Face Painting <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/face_painting.htm','','scrollbars=yes,menubar=no,resizable=yes,left=30,top=30,height=350,width=250')"> <font size="2">more info'.</font></a>

  • Profile Image

    Answered by cheekyface on March 12, 2013 at 08:34 AM

    ...actually I need your help again.

    The link "more info" disappears if I click on it in the editor.  My guess is that, even though I can refrain from clicking on it, this is not good.

    I tried to use an image instead and it disappears.

    Is there a better way to add an image or text that I can reduce the size of?  I just prefer it to look this way.

    For some reason I don't have the option to insert a screenshot here so I can't show you what I want it to look like with the info icons but my guess is you will understand what I mean.  This is pretty standard as I've seen around the internet.

     

    I should also add that I don't get any notifications from this thread yet I do for others where I've only commented.  Is that normal?

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 12, 2013 at 09:52 AM

    @cheekyface 

    Forum notification's should now be fixed. We have the same problem recently but we have confirmed that it is fixed now. Sorry about that.

    Clicking the options directly on the checkbox/radio field will stripped off the HTML codes, so I would suggest to click the "Options" toolbar instead when you alter something on it.

    Actually I am still not quite sure what you want to achieve so perhaps a screenshot would explain everything. You may upload your image here and send to us the Image URL so we can see how you'd like the pop-up to look like.

    We'll wait your reply. Thanks!

  • Profile Image

    Answered by cheekyface on March 12, 2013 at 10:06 AM

    Thanks for that.  

    Its not so much the pop up window but the image icon I've used to be placed beside the check box option text.

    You have answered my question actually as it seems there is no way to avoid losing the html if I click the options in edit mode.  In any case you can see what I mean if you can see the uploaded screenshot.   I just want to have a question mark icon next to the service options.  this icon links to a page with more detail about that service option and that is what is in the pop up.

    here's the code I used - it might be easier for you to just use it in a check box field.

     

    Face Painting <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/face_painting.htm','','scrollbars=yes,menubar=no,resizable=yes,left=30,top=30,height=350,width=350')" title="more info about this option"><img border="0" src="//www.cheekyface.com.au/images/Icons/more_info.png" width="24" height="20"></a>

    Ballooning <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/balloons.htm','','scrollbars=yes,menubar=no,resizable=yes,left=30,top=30,height=350,width=350')" title="more info about this option"><img border="0" src="//www.cheekyface.com.au/images/Icons/more_info.png" width="24" height="20"></a>

    -------------

    Adhesive Tattoos - water release (not air brushed) <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/tattoos_wet.htm','','scrollbars=yes,menubar=no,resizable=yes,left=30,top=30,height=350,width=350')" title="more info about this option"><img border="0" src="//www.cheekyface.com.au/images/Icons/more_info.png" width="24" height="20"></a>

    Body Art - Full <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/body_art.htm','','scrollbars=yes,menubar=no,resizable=yes,left=30,top=30,height=350,width=350')" title="more info about this option"><img border="0" src="//www.cheekyface.com.au/images/Icons/more_info.png" width="24" height="20"></a>

    Body Art - Partial <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/body_art.htm','','scrollbars=yes,menubar=no,resizable=yes,left=30,top=30,height=350,width=350')" title="more info about this option"><img border="0" src="//www.cheekyface.com.au/images/Icons/more_info.png" width="24" height="20"></a>

    -------------

    Workshop  - Beginners Face Painting <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/workshop_beg.htm','','scrollbars=yes,menubar=no,resizable=yes,left=30,top=30,height=350,width=350')" title="more info about this option"><img border="0" src="//www.cheekyface.com.au/images/Icons/more_info.png" width="24" height="20"></a>

    Workshop - Advanced Face Painting <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/workshop_adv.htm','','scrollbars=yes,menubar=no,resizable=yes,left=30,top=30,height=350,width=350')" title="more info about this option"><img border="0" src="//www.cheekyface.com.au/images/Icons/more_info.png" width="24" height="20"></a>

    Workshop -  Beginners Ballooning <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/workshop_balloons.htm','','scrollbars=yes,menubar=no,resizable=yes,left=30,top=30,height=350,width=350')" title="more info about this option"><img border="0" src="//www.cheekyface.com.au/images/Icons/more_info.png" width="24" height="20"></a>

    -------------

    Henna Tattoos (availability is sporadic) <a target="_blank" href="javascript:void window.open('http://www.cheekyface.com.au/forms/services/henna.htm','','scrollbars=yes,menubar=no,resizable=yes,left=30,top=30,height=350,width=350')" title="more info about this option"><img border="0" src="//www.cheekyface.com.au/images/Icons/more_info.png" width="24" height="20"></a> 

     

    By the way; is there any way to have a blank line like a <br> without having a check box next to it?

  • Profile Image
    JotForm Support

    Answered by Welvin on March 12, 2013 at 11:23 AM

    @cheekyface,

    I have just tested the function. You won't loss the codes if you will edit the options via "Options" button.

    Yes, you can have spaces by adding <br> tag next to the closing </a> tag. Example: http://www.jotformpro.com/form/30704946992969

     

    Thanks

  • Profile Image

    Answered by cheekyface on March 12, 2013 at 06:39 PM

    Thats great!! Thanks.

    Just one last thing.  Is it possible to have a comment just above the first check box but without the check box?

    I just want to insert the instruction to 'click the icon beside each option for more detail'.  So I just want to know how to remove the check box from the first line if that's possbile.

    No biggie if it's too much of a hassle.  You guys have been great!!  I used wufoo for ages and although their customer service is pretty good they were only helpful to a point.

    Thanks!!

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 12, 2013 at 09:38 PM

    Welcome!

    Yes, that's possible. Simply add another option on top of all the existing options and HIDE its check box by injecting custom CSS codes to your form. I would suggest to add the comment you've mentioned to your form's check boxes and provide to us the form URL so we can create the CSS codes for you.

    You will need to use this guide later when we have the CSS ready: How to Inject Custom CSS Codes to your Form

    Also, how about using Hover Description Box? This is designed to add descriptions on the fields.

    We'll wait your reply. Thanks!

  • Profile Image

    Answered by cheekyface on March 12, 2013 at 10:54 PM

    That's OK.  I was just curious but it sounds like a bit of a hassle so I'll leave it.  I just used the question to enter the code below but I never thought to use the hover text option on the tool bar.  I have hovering text on each icon though.

     

    this is what I've used in the question instead of actually asking a question.  I used an HTML field to create a question just above the check box options.

    If you're curious my form is at: http://form.jotform.co/form/30650671596863  but it's still a mess and no where near finished.  This bit above is about 5 or 6 pages into the form.

     

    Thanks for your help.

    Cheers,

    Danny.

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 13, 2013 at 05:16 AM

    Hi Danny,

    I like the setup. Nicely done!

    We'll glad to hear that. Do you still want to create a comment text or do you prefer the hover text? It seems to look nicer for me. :)

    Let us know so we can help you. Thanks!

  • Profile Image

    Answered by cheekyface on March 13, 2013 at 07:06 AM

    No. I'm happy with it as it is.  Just using the hover text and it does a good enough job.

    Thanks for asking!

  • Profile Image

    Answered by cheekyface on March 13, 2013 at 08:27 AM

    ...Just thought I'd ask this.  Sorry I know this isn't the place for it but I thought I might sneek this in as I've looked around the internet and cant' find the answer.

    One of my pop ups is for terms & conditions and it displays the date last modified with the following script I found online:
    <p class="lastmod">Document last modified:
    <script type="text/javascript">
    document.write('<span>'+document.lastModified+'</span>');
    </script>
    </p>

    What I can't find is how to make it display in the format I want which for example would be:
    dd/mm/yyyy

    OR my preference as an example:  Wednesday 13th May 2013  at 2.05pm 

    Can you point me in the right direction to find this at all?  Every script I come across displays only in the format mm/dd/yyyy. 

     

    Cheers,

    Danny.

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on March 13, 2013 at 09:35 AM

    Hi there, 

    I found this code that may help you:

    <script 
      type="text/JavaScript" 
      language="JavaScript">

    function date_lastmodified()
    {
      var lmd = document.lastModified;
      var s   = "Unknown";
      var d1;

      // check if we have a valid date
      // before proceeding
      if(0 != (d1=Date.parse(lmd)))
      {
        s = "" + date_ddmmmyy(new Date(d1));
      }

      return s;
    }

    //
    // finally display the last modified date
    // as DD-MMM-YY
    //
    document.write( 
      "This page was updated on " + 
      date_lastmodified() );

    // -->
    </script>

    You can give it a try and let us know if that helps! 

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 13, 2013 at 09:42 AM

    Hi Danny,

    In addition to Ed, you may also find this helpful.

     

    <script type="text/javascript">

    da = new Date(document.lastModified) // Create a Date Object set to the last modifed date

    yyyy = da.getFullYear() // Get full year (as opposed to last two digits only)

    mm = da.getMonth() +1 // Get month and correct it (getMonth() returns 0 to 11)

    dd = da.getDate() // Get date within month

    document.write ( "Document last modified: " + dd +"/"+ mm +"/" +yyyy);

    </script>

    Output date format will be dd/mm/yyyy

    Thanks!

     

  • Profile Image

    Answered by cheekyface on March 13, 2013 at 10:09 AM

    Thanks guys for both options.

    Eduardo:  No result.  For some reason nothing appears with this code.

    Elton: I get a result but in the browser it dislays one day behind to what the local date is.  i.e. Its now 14/3/2013 but I get the display of 13/3/2013.

    I used frontpage to update that page and it displays correctly in the frontpage preview but when uploaded to the server it's a day behind.

    If it's a quick fix then I'd love your help but if not then I'll just stick with it.  It's no big deal if it's a day behind.  I just want our customers to have a fair idea of when the terms & conditions are updated in case it affects them.

    If it helps our T&C's page is here

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 13, 2013 at 10:40 AM

    @cheeckyface

    Well it is still 13 on my location GMT + 8, so you are living in a day advanced. :)

    Anyway, adding +1 on the day should solved it. Here's the modified script.

    <script type="text/javascript">

    da = new Date(document.lastModified) // Create a Date Object set to the last modifed date

    yyyy = da.getFullYear() // Get full year (as opposed to last two digits only)

    mm = da.getMonth() +1 // Get month and correct it (getMonth() returns 0 to 11)

    dd = da.getDate() +1 // Get date within month

    document.write ( "Document last modified: " + dd +"/"+ mm +"/" +yyyy);

    </script>

  • Profile Image

    Answered by cheekyface on March 13, 2013 at 09:26 PM

    Thank you!

  • Profile Image

    Answered by GentlemensAgency on February 10, 2014 at 06:14 PM

    Hi EltonCris,

    I'm trying to add your code into my form, but it doesn't work. I tryd it multiple times.

    <a target="_blank" href="javascript:void window.open('http://www.jotform.com','','scrollbars=yes,menubar=yes,resizable=yes,left=30,top=30,height=500,width=650')"> link</a>

    I tried this and changed the highlighted website, after pressing OK. Only link shows as text but it's not working as a link.

    When I go to options again that code is lost and is automaticaly replaced by this code <a > link</a>

    I would appreciate some help with this problem.

  • Profile Image
    JotForm Support

    Answered by TitusN on February 10, 2014 at 07:02 PM

    Please open a new thread here and we shall be happy to assist.

  • Profile Image
    JotForm Support

    Answered by jonathan on February 10, 2014 at 07:02 PM

    @ GentlemensAgency 

    Hi,

    Please create a new thread regarding your question. Use this link http://www.jotform.com/contact/

    Provide as much details as you can.

    We will attend to it as soon as we can.

    Thanks!

  • Profile Image

    Answered by daphnecvm on August 06, 2014 at 10:44 AM

    Hi Support, 

    I used this code provided by Idarktech to create the Pop-up new window for the T&C. It does not work. Please help asap! 

    <a target="_blank" href="javascript:void window.open('http://www.jotform.com','','scrollbars=yes,menubar=yes,resizable=yes,left=30,top=30,height=500,width=650')"> link</a>