{"id":35453,"date":"2019-09-16T19:40:02","date_gmt":"2019-09-16T19:40:02","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=35453"},"modified":"2023-11-28T11:28:50","modified_gmt":"2023-11-28T11:28:50","slug":"how-to-create-a-complex-order-form","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-create-a-complex-order-form\/","title":{"rendered":"How to create a complex order form?"},"content":{"rendered":"\n

Creating a complex order form<\/a> with payment integration using our order form generator<\/a> may initially seem a bit tricky. This article will guide you through every step, from adding the first field to having happy customers and money in your account.<\/p>\n\n\n\n

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

We will divide this tutorial into three parts: Form Editor<\/b>, Field Rules,<\/b> and Payments<\/b>.<\/p>\n\n\n\n

\n\n\n\n

Form Editor<\/h2>\n\n\n\n

1. In the Form Editor<\/b> of the form builder<\/a> we will divide the form into three parts: contact and delivery details<\/em>, menu and order confirmation<\/em>, and terms of agreement<\/em>. You can use divider fields in order to separate the section within your form. <\/p>\n\n\n\n

<\/p>\n\n\n\n

2. The contact and delivery details section will contain fields with no special functions, whatsoever.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Contact<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

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. We are going to use Product field<\/strong> to display the menu. In our example, we have added 2 products – Strawberry cake & Mouse cake. <\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Product<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

We’ve also added two questions that are related to the product that has been chosen by the respondents. Everything will make sense once you read the Field rules<\/strong> section. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Note:<\/strong> if according to your pricing plan, you do not have access to Product field, you can achieve something similar by using Multiple choice fields<\/strong>. Also, you can add image to both choices. <\/p>\n\n\n\n

\"Image<\/a><\/figure>\n\n\n\n

You just have to click on the image near the choice and upload the photos in the modal that has opened up. <\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Image<\/a><\/figure>\n\n\n\n

This is how it would look in the end when you have uploaded the images:<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Image<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

In the last section we will add a Signature<\/b> field, a Terms of service<\/b> field, and a Heading<\/b> as an instruction to clients who have coupon codes to use for discounts.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
\n\n\n\n

Field Rules<\/h2>\n\n\n\n

Now that’s about it with the Form Editor<\/b>, 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 respondent selects Strawberry cake, the field related to add-ons to the Strawberry cake appears. The same applies when they select Mouse cake. <\/p>\n\n\n\n

1. Go to\u00a0Rules<\/b> \u2192 Field Rules<\/b> and check Enable field rules<\/b>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Enable<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

2. Next, add one rule at a time. It’s best that you know precisely how you want to set your rules. <\/p>\n\n\n\n

3. We will need to add the first rule that is related to the Strawberry cake. If the strawberry cake is added in the cart by respondents (meaning its value is not 0), then we want to show the question related to the add-ons for the Strawberry cake. <\/p>\n\n\n\n

The rule will look like below: <\/p>\n\n\n\n

\"Rule\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Add a new rule and repeat the same condition, but this time replace strawberry cake<\/em> with mouse cake<\/em> in the first dropdown list.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

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<\/b> when done.<\/p>\n\n\n\n

<\/p>\n\n\n\n

This is how it would look like in Preview mode.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Once the Strawberry cake has been added to the cart, the additional question is displayed according the field rules that we have set up:<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Field<\/a><\/figure>\n\n\n\n
\n\n\n\n

Payments<\/h2>\n\n\n\n

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 Editor<\/b> \u2192 Payments<\/b> section and select the payment gateway you want to use.<\/p>\n\n\n\n

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<\/a> and how it can fit your business model.<\/p>\n\n\n

\n
\"PayPal<\/a><\/figure>\n<\/div>\n\n\n

2. On each choice field\/product field, we have assigned the necessary prices. You can check this after enabling the payment processor and going to View inventory. All products that have a price assigned will be displayed in this Order options modal. <\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

4. You can also add a Discount code<\/b> field and assign coupon codes<\/b><\/a> to your order form, depending on your needs. We have added three coupon codes to this form. Users can assign one of the codes and receive a discount.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

5. In Emails section<\/a><\/b> you can establish an email template that can be sent only after the payment is completed.<\/p>\n\n\n\n

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 123FormBuilder, creating complex forms is a piece of cake (that goes pretty well with some tea or coffee).<\/p>\n\n\n\n

If you’re running your business on Wix, WordPress, Shopify, or Weebly, this article<\/a> will guide you on how to create an order form<\/a> for each one of them using 123FormBuilder.<\/p>\n\n\n\n

\n\n\n\n

Related articles<\/b><\/p>\n\n\n\n