Using Gravity Forms as a Restaurant Online Ordering System

I get asked a lot about which eCommerce solution is the right fit for a project. Many times, a full eCommerce solution isn’t necessary to accept payments online. If you need a complex ordering form, and you don’t tools like customer accounts, saved payment profiles, etc, then an eCommerce plugin probably isn’t needed for your site.

One tool I recommend a lot for simple online transactions is Gravity Forms ($39+). While most people use it because it’s a great form builder, it’s also very useful for simple eCommerce, which we’ve written a tutorial on.

Gravity Forms can be a useful tool for a restaurant online ordering system since it has a lot of features that ordering forms will use:

• multi-page forms
• conditional logic
• scheduling the form (to only allow entries at certain hours)
• product fields (to determine cost)
• payment fields (to accept credit cards)

You can accept payments when your form is submitted by using the free Stripe add-on for Gravity Forms (I use Stripe for payment processing), or the developer license gives you several payment integrations with Gravity Forms for $199. Developer licenses also include the ability to accept coupons as part of your form, which can be really handy while accepting orders.

I was able to create a simple online ordering system for a pizza shop in about 50 minutes using Gravity Forms. WordPress was already installed, but this included installing Gravity Forms, installing add-ons, configuring all settings, creating my form, tying payments and notifications to the form, and adding it to my ordering page.

The first thing I needed to do after installing and configuring my plugins was to create my form. I had a few requirements I wanted to build into my form:

• the form would have pages for ordering the pizza, add-ons like beverages and garlic knots (mmmm), delivery information, and payment
• conditional logic would let me determine when to show options for toppings and whether the toppings were on half the pizza or the entire thing
• I only wanted my form available while the shop was open (available under form settings)
• I wanted to be able to add costs for the pizza size, toppings, and add-on items

Creating my form was the hardest thing and took the majority of my set up time. I had to insert my dividers for my form pages and determine my conditional logic. I also had to determine which items were “product” fields, and which were “options”, which can sometimes take experience to get right on the first try.

As a general rule of thumb, product fields are for major items in the order (in my case, my pizza & its size), while options are for add-on items that are tied to a product (in my case, the toppings were options for the small, medium, etc., pizza).

We have a bit more detail in our Gravity Forms eCommerce tutorial. You can also download my sample form by clicking here and clicking “Download” in the top right. You can then import this into Gravity Forms to use as a starting point.

Once you’ve created your ordering form, you’ll need to polish up your settings, confirmations, notifications, and embed it. These steps are all easier than form set up and take a lot less time 🙂 .

I like to customize my confirmations to thank the customer and show some additional information, which can be done under Form > Confirmations.

Instead of saying “We’ve received your request,” we can add some more detail, like a thank you as well as confirmation of some form fields:

Clicking the button to the right of the message field makes it easy to insert information from the form itself in the confirmation message to be displayed after it’s submitted.

Now we’ll need to make sure that the payment fields we added to our form actually do something. If you’re using the free Stripe add-on, your payment setup will look like this, but it’s pretty similar for any payment integration available with the developer license.

Make sure you’ve entered your payment gateway credentials under the settings (API keys) so that you can actually process payments, and then create a payment feed.

Simply map each required payment field to the correct field in your form, and save your payment feed.

Now Gravity Forms will give Stripe the information it needs to process the payment.

We’re almost done! Now we’ve got to notify ourselves when our orders are placed so we can make sure they’re prepared. Gravity Forms will automatically notify your site’s admin email address, but you can customize your notification or send it to multiple email addresses under your form > notifications:

If your accepting orders for something more time-sensitive like pizza, you may also want faster notification method. You can send yourself text message alerts if you have a developer license by using the Twilio Add-on.

This requires a Twilio account to send SMS messages from your site to your phone, but you can customize the message you’ve sent to yourself so you can get some basic details on the order and be prompted to check the full details from your site admin.

Twilio notifications are easy to set up once you’ve added your Twilio credentials, and you can determine when notifications will be sent. In my case, I’m only going to send myself a message if the order is for now and not some time in the future.

Now that I’ve finished with form setup, payment setup, notifications, and confirmations, I just have to add my form to my ordering page. When I do, my multi-page setup and conditional logic will make it easy to order.

Customers can create their pizzas:

Then select any additional items for the order:

During each step, the order total is calculated. Once they’ve added all items to the order, I’ll ask for delivery and billing information:

And then finally get payment details:

My form is a bit ugly since I’m using the default Twenty Twelve theme, but many themes do have pre-built styles for Gravity Forms to make your forms blend in with your site. If you’ve got the help of a frontend developer, you can also customize the way your form inputs appear.

Gravity Forms makes it easy to create a simple online ordering system, as you can create complex ordering forms and easily accept payments. You can also view all form entries and customize your notifications for when a form is submitted.

Customers won’t be able to create profiles or save payment details, so this isn’t a complete store management solution. Hoever, it is simpler to set up than a full-blown eCommerce plugin, and has the benefit of being able to create really flexible and customizable order forms.

Don’t forget that you can download my sample form here by clicking “Download” in the top right. You can also get started with your own Gravity Forms ($39+) online ordering forms:

---

Cover Photo Credit: Icons8