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 to have a pricing table on a form for users to select their desired product

    Asked by homeintegrity on December 07, 2016 at 09:36 AM

    Hi Ben. 

    I have this exact requirement... I need a table that can specify different colums, each with different optinons and totals at the bottom. The customer can select the column that contains the features they want and then move on to pay for the chosen one. 

    Your example above is perfect for what I need. However:

    1) I dont know how you would have developed this - have you used text boxes, etc

    2) The CSS that you refer to no longer exists - the page is empty.

    It would be very helpful if you could provide some clarity around this.


    Thanks a lot

    Regards
    Jason

  • Profile Image
    JotForm Support

    Answered by Boris on December 07, 2016 at 09:38 AM

    My colleague used a payment field on that demo form, and set up the options as products inside the payment field. Please see the following guide for more details:

    https://www.jotform.com/help/165-Setting-Up-Your-First-Order-Form

    When it comes to the CSS that Ben used on his demo form, here is the exact CSS from his form:

    li[data-type="control_paypal"] {
        margin: 0;
        padding: 0;
    }
    li[data-type="control_paypal"] > label {
        display: none;
    }
    li[data-type="control_paypal"] > div {
        width: 100%;
    }
    li[data-type="control_paypal"] br {
        display: none;
    }
    span.form-product-item {
        background-color: white;
        box-shadow: 0 0 8px gray;
        float: left;
        height: 260px;
        margin: 0 1%;
        width: 20%;
    }
    span.form-product-item > input {
        display: none;
    }
    span.form-product-name {
        background-color: #4abd61;
        box-sizing: border-box;
        color: white;
        display: inline-block;
        font-size: 15px;
        font-weight: bold;
        height: 60px;
        padding-top: 10%;
        text-align: center;
        width: 100%;
    }

    span.form-product-details {
        background-color: #303030;
        display: inline-block;
        height: 200px;
        text-align: center;
        width: 100%;
    }
    span.form-product-details > b {
        display: inline-block;
        padding-top: 50%;
        color: orange;
    }
    span.form-product-item:nth-child(2) b:before {
        color: gray;
        content: "1 Year of ultimate screen protection";
        display: block;
        font-size: 10px;
        margin-bottom: 20px;
    }
    span.form-product-item:nth-child(4) b:before {
        color: gray;
        content: "2 Years of ultimate screen protection";
        display: block;
        font-size: 10px;
        margin-bottom: 20px;
    }
    span.form-product-item:nth-child(6) b:before {
        color: gray;
        content: "Go with half year of best screen protection";
        display: block;
        font-size: 10px;
        margin-bottom: 20px;
    }

    span.form-product-item:nth-child(8) b:before {
        color: gray;
        content: "Single Product";
        display: block;
        font-size: 10px;
        margin-bottom: 20px;
    }

    span.form-product-item > input:checked + label > span {
        background-color: green !important;
    }

    You can also simply clone his form into your own account for closer examination, by following this guide:

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Please try setting up your own payment field products according to the guides linked above, and then simply apply the CSS codes to alter the appearance of the payment field. If you run into any troubles or issues along the way, after the products are created in your payment field, please let us know the form you are working on and we'll gladly take a look. Cheers :)