How to add a checkbox to make the user accept terms

  • Profile Image
    bogi
    Asked on June 01, 2011 at 01:50 PM

    Dear Jot Form, maybe it is self explnatory, but I can't find a field which I could use as a "check here to accept terms" in an online application form. Looking forwrd to your reply 

  • Profile Image
    NeilVicente
    Answered on June 01, 2011 at 03:26 PM

    Hi,

    I believe what you're looking for is the checkbox field. It can be found under the Form Tools section:

     

    Here is a sample form which uses such a field. Click the link below to learn how this was achieved.

    Add agreement checkbox to a form

    Hope you find this information useful. Let us know if there's anything else that you want to ask. Thank you for using Jotform.


    Neil

  • Profile Image
    bogi
    Answered on June 05, 2011 at 09:24 PM

    Hi Neil and JotForm,

    Thank you for your expedient reply.

    I followed your instructions and it seems to work great....

    I have only one quick question:

    When one clicks on the Terms link in the Membership application:

    http://unitedpressmedia.com/membership.htm

    the window that opens does NOT show the full Terms & Conditions but only a part, how can I make the window scrollable, so that people can read the Terms & Conditions if they want to.

    Here is the location of the document:

    http://unitedpressmedia.com/terms.htm

    This is the code I am using:

    I have read and agree with the <a target="_blank" href="http://unitedpressmedia.com/terms.htm">Terms and Conditions</a>

    Can you tweek it for me, as I have no programming skills at all... this was probably the only computer code I have ever written.

    Thanking you in advance

    BOGi

  • Profile Image
    abajan
    Answered on June 05, 2011 at 10:17 PM

    Hi BOGi

    I see you have (perhaps wisely) removed the "target" attribute but the problem persists. Try embedding the form via an iFrame instead of the one line script and see if that helps:


    Incidentally, I've noticed that the text on the Terms page is quite small, giving a whole new meaning to the saying "Read the fine print"! Can't its size be increased? I had to zoom in [Ctrl + Num+] to read it.

    Anyway, please let us know if using the iFrame method helped.


    ~ Wayne

  • Profile Image
    bogi
    Answered on June 05, 2011 at 11:14 PM

    Hi Wayne,

    Thanks... I am pleasantly surprised that there are humans at this time working @ JotForm. It really makes your company rather special.... Thank you again.

    I tried the iFrame method - it did not work...

    Here:

    http://unitedpressmedia.com/art.htm

    I am back to the way it was, I just made the letters bigger. I made them smaller before, as I thought that would solve the problem.

    I sure hope you have another solution... Why is the jotform setup cutting off the right and the bottom?

    BOGi

    I am using XARA Web Designer 6

     

  • Profile Image
    abajan
    Answered on June 05, 2011 at 11:50 PM

    Hi again

    When loaded via it's own URL (http://form.jotform.com/form/11542545367) the "Terms and Conditions" link works just fine. It's only when it is embedded on the page that something happens which causes the link to load on the same page as the embedded form and with the right side of the Term's text cut off. The $64,000 question is what could be causing this strange behavior. The reason I had suggested using an iFrame was because that method usually resolves all sorts of problems, as noted in our user guide. Unfortunately, it didn't work in your case.

    I'll submit a ticket and see if our developers can pin down the problem. One of them will post the solution in this thread, hopefully soon.

    Our apologies for any inconvenience caused.


    ~ Wayne

    P.S. Don't make anymore changes to that page until the developers have a look at it. The ticket has just been submitted.

  • Profile Image
    aytekin
    Answered on June 06, 2011 at 06:36 AM

    For the text part, you must use the Free Text(HTML) field under Power Tools. Then add a link using toolbar and make sure to set Target as "Open in New Window". Since Xara includes the pages within IFrame, that's the only way to do it. It is also better to open the terms on a new page. Since we do not want them to lose their entered information when they click on terms link.

     

  • Profile Image
    bogi
    Answered on June 07, 2011 at 03:00 AM

    Thank you Ayetkin amd JotForm... Yes your solution works very elegantly.

    Please click here to see the completed form with the T & C pop-up... do you think it looks well like this? Is this acceptable?

    Feel free to crticise, as this is my first site and am open to any and all suggestions.

    Thanks again.... you really have  great thing going on with JotForm.

    If I can use it, anyone...etc. you know the rest, I don't want to sound like a late nite infomercial.

    Onwards and Upwards...

    BOGi

  • Profile Image
    abajan
    Answered on June 07, 2011 at 05:58 AM

    Hi BOGi

    Thanks for the compliments :)

    While your form looks okay, I have made some adjustments to it and come up with this makeover. If you prefer it, you may clone and use it as your own. (Your email is already set as the recipient.)


    ~ Wayne

  • Profile Image
    bogi
    Answered on June 07, 2011 at 07:21 PM

    Brilliant!

    Thank you, Wayne. Very elegant indeed.

    I tried a similar thing... unsuccessfuly....

    Is the key to overlap (group) the 2 elements and use the same text, or is it more compex than that?

    http://unitedpressmedia.com/membership.htm

  • Profile Image
    abajan
    Answered on June 07, 2011 at 10:38 PM

    Glad you liked and are using the form in your site. Cool!
    Now let me see how well I can recall what I did to make it that way! LOL

    In no particular order:

    * Both the check box field and free text (HTML) field were shrunk. (If you right-click each field in the form builder, a shortcut menu will pop-up with "Expand" as one of the items. If clicked it will, as expected, expand the field and if you right-click the field again, the option will switch to "Shrink")

    * The check box field was given a label of "Terms and Conditions" and the check box labelled "I have read and agree with the Terms and Conditions". Part of the reason for this was to get it to display in the notification email, which isn't really necessary because that field is required and the form could not be submitted in the first place without a check mark in the box.

    * The same text used as the label for the check box was typed into the free text (HTML) field, with the exception that the "Terms and Conditions" portion was turned into a link that would open in a new window and given a title of "Opens in a new tab or window". (I hand coded the link via the "Edit HTML Source" button but Aytekin's method would have accomplished the same outcome in a more convenient way.)

    * The real magic is in the injected CSS (Setup & Embed > Preferences > Form Styles > Inject Custom CSS). I'll see how best I can explain it below, without getting too technical:

    First, the full block of code:

    #label_15 {
    visibility:hidden;
    }
    #id_15 span {
    visibility:visible;
    }
    #cid_15 label {
    display:none;
    }
    #id_20 {
    margin-left:-5px;
    padding-top:0;
    padding-left:0;
    }
    .form-line-error {
    background:none repeat scroll 0 0;
    }
    .form-error-message {
    display:none;
    }
    .form-error-arrow-inner {
    display:none;
    }

    Now, let's break it down:

    #label_15 {
    visibility:hidden;
    }

    This instructs browsers to hide the label of the check box field.

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

    #id_15 span {
    visibility:visible;
    }

    This rule ensures that the asterisk (*) which is part of the label hidden in the first rule remains visible.

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

    #cid_15 label {
    display:none;
    }

    This instructs browsers not to display the label of the check box itself (as opposed to the label for the entire check box field which was already dealt with in the first rule) Incidentally, here's the difference between visibility:hidden and display:none. Interestingly enough, had I used display:none to hide the check box field's label, I would not have been able to use visibility:visible to display the asterisk.

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

    #id_20 {
    margin-left:-5px;
    padding-top:0;
    padding-left:0;
    }

    This precisely positions the free text (HTML) field to the right of the text box:

    A negative margin measuring 5 pixels; (Yes, a negative margin)
    No top padding;
    No left padding;

    This link shows the difference between margins and padding.

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

    The remaining rules control what is displayed when required fields are not completed:

    .form-line-error {
    background:none repeat scroll 0 0;
    }

    This removes the big pink background.

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

    .form-error-message {
    display:none;
    }

    This removes the element containing the "This field is required." message

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

    .form-error-arrow-inner {
    display:none;
    }

    When the element referred to in the last section is displayed, it has an arrow that points to the input. This rule hides that arrow.

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

    That's pretty much what I did to produce the form. Firebug was used to determine which elements (CSS selectors) needed to be targeted.

    To get a better grasp of how the injected CSS is affecting your form, it might be a good idea to clone it and experiment on the clone by removing various elements, saving the form and previewing it.

    Cheers :)


    ~ Wayne

  • Profile Image
    bogi
    Answered on June 22, 2011 at 03:10 AM

    Thank you, Wayne,

     

    Hope all is well... Sorry for the delay.... Again I want to thank you again for the brilliant form you creaed for me.

    Please, if you have free time, take a look at our site and see if you have any suggestions to improve it. Maybe some products you have that I am  not even aware of...

    See if the About section is clear enough...

    http://unitedpressmedia.com/

     

    Thank you

    Bogi

  • Profile Image
    NFAbby
    Answered on September 13, 2011 at 12:08 PM

  • Profile Image
    abajan
    Answered on September 13, 2011 at 12:19 PM

    Hi Abena

    Sorry but your reply came up empty. Please re-post it at the link below, as we're interested to hear your contribution to the discussion.

    Thanks.


    ~ Wayne

    Use this link: http://www.jotform.com/answers/28412-How-can-I-add-a-Terms-Conditions-check-button-in-an-application-form