How to create a complex order form?

Creating a complex online order form with payment integration may be a bit tricky at first.

Case scenario: You’ve taken a look over our order form templates, but you want to take it a step further. Setting up the prices and associating them with certain fields looks complicated? Or maybe you’re looking for some advanced functions?

This article will guide you through every step, from adding the first field to having happy customers and money in your account.

Here is a complex order form that we’ve created for demonstration purposes. Even though it looks complex, it’s not that hard to build.

We will divide this tutorial into three parts: Form Editor, Form Rules and Payments.

Form Editor

1. In Form Editor we will divide the form into three parts: contact and delivery details, menu and order confirmation and terms of agreement.

2. The Contact details with the delivery time will contain fields with no special functions, what so ever.

3. The Menu is where we will add fields and set them as hidden. It takes a bit of time, but we repeat again, it’s not that hard.

4. We will add a checkbox (What would you like to order?), which will trigger the behavior of the form. We will explain more at a later step when setting the field rules. With the exception of this field, all fields will be set as hidden in the menu section of this form.

5. We have four fields related to tea and three related to coffee. These fields consist out of radio buttons, checkboxes, and number fields. Clients will have the possibility to choose the type of coffee and tea they want if they want them sweetened, the quantity and if they want something extra next to them, such as biscuits, muffins, etc. The related fields to tea and coffee will be set as hidden. When clients open the form, they won’t see any details of the drinks, only when they select them from the first checkbox.

6. Next we will add Image fields and arrange them with the Resize field option, to make it look professional. They will be set as hidden and set within Rules to appear only when the client has selected the product related to the image.

7. In the end we will add a Digital signature field, a Terms of agreement field and a Heading as an instruction to clients, who have coupon codes to use for discounts. These fields are not hidden and the coupon box is set automatically from Payments. We will explain more in the Payments section of this demo.

Field Rules

Now that’s about it with the Form Editor, but we need to do something with those hidden fields to appear when the client select one product or the other. This sample form works something like this: when the client selects tea all fields related to tea will appear. The same applies when they select coffee.

1. Go to SettingsRulesField Rules and check Enable field rules for this form.

2. Next, add one rule at a time. It’s best that you know precisely how you want to set your rules. In this sample, there are eighteen rules. Don’t worry, we will take it slow, step by step.

3. We will need to add a rule for our first checkbox, where we have the two choices set, tea and coffee. Depending on what will the client choose, the selected radio button will show some of the hidden fields. Luckily we can set multiple actions within one field rule. We will set this field rule as follows: Complex Order Form - Field Rule

If Tea is checked then show

  • Choose the desired tea:
  • Quantity
  • Sweetened
  • Extras

Add a new rule and repeat the same condition, but this time replace tea with coffee in the first dropdown list within the Edit Field Rule popup.
4. Setting up rules implies logical thinking, so it’s really not that big of a deal. In this demo we have built rules as follows:

Complex Order Form - rules part1

Complex Order Form - rules part2

Complex Order Form - rules part3

Complex Order Form - rules part4

You can assign more conditions to the same rule. To add an extra condition to the same rule, click on the green cross in Edit Field Rule and a new line will appear. Set up the new condition and press Save rule when done.

123FormBuilder - Edit field rule

Payments

In this section we have assigned the prices of the form’s products, a coupon box for discounts and the payment processor. You can select from a list of payment gateways in Payment processors. To start with, go to the SettingsPayments section and select the payment gateway you want to use from Payment Processors.

1. In this demo we have selected the PayPal payment gateway. You can select and use as many payment gateways you desire, on our platform.

Complex Order Form with PayPal

2. In the section Assign Values or Formulas to Fields, we have assigned the necessary prices to the products tea, coffee and all additional extras that come with them.

Complex Order Form - assign prices

3. In Summary and Discounts we have set the calculation formulas of the products by the requested quantity. Read more about Payment Summary and Discounts.

4. You can assign coupon codes to your web order form, depending on your needs. We have added two coupon codes on this form. When you assign a coupon code on your form for the first time, a Text box field will automatically appear before the Submit button. Here users can assign one of the codes and receive a discount.

Complex Order Form - Coupon Codes

5. In the PaymentsNotifications section you can set a variety of options related to email notifications after payments .

In the SettingsAdvanced section tick Allow respondents to save the submission and resume later, to set the Save for later button on your form. Users will be able to save their progress and resume the form at a later time.

You can now publish your form on your websites or use the f

6 Comments

  1. MOHAMMED AHTESHAM says:

    hi, i want the order form to have
    1) name of the item
    2) price of the item
    3) field to select the quantity
    4) total amount of that item
    5) grand total
    5) field to enter the promo code if any
    6) total amount to be calculated but no payment integration.
    The discount % should also be put by customer and he should be able to sum the total spend but payment mode will be only cash on delivery.
    How is this possible and will it be possible in the free module?

    • vlad says:

      Hello,

      You can assign all the values needed and set up the all the necessary formulas form the Calculations section. Adding a payment processor is only required if you want to receive online payments.

      However, you scenario might require more fields than are available on our Basic plan. It depends on how may items you will need to add.

      Please contact out Support team for further assistance at support@123formbuilder.com.

      Thanks!

  2. Krishna says:

    I am looking at various options to create an registration + payment website for my client. I have to first capture the user details and then based on the entries from the user various types of tickets (different prices) are made available. Can this be then directed to the payment gateway ? At this point , I am only considering to use paypal.

    • Hello!

      You can use field rules to hide or show certain options and other fields on the form while the form visitors fill it out. Have a look in our documentation regarding field rules to learn more. Afterwards, you can integrate your form with PayPal and the payment will take place on PayPal’s checkout page after the form has been submitted.

      For further assistance, don’t hesitate to contact our Support Team at support@123formbuilder.com or via our contact form.

      Thanks!

  3. Angie says:

    I am wanting to create reports that generate total revenue. Can I do that?

    • Hello Angie!

      In the Reports section, you can generate reports based on the given user input after each submission (textbox, textarea, number, etc.) or choices selected by your users (radio buttons, checkboxes, dropdown lists). You can also generate the number of submissions or the total of all numeric inputs added by your form users (e.g. Numeric field for quantity) by using the Number widget to your report. Unfortunately, you cannot add a total revenue to your reports based on the completed transactions made on your order form. Is this what you referring to?

      Please contact our Support Team at http://www.123formbuilder.com/contactus.html for questions or assistance.

      Thanks!

This website is using cookies. By continuing to browse, you are
agreeing to our use of cookies as explained in our Cookie Policy. OK