How To Create A Simple E-commerce Form With Gravity Forms

Transcript:

Hey everybody, it’s Christina Hawkins and it has been so crazy for GlobalSpex and for my customers, so I thought I’d do is see if I can help folks out.

I have done a few order forms for some people and people trying to think outside the box, so think, well deliveries and pickups, but I thought maybe if we can help out those that are struggling a little bit with phone calls, emails back and forth between customers to set this stuff up.

So, what if we created a very simple form that you could probably update whenever you feel like it with a new product or a new series of products that you would like on the order form. This is super simple, basic order form. This is not a full on eCommerce store with a cart and a checkout page on. It’s a form, you hit submit and it goes to PayPal. That I can do in another video of how to create a super simple eCommerce using WordPress and WooCommerce.

In this case, I’m just going to create a very simple form as you can see here. Just add your name, phone, email, billing, pickup or delivery, choosing, whichever kind of product that you like. Again, this can be changed. Throwing in some sales tax and a final total. When you hit submit, it sends to PayPal and you pay on PayPal. The customer gets notified. You get notified and you get paid.

One of the differences about an order form at this point is we’re going to connect this to PayPal. We don’t want to have a form where you are putting … you’re allowing your customers to put in their credit card, their expiration, all that information just on any form that gets emailed to you. That’s a super no, no. Bad idea. Even if your website has been encrypted, which regardless of what we’re doing at this point, you need to make sure you have encryption on your website. We want to make sure that that credit card information is being sent directly to your merchant. That could be Stripe, PayPal, whoever it is.

For this instance, we’re going to be connecting it to PayPal because that is the easiest way. Most people have PayPal accounts. If you don’t, you’re able to quickly create one, but it’s also part of the pro version of Gravity Form. So, you can get the free version of Gravity Forms where you can … all the things that I’m showing you now you can do except connecting it to PayPal. So, to get this other advanced level of connecting it to PayPal, you would need the … I think it’s $159 pro version. You can still create order forms, you just cannot collect credit card information on a basic form like this. Again, do not allow people to put their credit card information on this form unless you’ve connected it through some kind of Stripe, Square, PayPal, whatever merchant you’re using.

Before we get started, there’s a few things you need to have in place. The first is a WordPress website. This is specifically for people with WordPress sites. The second, in this case, I’m using Gravity Forms. So, you can go to gravityforms.com. There is a basic license of $59 which again I mentioned earlier you can use or the $159 pro-license and again this is per year you would pay. This gives you the ability to use Square or PayPal. What I’m doing at this point is using PayPal. The other thing you’re going to need is a PayPal account. Those three things, WordPress, Gravity Forms and PayPal.

Now, I’m going to assume at this point you know how to install plugins. So, after you’ve installed Gravity Forms, the next thing we need to do is turn on the PayPal admin. To get to your add on, your PayPal add-on, come over in the forms and you select the add on section. Scroll down and it should be about halfway down, a little further. So this is just the standard version. All this will do is allow somebody to pay with their PayPal account. They click send now and it sends them over to PayPal to log in and pay.

So, we’re going ahead and click install on this. Go ahead and activate it. Now, a PayPal option over here. So, I can update, confirm my PayPal setting. So inside PayPal, we’ll need to make sure that we’ve turned a few things on. So, I’m going to just confirm this. I’ll walk you through this in a moment. We’re going to copy paste this inside PayPal. So, let’s do that really quick.

After you’ve logged into PayPal, first you want to log in with your email and your password, come back over in here and navigate to your IP and settings page. If you just click this, it should just go straight to that page. I can now … it’s already turned on in my case. I can edit the settings here. I can receive IPN message, which is enabled. So, that means that when somebody orders, I will get a message back that an order has been completed, and it’ll get shown as a completed order and the notification gets sent out. So, this is an important step.

So, back over in here. I want to copy paste this little link here and stick this right here. Obviously, I’m using this for something else, but I would put that, copy paste this notification inside here, receive IPNs, and hit save. So, once that’s done, I hit update settings and now we’re good on that.

