Generic selectors
Exact matches only
Search in title
Search in content

How to create a complex order form?

Creating a complex order form with payment integration may be a bit tricky at first. 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, Field Rules, and Payments.


Form Editor

1. In the Form Editor we will divide the form into three parts: contact and delivery details, menu and order confirmation, and terms of agreement. You can use HTML block fields if you wish to add dividers on your order form.

HTML block divider

2. The contact and delivery details section will contain fields with no special functions, whatsoever.

3. The menu is where we will add all fields that will sum the order. It might take a bit of time, but rest assured, it’s really not that hard.

4. We will start with a Multiple choice field (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.

5. We have four fields related to tea and three related to coffee. These fields consist out of Single choice fields, Multiple choice fields, and Number fields. Clients will have the possibility to choose the type of coffee and tea they want, if they want them sweetened, add the quantity, and if they want something extra next to them, such as biscuits, muffins, etc. When clients open the form, they won’t see any details of the drinks, only when they select them from the first Multiple choice field.

Order form menu

6. Afterward, we will add Image fields and resize them, to make them look professional. They will be set within Field Rules to appear only when the client has selected the product related to the image.

7. In the last section we will add a Signature field, a Terms of service field, and a Heading as an instruction to clients who have coupon codes to use for discounts.

Agreement section

Field Rules

Now that’s about it with the Form Editor, but we need to do something with those fields to appear only when the client selects one product or the other. The sample form provided earlier 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 RulesField Rules and check Enable field rules.

Enable field rules

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, one step at a time.

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 the client chooses, the selected option will show some of the fields. Luckily we can set multiple actions within one field rule. We will set this field rule as follows:

Rules for tea

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.

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:

Field rules 1
Field rules 2
Field rules 3
Field rules 4
Field rules 5

You can assign more conditions to the same rule. To add an extra condition, click on the gray plus sign and a new line will appear. Set up the new condition and press Add when done.

Add extra condition

Payments

In this section, we have assigned the prices of the form’s products, a coupon box for discounts, and the payment processor. To start with, go to the Form EditorE-commerce section and select the payment gateway you want to use.

1. In this demo, we have selected the PayPal payment gateway. You can select and use as many payment gateways as you desire. Learn more about our PayPal order form creator and how it can fit your business model.

E-commerce

2. On each choice field, we have assigned the necessary prices to the products tea, coffee, and all additional extras that come with them. Here is a detailed guide on how to assign prices.

Assign values

3. In the Payment Summary, we have set the calculation formulas of the products by the requested quantity.

Products section

4. You can also add a Coupon field and assign coupon codes to your order form, depending on your needs. We have added two coupon codes to this form. Users can assign one of the codes and receive a discount.

Coupon codes

5. In Notifications you can establish an email template that can be sent only after the payment is completed.

And this concludes our guide to creating a complex order form. Pretty easy right? Even though it might seem that a lot of settings are required, with 123 Form Builder, creating complex forms is a piece of cake (that goes pretty well with some tea or coffee).


Related articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?