How to have a pricing table on a form for users to select their desired product

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

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 :)