Let’s think about a situation where a form like this might be helpful. Now, I’ve built a couple of forms for some local businesses in the Houston area that needed to spin up a quick way of getting the word out that you can order certain things and they will deliver or pick up. So, this is where this is coming from. Now, I’ve seen a few other companies that are needing a little bit of help. One of them I should say is a local garden center. They’re throwing things on Facebook going, “Hey, you can order and we’ll have it ready for you to pick up so you can order different gift baskets that they’ve already prepared with all the different flowers in, some fertilizers, a specific pickings of different plants that going together in a single container look really, really nice.”

So, you can either do that or again, another idea was providing all the different flowers that you can buy. Now granted, this is a simple form. This is not meant to be a full blown eCommerce. I recommend limiting it to maybe about three to five products and that people … This is again, were just spinning this up so you can get some sales. Now, what we’ll do is we’ll start clean. Let’s just assume that we’re going to create a form where people can order different baskets of prepared plants. So, let’s get started.

I’m going to add a new form. Give it a title so you can find it later. You could put a description. It’s not necessary. Sometimes you’ve got some WordPress websites that will show the description, but in this case, we’ll leave it alone as the form title. Now, when you come into a brand new form, this is essentially what it looks like on Gravity Forms. A little bit of hints on how to drag things over on the right over into the left, you can edit the fields. I’ll show you how to do that. Arrange them up and down and of course save your form.

Now, there’s other areas that we’ll get into in terms of the settings themselves, but for now, we’re just going to start creating the form. Now, there’s standard, advanced post and pricing fields. In this case, we’re going to just start off with the beginning level. We just need a name, so click it and we drag it in. I do need their phone. I’m going to request their email address, so I need basic contact information. Now, because this is going to be a … something that we’re going to bill people for, I’m going to request their billing address. Now, once I click inside this, I can add billing address here. Super basic right now. We’re just getting their billing address.

The next thing is I need to put together a product. So, let’s just say you can choose one of three products and I’m going to click product and click this down here. Now, I can have one product. So, let’s call this basket one single product. I can choose to have … I can order more than one so I can display a quantity. I can put in my price in here. Let’s just say this is $49. I do not want to make this required, so let’s actually go back up here. A little bit of reminder on that.

We want to make sure certain things are absolutely required, so I’m going to hit required on the phone, their email, their name and absolutely we need to make sure that the billing address is required. So, you could in this case, for the billing address, I do like making sure it’s … if you’re in the United States, I’m assuming you are, I would make sure that the address type is United States because this will automatically fill in different … the state as well. So right now, I’m in Texas. So, for somebody that’s in Texas, most of my customers assuming are in Texas, I’m going to make sure the default state is Texas. I don’t want to have to make them scroll through all the way to the bottom for Texas.

Okay, so back to our basket here. We can have a basket. We can give this a bit of a description. Let’s see. Lovely care package and basket filled with, and let’s say we’ll give it a description here.

Single product. Now, I have the option, I could create different options for this. Let’s just say I have the care plan basket. It’s going to flip over. Now, let’s say my first care plan basket might be … we’re going to add let’s say the basic. So, this one’s going to be the $49 one. Let’s just say the next version of this care plan basket might include two bouquets. Let’s say one bouquet of lilies. That is going to be $55, if I can put that in right, so five.

The third option would include all and one … Let’s see, we had a bouquet of lilies include all in one … let’s say one extra candle. We’ll give this maybe $60, okay? Now, I would go ahead and hit update here because this is not updating as you go by the way. So, update. So now we’ve got their name, their phone, email, billing and a care plan basket options. Now, we need to, if you’re in Texas, we’ve got some taxes and we’ve got ability to … I want to see a total at this point.

Now, back in the pricing fields, I can put in my total here. So, I’m going to hit update one more time. Now, let’s just take a look and see what our form looks like. There’s our name, our phone, email, billing address. Now I can choose the basic, which is $49 bouquet is 59. Now, if I hit submit, this is preview. This will go to PayPal at this point, but not yet though because we still have to fill that part out. We’ve set up the PayPal account but we haven’t set up PayPal with this specific form.

