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

    How do I hide/show products based on answers to previous questions?

    Asked by ukff on September 14, 2013 at 06:58 PM

    e.g.

    1. I have a question that asks: Are you over 18? (dropdown with Yes/No)

    2. I have a question that asks: Are you a student (dropdown with Yes/No)

    I have 4 products:

    a) Over 18 $20

    b) Over 18 Student $10

    c) Under 18 $15

    d) Under 18 Student $5

    Based on answers to 1 and 2, I would like to display ONLY ONE product i.e. a) , b) , c) or d), and charge PayPal accordingly.

    I have the 4 products setup in PayPal but I cannot set a condition to display a) b) c) or d) based on answers to questions 1. and 2.!!

    Can you please help?

    style product charge
  • Profile Image
    JotForm Support

    Answered by jonathan on September 14, 2013 at 07:30 PM

    Hi,

    I am sorry but no. As you cannot split the payment field's items/products base on conditions.

    BUT what you can do is like this (using this guide: How-To-Add-Options-In-The-Payment-Form)

    Give us your feedback if this can work for you.
    Thanks.
  • Profile Image

    Answered by ukff on September 15, 2013 at 04:45 AM

    That doesn't help me. 

    I basically have about 6 products and based on answers to previous questions I need to show the right product.

    I am now really stuck with the following limitations:

    1. I cannot select product based on condition. But I can select payment field.

    2. Only ONE payment field is allowed as only ONE payment system is allowed.

    3. I can create a different form for each product and combine them all into a master form using iframes. I can then create conditions to show the right product in the master form. But the submit/post buttons needs to be in the product forms. That means the data in the master form is NOT saved in the spreadsheets AND I will have to manage 6 spreadsheets (although I can mange the 6 spreadsheets issue).

    ====

    Is there a way of solving this problem.....by injecting CSS or using free HTML or?

    Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on September 15, 2013 at 06:28 AM

    This may require embedding a copy of the form's full source into a web page and adding a script to the same page to show/hide the products according to the choices selected. I'll see if I can come up with such a script and get back to you.

  • Profile Image

    Answered by ukff on September 15, 2013 at 10:50 AM

    @Abajan: Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on September 15, 2013 at 01:18 PM

    Hi again

    Please test this form and let me know if it's okay. I'm currently running some checks at Browserstack for browser/platform inconsistencies and so far, everything seems fine.

    Once everything checks out, I'll show you how to get the solution to work with your own form.


    Thanks

  • Profile Image

    Answered by ukff on September 15, 2013 at 02:34 PM

    @Abajan: Thanks.....that is exactly what I would like to do.

    If you could share the technique/method that you used, I should be able to adapt and apply it to my form.

    I will be allowing selection of only ONE product (radio button) as in your test form solution. However if more than one product (checkbox) may be selected, then there may be extra logic required to clear the product selection IF the previous answers are subsequently changed i.e. more testing required!!! Let's not go there!!!

    Thanks for providing weekend support!

  • Profile Image
    JotForm Support

    Answered by jonathan on September 15, 2013 at 05:58 PM

    @ ukff

    Hi, our colleague Abajan will surely get back to you when he is online again.

    For the meantime, this may help also intially on how you can apply this to your end.

    1. Clone the form use by Abajan in the demo page. This form http://www.jotformpro.com/form/32572848103959

    Use this guide to clone: How-to-clone-an-existing-form-from-a-URL

    2. After cloning the form to your end, do the necessary adjustments like the account on the payment field, and email notifications (make sure it is using your own accounts)

    3. Get the form's source code and embed it to your own web page. If you check the demo page of Abajan, it is using the source code.

    Use this guide: How-to-get-your-Form-Source-Code

    4. In the demo page, you will also see the javascript codes added by Abajan. It is at the lower part of the form's source code, just before the closing </body> tag.

    This are the javascript code: http://pastie.org/8328718

    5. You have to add the javascript code to your web page + the form's source code just like in the demo page.

    6. Test your form when all is completed.

     

    As for the using multiple-selection, it may require a different version of the form itself. Because you have to use the payment field wizard to Allow Multiple Selection instead of the "can only choose one" option.

    So for the checkbox, it will be a different versionn of the form. I am sure this is doable also using the form's source code + javascript code again. 

    But can you please confirm if you need this version now?

    Hope this help in any way. Please update us when you can.

    Thanks.

     

     

     

     

     

  • Profile Image

    Answered by ukff on September 15, 2013 at 06:45 PM

    @Jonathon: Thank you. I will try this tomorrow. Also, I do not need multiple-selection.

  • Profile Image
    JotForm Support

    Answered by jonathan on September 15, 2013 at 07:05 PM

    You're quite welcome.

    We will await for your latest feedback then.

     

    regards,

  • Profile Image
    JotForm Support

    Answered by abajan on September 15, 2013 at 10:27 PM

    @Jonathan
    Thanks for filling in while I was offline. Much appreciated.

    @ukff
    After cloning the form, before going to Step 2 of my colleague Jonathan's guide, you'll need to inject the following CSS:

    .form-header {
    text-align: center;
    }

    /* Products label */
    #label_71 {
    width: 190px !important;
    visibility: hidden;
    }

    .form-product-item {
    display: none;
    }

    /* Adult */
    #cid_71 span + br + span {
    position: absolute;
    margin-top: -19px;
    }

    /* Under 18 Student */
    #cid_71 span + br + span + br + span {
    position: absolute;
    margin-top: -38px;
    }

    /* Under 18 */
    #cid_71 span + br + span + br + span + br + span {
    position: absolute;
    margin-top: -57px;
    }

    /* Products error message */
    #cid_71 .form-error-message {
    position: absolute;
    top: 50px;
    height: 17px;
    }

    .hover-product-item:hover,
    .form-line-error {
    background: transparent;
    color: #244187;
    }

    /* Submit button wrapper */
    #id_74 {
    position: absolute;
    top: 220px;
    }

    /* Submit button */
    #input_74 {
    display: none;
    }

    /* Message under submit button */
    .form-button-error p {
    text-align: left;
    margin-left: 205px;
    }

    (The script depends on some of the rules in that CSS to work correctly.)

    Sometime tomorrow, I'll try my best to explain how it all works. In the meantime, should you encounter any difficulties, please let us know.


    Cheers