Terms of use widget is not working on Internet Explorer

  • MelanieMackenzie
    Asked on September 27, 2015 at 10:46 PM

    Hello,

     

    The checkbox does not seem to work on the JotForm on Internet Explorer.


    It will not allow the box to be ticked, and consequently the form cannot be submitted.

     

    Please advise if there is updated coding for the form that should be used on IE.

     

    MT!

     

     

    Jotform Thread 671389 Screenshot
  • Ben
    Replied on September 28, 2015 at 4:40 AM

    Based on your screenshot, the issue is not with the IE (per say) but with the widget not being loaded for some reason.

    What I would suggest is to use a different Terms of Use setup.

    For example, you can have the same setup by adding the following to your form:

    -- If you want to have the link to your terms of use --

    1. Add a checkbox to your form

    2. then in the options add the following:

    <span id="ben_terms">I agree to be bound by the <a href="{TermsLink}">{TermsKeyword}</a> in their entirety.</span>

    3. change the {TermsLink} into the link to your terms and conditions

    4. Change the {TermsKeyword} to what you would like the link to show

    - A good example of this is the link: http://www.jotform.com hidden behind a keyword JotForm.

    5. Once you have added this, you should add the following CSS to your form:

    #ben_terms {
        color: #999;
        font-size: 16px;
        line-height: 24px;
    }
    #ben_terms > a {
        color: #228acf;
    }

    You can see how to do that here: Inject Custom CSS Codes

    6. You find out the ID of this new checkbox as shown here: How to find Field IDs & Names (we only use the number so #input_569_0, would be 569)

    7. Apply the ID instead of {id} to the following CSS and add the CSS to your form as above:

    #input_{id}_0 {
        border: 1px solid gray;
        box-shadow: none;
        height: 20px;
        width: 20px;
    }
    #cid_{id} {
        display: inline;
        float: left;
        width: 95%;
    }

    It might seem as a lot, but this will work on all browsers.

    You can see how this looks here (with terms showing jotform terms of use): http://form.jotformpro.com/form/52702228812955

    Now, there is also another way to set this up:

    -- If you do not want to have the link to the terms of use --

    There are less steps to achieve this since we do not have the link

    1. Add checkbox to your form

    2. set one option titled in any manner that you wish

    3. find the ID of the field as above: How to find Field IDs & Names where we again, only grab the number

    4. apply the following CSS to your form as shown here: Inject Custom CSS Codes while changing the {id} with the ID from above:

    #id_{id}:hover .form-checkbox-item:after {
        color: red;
        content: "REQUIRED";
        font-weight: bold;
        margin-left: 20px;
    }
    #id_{id} .form-checkbox-item {
        font-size: 16px;
    }

    You can see how this would look here: http://form.jotformpro.com/form/52702599636970

    If you wish, you can also simply clone the forms to your own account and only make the small changes to the field. You can do that by following the steps here: How to Clone an Existing Form from a URL

    Do let us know how it goes :)