Now, I mentioned tax. This is where it gets a little complicated because now we need to put in a calculator. To add tax, I know for myself as a user, I like to see how much tax I’m going to be charged. So, we’re going to pull over in here the product. Actually, I’m going to move the total down in here. So, we’re going to actually name this Texas sales tax. Let’s move this up here again. This is going to be a calculation when you flip this. I’m going to disable the quantity field. So, what we’re going to do is we’re going to calculate how much that care plan basket is multiplied by 0.0825 which is the Texas sales tax. So, always check with your bookkeeper, your CPA, what your taxes are, what you’re responsible for, but I’m just assuming that there might be tax in this case.

I’m going to insert a merge tag, meaning I’m going to pull in this care plan basket, this specific one, and I’m going to multiply this by 0.0825. I’m going to validate the formula and it appears to be valid and quickly hit update. Now, I want to see what my form is looking like so far. So because I’ve chosen the basic, which I know is 49, what I say it was? Let’s go back in here. All right. That’s actually a pretty good idea. Let’s go back to this really quick. We’re going to go ahead and add 49.99 in here, so that people can see what they are choosing.

So that way we can now see what this looks like from a user’s perspective. I know how much it’s going to cost me. So basic and include lilies. All right. So, I’m going to have the $60 is now 4.95. If I come up here, $55 changes that. If it’s a $49, it’s $4.04 is my price and it should total that here. So, that’s a pretty easy form to create.

I do want to show you a little bit more. We’re going to maybe throw in a little bit of information. So, if you put in here an HTML tag, actually let’s not do that. Let’s put a section. We’re going to create a little section and we’re going to call this order details and update. So now, this preview has no style sheet whatsoever. It’s all based on no style or design here at all. Once you put this form on your WordPress site, it’s going to call in the design of your theme. Your themes design, it’s going to use that in order to make this look good. Now, I’m going to hit refresh.

So, now we’ve split this out. So, from a user’s perspective, I can now see I’ve finished this part and I’m going to add … I’m now going into the order detail section. All right. Let’s assume that’s about it. I’ve just got the three products here and I know what my … Ooh, I need to change that because we don’t want people to call it product name. I thought I’d change that. I guess I didn’t. There we go. Texas sales tax, $4.04 53-

Let’s get real fancy, and let’s see if we can set up a that you can decide if you’re going to set up a delivery or pickup. Now, I’m going to go ahead and create another section here and I’m going to call this delivery or pickup. I’m just giving it a section. Now, I want to drop down. Choose pickup or delivery. I would like it delivered or I would like to pick it up. Here we go. Now, this is a required field. It’s important that I know that. We’ve given somebody the choice of delivery or pickup. Now, we need to give him a little bit information about what those two are, but I don’t want to completely … I don’t want this form to be so huge. So, what we’re going to introduce now are conditionals.

We have the choice of pickup or delivery. So, I’m going to throw in here, it’s just content and I’m going to say for pickups. For pickups …. I’ve got pickup or delivery. So now, don’t forget, I’ve got a billing address, but if it’s delivery, I need to know where you want me to deliver. It could be a completely different address. So, I’m going to put in here another address and this is going to be the delivery address. Again, I like to choose this and because again, I’m in Texas, I’m going to make sure Texas is primary one. This would be required. I’m going to hit update.

So right now, our address is looking a little busy, right? So for pickups, you can do this, here’s your delivery and it gets a little confusing. Let’s go back. One thing I noticed about choosing this is I want to put a little bit more oomph on here so it’s visible enough. Pickups. So, I want to put this as pretty big. I’m going to give it an h3 tag. Again, it’s really dependent on your own style. So this way we can just quickly see what that looks like. So, I’ve got a little bit of information there, but I’m still not happy with this.

I’m going to create some conditionals. Now for pickups, I only want to have this section show if they’ve chosen the pickup option. So, I’m going to hit advanced. I’m going to enable this conditional logic and I want to show choose pickup or deliver. I only want this to show if they’ve chosen pickup. Same thing with delivery. Advanced, enable conditional logic, show pickup or delivery and in this case delivery. So, I hit update.

