How do I use advanced features in order to force user to choose a box option?

  • Profile Image
    ajlst21
    Asked on February 02, 2012 at 09:11 AM
  • Profile Image
    fxr
    Answered on February 02, 2012 at 10:35 AM

    Just add a Check Box to your form as below:

     

    Then to make the field required, click the grey cog on the right of the field and select Required

     

     

     

    You can see an example here: http://form.jotform.com/form/20322426160

     

    If you want any help customising the field a little further, e.g tweaking the spacing etc, get your form built as far as you can, share its URL with us and tell which bits arent entirely happy with and how you want them to look. We will do our best to come up with some Custom CSS to get the form fields as close to how you want them to look as possible.

     

  • Profile Image
    ajlst21
    Answered on February 02, 2012 at 10:54 AM

    First, thanks for your effort. I'm sure you're not thanked enough here.

    However, I understand how to simply make it required as in http://form.jotform.com/form/20322426160. What I'm looking for is a way for the tool to function like you see in the form URL that I originally attached.

    A

  • Profile Image
    ajlst21
    Answered on February 02, 2012 at 10:56 AM

    I already have this form in place: http://www.jotform.com/form/20315003198? and have created on here as well: http://www.cochran.com/penguins-fan-of-the-game (both not required on purpose). can you look into creating functionality, like I showed? Assuming with jQuery or the like?

  • Profile Image
    ajlst21
    Answered on February 02, 2012 at 11:21 AM

    Essentially, I am looking for that warning box, "you must select"...

  • Profile Image
    fxr
    Answered on February 02, 2012 at 11:37 AM

    Yeah, I think I see what you mean now.

    Please inspect this clone of your form -> http://www.jotform.com/form/20321438100

    (uncheck the 'I agree' checkbox)

    I will take you through how its done if you are happy with how it works/looks.

     

    (The effect was done entirely with JotForm tools) 

  • Profile Image
    ajlst21
    Answered on February 02, 2012 at 03:08 PM

    WOW!

    OK, so I am able to go in and edit this where exactly and also, THANKS MUCH!

  • Profile Image
    fxr
    Answered on February 02, 2012 at 03:50 PM

    :) Glad you like it. 

    I was just give a brief overview of what you need to do.

    1. Add some Custom CSS to your form.

     

    - From the Setup & Embed toolbar, click on the Preferences icon, select Form Styles tab and in the Inject Custom CSS text area, add the following:

    #mywarning {

    font-weight:700; 

    padding: 20px 15px 20px 67px;

    margin:10px 38px 15px 0;

    color:#DD4232;

    line-height:16px;

    background-color:#FFF1EF;

    background-repeat:no-repeat;

    background-position-x:10px;

    background-position-y:50%;

    border:1px solid #FCDAD5;

    background-image: url('https://ne.edgecastcdn.net/80033E/www.creditkarma.com/res/img/layout/login/errorIcon.png');

    }

    ( I suggest downloading the warning image here (right-click on it, save as), and upload it to JotForm. Updating that background-image CSS rule accordingly )

     

    2. Create an additional Free Text (HTML) where you want this warning placed, Click the HTML button, add the following:

    <div id="mywarning">Warning: You must elect to receive important notifications from Credit Karma to participate in credit monitoring.</div>

    You can change the text of that between the two <div> tags to anything of your choosing. 

    3. Now all we have to do is setup a condition for when this warning box will be displayed. 

    - I ran into one small issue here and had to give your Check box a label. ( I have removed this later with CSS) 

    I also set the Check Box to be selected by default:

     

    4. I then Click the Conditions Icon, Select Show / Hide Form Field, Click Next 

    - Find the Check box field in the Left hand side menu , Not equals to in the middle menu and as you only have one possible check box option, enter that into the right hand side dropdown menu. 

    Then at the bottom, Select Show, & find the Warning Free Text (HTML) field in the Drop down meny to the right. 

     

    Thats it. 

     

    Just add one more piece of Custom CSS to that which you have already added to hide that Label of your Checkbox.

    #label_8 {display:none !important; }

     

     

     

    If you get stuck working through that let us know. 

    You could also just clone my form and make your edits to that. 

     

  • Profile Image
    ajlst21
    Answered on February 02, 2012 at 04:07 PM

    How do I clone the form and also, how do I edit the Credit Karma content?

     

    THANKS!

  • Profile Image
    fxr
    Answered on February 02, 2012 at 04:11 PM

    Cloning a form is detailed here -> http://www.jotform.com/help/42-How-to-clone-an-existing-form-from-a-URL

    My form URL is : http://www.jotform.com/form/20321438100

     

    To edit the text of the warning message, just find the Free Text (HTML) field , Click Edit HTML, then click the HTML button in the bottom right corner. 

  • Profile Image
    ajlst21
    Answered on February 03, 2012 at 08:54 AM

    When I cloned it and changed the HTML it broke the functionality

     

    See: http://www.jotform.com/form/20334755196?

     

    BTW, I use many forms from you guys, four new versions here: http://www.cochran.com/CHP, click on the Sign-Up links.

  • Profile Image
    fxr
    Answered on February 03, 2012 at 11:52 AM

    You just needed to recreate the condition. I have done that for you. 

  • Profile Image
    ajlst21
    Answered on February 03, 2012 at 01:39 PM

    http://www.jotform.com/form/20334755196

     

    LOVELY! You my friend deserve a beer on me!

  • Profile Image
    abajan
    Answered on February 03, 2012 at 05:13 PM

    Okay, he can have the thanks and I'll take the beer.

    Cheers :)

  • Profile Image
    abajan
    Answered on February 03, 2012 at 05:27 PM

    Wouldn't it be more user friendly to have the box checked by default and thus have the warning message shown only if the box is deliberately unchecked by the user?


    Just a suggestion.