Build a custom order form for your website

Nina De la Cruz Nina De la Cruz 7 min read

If you sell goods or services online, your focus should be on fulfilling orders — not manually processing them.

That’s why having an order form on your website is essential.

A well-designed online order form should:

  • Make it easy for customers to place orders.
  • Streamline order collection and organization.
  • Automate order confirmation emails.

In this tutorial, we’ll show you how to create a simple online order form for your website using this free template 👇


To create the form, we’ll be using Getsitecontrol — an easy-to-use email marketing suite and a form builder.

The entire process requires no technical knowledge. You can adjust the design of the form, place it on selected pages of your website, receive instant email notifications about new orders, and send automated email confirmations to your customers.

Here is how to create an online order form in Getsitecontrol

Before starting, click on the template featured above to activate the preview mode. You’ll see the template in action and get a better idea of how it will look when minimized and expanded. Then proceed to Get this template → on the right side.

If you haven’t signed up by this moment, you’ll be prompted to create an account with Getsitecontrol. Then, the template will be automatically opened in editing mode.

Order form opened in the Getsitecontrol widget editor

In the following steps, you’ll see how to adjust the form appearance, change fields, and place the form on your website.

Step 1. Edit field text

To change any piece of text on the form, just click on it and proceed to edit. You can edit the title, field labels, placeholder text, and dropdown menu options to match your needs.

Field editing process

Besides editing and deleting the existing fields, you can add new fields of various types, including text fields, phone number fields, and checkboxes. For this purpose, use the + icon under the existing fields or the +Add field option on the right.

How to add new fields to an order form in Getsitecontrol

Step 2. Set up a submission confirmation message

Once a customer fills out your form, you can display a submission confirmation message and outline the next steps. If you’re using the same template, open the Pages menu and switch to page-2. If you’re using a different template or creating a form from scratch, you can add a new page manually.

Form submission success page

Repeat the steps from above to edit the text on that page. Note that the ‘Close’ button is already set up to close the form, so there’s no need for you to change anything at this point.

Message example for an order form submission success page

Step 3. Adjust the color scheme and form style (optional)

If you’d like to change the color scheme of the form, select a different font, or view different form styles, head over to the Theme menu.

Adjusting color theme and style of a form in Getsitecontrol

If you’re on a Pro plan, you can also use the built-in CSS editor to fine-tune the appearance of the form more precisely.

Step 4. Select where to display the form on the website

Once you’re finished with the design, select Continue → in the top right corner to move on to the Targeting tab.

By default, the order form will be visible on all pages of your website. If it works for you, leave the default settings unchanged. If you only want to display it on selected pages, type their URLs in the Include field.

Targeting settings in Getsitecontrol

Step 5. Get notified about new form submissions (optional)

Click through Continue → twice more to get to the Integrations tab and find the ‘Email notifications’ box. Type in your email address and a subject line if you want to get notified about form submissions.

Setting up notifications about form submissions

In this tab, you can also integrate the form with third-party apps, including email marketing services, CRMs, Google Sheets, and beyond.

Step 6. Activate the order form on your website

Once ready, click Save & close → to save the form and close the editor. Then follow the prompts to activate the form on the website.

Widget activations step in Getsitecontrol

If you have already connected Getsitecontrol to your website, the form will instantly go live.

All submitted orders will be saved and stored right in your Getsitecontrol account. You will be able to view them directly in the dashboard by selecting Responses on the widget card.

Responses button on the widget card

The submission report includes all the information provided by the visitor via the form fields, along with the data collected from their browser.

Form responses preview screen in Getsitecontrol

Step 7. Create an order confirmation email (optional)

With Getsitecontrol, you can send confirmation emails to customers after they place an order. To get started, select Set up automation on the widget card; then proceed to ‘Create new’.

Setting up an automation from the widget card

On the next screen, select ‘Send email’. This means, everyone who fills out the order form will receive an automated email from you – either immediately, or with a time delay of your choice.

Form submission automation builder screen

You’ll be able to design an email from scratch, but it’s much easier to use one of the templates. Click through the sections on the left to find a design that is most aligned with your brand, keeping in mind that you can fully customize it.

Email template gallery, pre-built in Getsitecontrol

The template you’ve selected will be automatically opened in a built-in email editor, so you can tailor it to your branding and add engagement elements like buttons, coupons, countdown timers, and more.

Getsitecontrol email editor

In the email, you can share your brand story, introduce the team, or feature your bestsellers. You can also use this opportunity to thank customers for placing the order, explain what happens next, and provide links for the following steps.

Button editing menu

💡 If you want to go the extra mile, use the dynamic text replacement feature and personalize your emails. For example, you can automatically insert customers’ names in the subject line and email body, mention the item options they ordered, or include other information they provided via the form.

Hit Save & close in the top right corner once you’re done designing the email, then close the automation builder. You’ll be able to see the performance statistics for the automation you’ve created directly in the Automations tab.

Automations screen in Getsitecontrol

Note that Automations are a premium feature, however, as a new user, you can send your first 2000 emails for free.

If you’re using social media platforms 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.

Such forms open as a fullscreen modal window, and this is what it looks like:

To implement this, you can use Getform — an app that allows you to create online forms and link to them directly from social media accounts, emails, or messengers.

Getform offers the same versatile form builder and email marketing feature set as Getsitecontrol. It also comes with a free, no-commitment plan.

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.

Final tips for optimizing your online order form

Creating an order form is just the first step, but optimizing it ensures a smooth experience for both you and your customers. Below are three key strategies to enhance your form’s efficiency.

1. Ensure a mobile-friendly experience

With nearly 50% of all ecommerce purchases happening on mobile, your order form must be easy to access and fill out on smaller screens. Before publishing, check the mobile preview mode to see if you need to adjust text size or spacing for better readability.

Widget mobile preview in Getsitecontrol

If your form has an image, make sure it doesn't take up excessive screen space, or make it invisible on mobile devices if necessary. Finally, test your form layout on mobile devices to save your customers from unnecessary scrolling. For example, you can create additional form pages and spread form fields between them instead of having all fields on the same page.

2. Simplify the form to increase completion rates

Customers are less likely to abandon a short, intuitive form. To improve completion rates, stick to the best practices:

  • Minimize the number of fields – only ask for essential information.
  • Use radio buttons and checkboxes instead of open text fields where possible.
  • Provide pre-filled options using dropdown menus.

By reducing friction, you make it easier for customers to place an order while preventing errors and incomplete submissions.

3. Automate order management with integrations

Automating order management helps eliminate manual tasks and speeds up processing.

With Getsitecontrol’s integrations, you can seamlessly connect your form to business tools like CRMs, Google Sheets, and invoicing apps. For example, sync your form with a CRM to store new customer details or link it with an invoicing app to generate receipts automatically.

With over 1,000 integrations available via Zapier, you can customize workflows to fit your business needs and ensure a smooth, efficient process.

Launch an order form on your website today

Add a custom order form to your website and start collecting orders effortlessly with Getsitecontrol. Customize the form fields, automate emails, and streamline your workflow — all with a free plan to get started.

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

Inline subscribe widget

Inline subscribe widget