Well, one thing I’m noticing too here, so if I click up delivery, it’s here, if I click up here. Now, what I found is that the best thing to do in this case, I like to give people the option select delivery or pickup. So, it’s pretty obvious they have to make some kind of choice. So, this is a required field. So, let’s go back over here. We’ll hit refresh.

Now, we clean this up. Now, I can choose delivery. So, I want to put the delivery address and I can choose pickup and that’s going to give me a little bit information here. I would obviously recommend putting the address to where to pick up. We’ve had orders in here. Now, I can choose … I want this and I’ll hit submit, but we’re still not done. I still need to connect this to PayPal.

Done this for the whole Gravity Form system, but now we need to do it for this specific form. How you do that is you go into the PayPal feeds and you’re going to create a new PayPal fee, and we’re just going to call this care package or let’s call it gift baskets. We’re going to put your customer … whatever your PayPal address is, company.com and you can either put it in test or production. This is going to be a product, so it should refresh in a moment. I want it to be the form total, which is that very last one. I certainly don’t want Texas sales tax and I don’t want care plan, so I want the form total here. It should pretty quickly tie this in together, but we’re still going to fill this in here. We’ve got address. I’m going to connect these two, and this is the billing address. This is why we have this set up. City. We’ll connect the state. We’ll connect the ZIP. We’ll connect the country and those two are done.

Now, if you want a logo on your receipts or on your thank you page, you can put that here. The image URL, where your logo is. Typically, you go into your media and you’ll just copy paste the original URL of what your logo is. If you have a page, if you cancel, if I don’t want this, it’ll go to a special page. You could create cancel, sorry to see that you cancelled. Please call us if you have any questions or concerns, some kind of cancel page. In this case, because I’m putting in the shipping address or the delivery address, I don’t really need to include shipping information on the PayPal side, and they can include a note if they’d like. That’s one other area you can consider on your form is special delivery, notice of where would you like us to drop the package if you’re not around. Let’s hit update.

Just a reminder, this email should be the email associated with your PayPal account. So, don’t use the email that you’re using for communicating, but this is truly basically your login to your PayPal. Next steps, we need to set up notifications.

This is the notification to you as the business owner that somebody has created, filled out your form and paid for your product, but you also want to give something to somebody that’s ordered kind of a receipt. So, usually we’ve got an admin notification is already here, but I like to include a little bit more information, and we’re going to get a little fancy with this part too.

Now, I don’t want this form to be submitted as soon as somebody hits submit. I want to make sure that this is, I’m only going to get notified if a payment has been completed. It’s gone to PayPal, they’ve paid and it spun back around and an order has been completed. Now, the send to email is probably whatever orders email that you are using to collect these orders. Again, this is coming from your website, so you could use your company name here, and then again the from email could just be orders as well. You could do the reply email, could be to maybe orders or your bookkeeper or something whatever and say, “Here, Joe, bookkeeper, this is an order and they can put that into your system.” That’s just an idea.

I do recommend changing this, so this is a new order. I would personally put in the name of the person that’s made the order, so you can distinguish each one of these from all the orders that come in. All fields is literally going to fill in all the fields except credit card fields, so whatever they ordered, whatever gift basket, whatever product they ordered, it’s going to fill all that in. It’s going to show the subtotal. It’s going to show your tax as well as the total. All those fields get completed. The billing address, if they submitted delivery address, if they requested pickup, it’ll show that as well. So, this is that.

Now, all right, let’s go hit update notification. Now, let’s get a little fancy. This is going to be notifications to the customer, but we want two notifications. One is going to go to somebody that’s ordered a delivery and one is going to go to the one that’s ordered pickup. So, we’re going to do the delivery first. So, that’s a customer notification. Just notification and this is going to be delivery.

Again, payment has been completed because I don’t want them to assume when you hit that submit button it goes to PayPal. If they cancel, then that form would get submitted regardless. So, we don’t want them to assume that once they hit that submit, that that’s all that’s needed. We have to make sure that the only time they get this receipt is after they’ve paid. So, payment has been completed. Now, I want to make sure that this is getting sent to the email address. So, we select a field within the form. We’re going to select email. The from could be company. Again, your company name. This could be the [email protected] Again, we’re going to up reply to order.com. You could put any blind carbon copies if you’d like. This could be order receipt from and you could put maybe … let’s see or you could just put company name in here. You could put company here.

