How to create a food delivery order system

Learn step by step how you can create a food delivery quote calculator on your site.

Why should you consider having an order system on your website?

An order system for your website makes it easier for your customers to order your products online, which increases conversion rates (% of purchases vs visitors). By increasing conversion rates you increase your sales; more money for you.

Not only will an online order form bring in more business, but it also saves you time and hassle. By automating your ordering online, you will have fewer calls, so you can spend more time on running your business. These forms will never allow you to miss orders.

Moreover, Convertcalculator allows you to accept payments. Being this a unique and streamline online ordering process.

Before we get started

Make sure you have an account on ConvertCalculator. If you haven't set one up, do it now at https://www.convertcalculator.co. Click on "+ New calculator" and select "Start from scratch" and we are ready to begin.

List of products

In this tutorial, we are going to pretend we are a fast-food delivery place and we want to create an online order system for our website. We have the following products:

• Mains:
  • Hamburger: $5.5 per piece
  • Hamburger menu: $8.5 per piece
  • Hotdog: $4 per piece
  • Hotdog menu: $4.5 per piece
• Extras:
  • Fries: $3 per portion
  • Sweet potato fries: $ per portion
• Desserts:
  • Apple pie: $3 per piece
  • Chocolate ice-cream: $2.5 per piece

The delivery fee will be $3.5.

Create order lists

Go ahead and click the "+" icon in the top right to see an overview of all the available elements for your calculator. Select the "Order List" question by clicking on it or dragging it into the canvas. Now you need to:

1. Change the title of the question to "Mains”.
2. Add "$" as prefix and "per piece" as postfix.
3. Add all the foods as "items" (there are three items added which you can edit).

After that, press “Done”, and create two more “Order list” in the same way for: “Extras” and “Desserts”.

Capturing customer details

Now let's capture customer details.After clicking “+”, go to “Advanced questions” and set up these three:

1. Text question: for customer’s name
2. Text question: for customer’s phone number
3. Email question: for customer’s e-mail.

Add a formula

We just need one formula in our calculator. Go ahead and add a formula to the bottom of the canvas, change the title to "Total" and add "$" as the prefix. In the description write “Including $ 3.50 delivery fee”.

The equation will be:

The calculator will add the totals of “Mains”, “Extras”, “Desserts” and delivery fee.

Creating the Call to Action

Ok, we are almost done! You need the customer to finish the purchase, so we will create a call to action to order securely. Go ahead and add a “Button” (via “+”) via “Elements”. After that, fill out the following fields:

1. “Button Text”: Order securely
2. Toggle the switch: “Use as Form Submission”
3. “From response text”: Submitted successfully
4. Toggle the switch: “E-mail submission to you”
5. “Send to emails”: e-mail address where you want to receive orders.
6. “E-mail subject”: New order
7. “E-mail message”: Fill with whatever you want to receive when you have a new customer order.

NB. If you want to also capture payments, you can toggle the switch “Checkout (Payments)” and connect with Stripe to let your customers pay directly via the calculator.

Other options

When creating the “Button” on the last step, you might have noticed that there are more “Elements” that you can add to your calculator. Those elements can improve the appearance, layout and general content of the calculator. These elements are the following:

• Title: Write down your company name or whatever you consider necessary.
• Text: Add arbitrary copy anywhere in the calculator canvas.
• Image: Upload your company logo or any image. You can change the margin, width, and alignment to improve the appearance
• Divider: Add a visual divider with the color and design you want.
• Container: Create an advanced layout with columns.
• View break: If you want, you can break your calculator in multiple pages or views.

In this tutorial, we will add a “Container element” to split our questions up in a two-column layout.

Designing the calculator

Great! We are almost done! If you want to adapt your calculator with your website design, this is possible! Go to the top right and click on the “cogs icon (“Adjust calculator settings”). Here you can change the following properties:

• Color: Select the color that best suits your site or your preferences. It will change buttons and call of action colors.
• Theme: If you want to adapt the calculator to your website’s styles as much as possible, choose “None”. Otherwise, choose the theme that looks good for you.
• Number formatting: Choose the number formatting of your preference.
• System of measurement: Choose how you want to calculate distances (feet or meters). This is used in the Place and Places question.
• Language: Translate the calculator content to your language of choice.

Continuing with the design topic, the button “Container” from “Elements” enables you to select background colors, add borders, align items and more.

Congratulations, you made it! Now you and your customers will enjoy a joyful food delivery order process using Convertcalculator.