Build a custom order form for your website

Nina De la Cruz Nina De la Cruz 5 min read

If you’re selling goods or services online, you probably want to focus more on fulfilling your orders rather than the process of collecting them. That’s why having a website order form is essential for a growing business. It helps automate the workflow and optimize your efforts.

A good online order form must be able to:

  • Help customers easily place their orders whether they’re using desktop or mobile devices.
  • Provide you with sufficient information about the order to fulfill it quickly and efficiently.

With Getsitecontrol you’ll be able to create a form that meets both requirements within minutes even if you’re a non-techie.

This easy-to-use form builder allows for adding custom fields to collect customers’ contact details, information about the order, and any other data that’s important for you to process the request.

You can adjust the design of the form, adapt it for mobile, place the form on selected pages of your website, and receive instant email notifications about new orders.

In this post, we’ll go over each of these steps and include a few examples you can use for your business.

Here is how to create an online order form in Getsitecontrol

First, you need to create an account and connect Getsitecontrol to your website. If your website is on WordPress, just install the official plugin and it will handle the integration. Other platform users will need to copy and paste a code snippet to their sites before the closing </body> tag. Detailed instructions for each website platform are available here.

The entire process will take you less than a few minutes.

Step 1. Select a template

Now, let’s get to the part where we create an actual online order form. The fastest way to get started is by selecting a pre-designed template from our gallery. Once in the gallery, click on the template you like to see it in action and follow the prompts on the right-hand side to add it to your Getsitecontrol dashboard for further adjustment.

In this tutorial, we’ll be using the template above, but feel free to check the gallery for more examples.

Step 2. Adjust the fields of your order form

Once you add the form template to the dashboard, you can modify its copy, image, color theme, the number of pages, and more.

How to customize your online order form in Getsitecontrol

If you’re creating a multi-page form, switch between pages using the buttons in the bottom right corner to edit fields on each page.

For example, you may want to ask your customers which payment option will be convenient for them. You can add that question on Page 2 by adding a new field 👇

How to customize online order form on your website using Getsitecontrol

Once you’re done editing your online order form, hit Save & close – it will instantly go live on every page of your website. All submitted orders will be saved and stored right in your Getsitecontrol account. You will be able to view them directly in the dashboard or download them in bulk as a spreadsheet file.

To receive instant email notifications about new orders, open the Notifications tab and check the box “Enable email notifications”.

Below, we’ll show you how to fine-tune your online order form by using the remaining tabs in the Getsitecontrol dashboard.

How to make the most out of your website order form

As we mentioned at the beginning of the article, a good online order form should serve two purposes: make your customer experience smooth and optimize the order collection process for you. Here are some tips to help you achieve that.

Place the form on selected pages

Using the Targeting tab, you can select on which pages to display (or not to display) the order form. This might be reasonable if your website has multiple pages and on some of them – such as About, Contact us, F.A.Q. or even Home – an online order form just wouldn’t make much sense.

Another reason you might want to use the Targeting feature is to create custom forms for different product or service categories displayed on separate pages. For instance, if you sell cakes and cupcakes on different pages of your website, you may want to have different order forms as well.

Note that if you need to create several similarly designed forms, instead of building each one from scratch, you can use the Clone feature.

If you’re using social media platforms like Instagram for selling your products, it might be more convenient to link directly to your online order form from your Bio. This way, customers will be able to place orders right there, without having to go to your website.

To implement this tactic, you’ll need Getform — an app to help you create custom online forms and link to them from social media, email, or messenger.

Paste the link to the order form in your Instagram bio, WhatsApp status, Facebook page description — or any other platform. Once clicked, the link will launch the form in a new window where the customers will be able to fill it out.

Make sure the form looks good on mobile

The number of purchases made on mobile has approached almost 50% of all ecommerce sales, so you want to be confident your online order form is easy to find and fill out on smaller screens. That’s why we always suggest checking the mobile tab when adjusting the form appearance and changing the size and spacing if needed.

How to make sure your online order form looks good on mobile screens

For example, if you see that the image you’ve placed on the form takes too much space, you can remove or replace it. In this case, the desktop version of your order form will remain unchanged.

Minimize the number of fields

Having as few fields as possible is a well-known rule for any form because nobody has the patience to deal with endless questionnaires. However, for some businesses, it’s really hard to avoid additional fields – especially when we’re talking about custom orders.

Whenever possible, we encourage you to use dropdown menus and checkboxes with pre-filled information.

Your customers will appreciate it because of the speed and convenience. Meanwhile, you’ll avoid misconceptions and typos in your orders.

Consider displaying ETA after the form is submitted

It’s always nice to set clear expectations for your customers and remind them about what happens after they fill out the form. If there’s not enough space left on the form to add a description or a note, you can use an Autoresponder feature or create a submission success page.

Thank you for placing your order message

A submission success page is a brief message displayed on the widget after the form is submitted. You may want to include additional information about the processing time, provide your contacts, or even suggest further actions – like visiting your blog or following your social media page.

An autoresponder is another handy feature that allows you to send instant automated emails to everyone who fills out the form. You can set an autoresponder up on the Notifications tab of the dashboard and use it with or instead of the second screen.

Connect your online order form with the business software you use

Finally, you should know that Getsitecontrol integrates with Zapier which enables you to build connections with over 1000+ cloud apps. Thus, you can create integrations with CRM tools of your choice, payment software, or helpdesk.

Integrations come in handy because they allow for quickly automating some of your tasks.

For instance, Invoiceberry, an online invoicing solution, connects to Getsitecontrol via Zapier and enables you to automatically create a new expense or a new client whenever you receive a new online order form submission.

Check out other integrations available for Getsitecontrol in Zapier library if you’re looking for automating the process even more.

Nina De la Cruz is a content strategist at Getsitecontrol. She is passionate about helping small and medium ecommerce brands achieve sustainable growth through email marketing.

You’re reading Getsitecontrol usecase collection where we talk about the best practices for using website popups. This usecase is a part of Request forms section.

Get the print version

Download a PDF version of our use case for easier offline reading and sharing with coworkers.

Download PDF