You could actually, if you wanted, you could put another field in here of exactly what they ordered, something like that. Again, I would recommend putting all the fields, all submitted fields, in here, but the reason why I’m breaking this out is I want them to get only the information that they should need for delivery because this is the delivery notification. So, we’re going to put, Hello Jean, thank you for your order. You could put whatever information there is about delivery. You have … I would even repeat what you’ve said in the prior notification on the form. So, let’s just save a little bit of time. You can mention, we will call to confirm your delivery. Whatever information you need. Again, all field is going to show up. Anything that they filled out will show up as a receipt.

Now, one thing that you can do and again back to conditionals, if I hit enable conditional, I only want to send this notification if they’ve chosen delivery. So, I hit save notification. So, now I know this is only going to get sent to somebody that’s requested delivery. Let’s go back into notifications. I can duplicate this exact same thing so I don’t have to fill all that stuff in again. Hit edit and now I’m going to save. This one is for the one for pickup. Same thing only when completed, email, company, orders, what they ordered and now I can change this to you have requested pick up.

Obviously, I would make this a little bit fancier. The next day, orders made before 3:00 p.m. are ready same day. Our address is 123 Main Street, XY Sugarland, Texas, 77479. All right. Please know we are closed Saturdays and Sundays. There we go. All fields, same information, but don’t forget to change the conditional logic because we duplicated this. It’s pulling in the same data as before. So, now we’re going to pick up and update. So, little bit fancier. That person’s going to get a delivery or a pickup notification and you just get notified of which ones which.

Once all of that is done, you can come in here in entries and of course there’s been no entries yet. This is where you’re going to see all of your completed orders. One thing people miss is they see all of this, but they don’t know when or if it was completed. So, what I recommend is hitting this little tool. I like to come down here and put in the entry date of the day it was completed. You can also put in payment status. So, it’ll show process, canceled, completed, or failed. So, you’ll be able to see from here quickly if it worked or an order went through and was paid. You’ll also get your notification as well.

So, one last step in all this is taking that form and putting it onto a webpage. Now, in this case, I personally use Beaver Builder, but if you’ve got Elementor or really any kind of theme that you’re using, you should be able to just embed the form. In this case, I’m just going to use the Gutenberg blocks and just to show you how easy it is to take that form that you spent some time on and have it display on a website.

Now here I’m going to use … now Gravity Form does have its own block, so I can choose the embedded Gravity Form. I’m going to hit the my new order form, which is the form that I just created. I’m going to hit publish, publish again. Now, let’s go take a look and see what it looks like. There’s my form with the style that we’ve had and just disregard this because this is basically my testing site. So, you can see it’s picked up the style of the theme that I have installed currently. Looks like I would probably need to adjust a few things, but I just wanted to show you how that would look using Gutenberg blocks if … and Beaver Builder, it’s same thing as a module. You pull that in, you would choose the theme, or you can choose one of the embed short codes that Gravity Forms has.

So, I hope that’s been super helpful for you. I hope this gets you something out there quickly so that you can keep running the business and get some of your systems, your processes in place. You’re not constantly on the phone taking orders for things that could be done on our website. Thanks so much and let me know in the comments if you have any other questions about Gravity Forms or eCommerce in general. Hopefully, I can do one on WooCommerce, but I’d love to hear from you. Thanks so much and bye.

Posted in

Christina Hawkins

Since 1999, Christina has been designing and building exceptional websites. With many years of experience in creating thousands of websites, she understands the need for continuing education in her field and, therefore, is constantly learning and teaching others about internet marketing and digital processes. Christina has honed her digital marketing and graphic design skills so that she can help B2B industries get their message out to their target audience in the right way. In addition to her ability as a digital marketer, Christina serves as a coach and mentor with WPElevation to other digital marketing freelancers, helping them grow their businesses. She is a sponsor and co-leader of Houston's WordPress Meetup. Recently, she spear-headed the next Houston WordCamp 2020 as its coordinator after a 10 year hiatus and became the Houston Interactive Marketing Association Director of Technology.

Leave a Comment