WordPress has been my go-to tool for creating websites for my clients. But with so many plugins on the market, it’s hard to find out which ones are good and it can definitely get overwhelming. Thankfully, if you need a form (literally any kind of form) WPForms is always the go-to.
What and Who is WPForms
I think the first time I found these guys was because I needed a contact form for a client and WPForm has all the integrations you wanted in their free contact form plugin! I think the only thing that made me need to go to the premium version was that I needed to accept payments which is what we’ll be covering today.
Example Use-Case for an Order Form
Limitless needs to take pre-orders cause I don’t have the actual product yet. I know you can do this via woocommerce and just take order by letting people know these are pre-orders. But I thought it would be more fun to practice using skills that I could help my potential clients.
So, in this case study. Let’s try to create a Pre-Order Form that allows people to submit an order and pay for it with PayPal.
A Likkle Disclosure:
I have an affiliate account with WPForms. If you sign up via my links, I earn a small commission but this happens at no additional cost to you. So, if y’all could bless me with a couple sign ups that would be dope. But if you want to enter unbiased and not use my links that’s cool too. I just hope that I provided you with some helpful information that’ll help you build your empire! Feel free to hit me up if you have any questions, leave a comment down below or slide into my dms. Other than that keep killing it and thanks for your support!
– Dylan
How To Create an Order Form
WPForms make it super easy with a drag-and-drop form builder. They thought about everything that allows it to be mobile-friendly. And they got bare templates that if you didn’t want to read along my tutorial you could just click and set-up. But I know you’re here cause you like details. So, let’s go step-by-step to see how I got the Limitless Pre-Order Form Setup with WPForms in under 15 minutes!
Step One: Download and Install WPForms
The most obvious section is to get the plugin! If you’re a Web Design Freelancer like me I’d recommend getting a Plus plan or higher! If you know you’ll be working with more than 3-4 clients that want this feature than the best bang for your buck would be the Elite Plan which will run you a pretty penny of $300 USD/Year (So the financial entrepreneur would past this costs off onto your clients to ensure you can keep this plugin running).
- Purchase and Download The WPForms Plugin
- Recommended Plan: Elite (
Usually: $599USDNow: $239.60USD)
- Recommended Plan: Elite (
- Install the Plugin on your WordPress Website
- Dashboard –> Add New –> Choose File –> Install Now
- Get Excited We Startin Now!!!
Step Two: Create a Billing/Order Form
You’re all setup! So all we need to do is pick the forms we want to setup. For our setup with the Limitless Planner we want to accept pre-order payments. So the best selection would be the: Billing/Order form!
Usually right after you install you’ll get the button to start a new form, but in the off chance you close that up or need a refresh to do it again here’s how we get here.
All you gotta do is click:
WPForms –> Add New
It’ll take you to the template page and you can select:
Billing/Order Form
This will then show you a form with all the basics you need to setup an Order Form
Step Three: Modify The Fields You Need
The reason why I like WPForms is because of their templates. I don’t ever feel like there’s much I ever need to change. In this specific scenario with Limitless, I just want to change up the products. So this is how we fix that.
All you have to do is click the area you want to change. I’m clicking: “Available Items“
Then we switched up the “Field Options”.
- I renamed the label
- Checked off/Activated:
- Show price after the item labels
- Use Image Choices
- Adjusted the Items
- Item Title
- Item Price
- Add Photos
I know WPForms try to tell you to pre-format your photos so that they match up. But mans are a little lazy and I have nuff css code lying around so why not just add to the theme lol. (This is not best practice but ¯\_(ツ)_/¯ )
Step Four: Setup Your Emails
For pre-orders I’m assuming the main things we need is just to get:
- a confirmation email and to notify ourselves when one comes in.
- And confirmation to the quest
Thankfully, WPForms got us covered. They automatically setup a notification to our default admin email, so that’s what we’re gonna use for our own notification email.
Next up is we need to send the guest an email, like a pre-ordrder confirmation email. So what we need to do next is click “Add New Notification”
We want to make sure the email goes to our new purchaser so to get that done, all you need to click is the smart tags. What this does is it pulls the information from the form they just filled out and populates the fields we need dynamically!
Get all that stuff filled out then click save!
There’s a next section that has confirmation and that’s basically what the users see after they press submit. there’s not much I want to add so I’m prolly not going to add anything here.
Also there’s a marketing section but I didn’t purchase any plans for mail clients yet so we not gonna do that today.
Step Five: Add-on Payment and Tingz
Finally the whole purpose of this form is to make some moula! We’re trying to make some money out here so the thing that works the easiest for us is PayPal. WPForms integrates multiple payment options like Stripe and what not but I just like PayPal cause it’s what I’ve always used. So todo that, we need to install and activate the PayPal add-on.
Just go to Dashboard –> WPForms –> Addons –> PayPal Addon –> Install Addon –> Activate
If you got that going on then we got back to the form we we’re working on and input our details on the Payment Tab!
Congratulations! That’s everything there is to it. All we need to do now is just press save and make it live.
Step Six: Put The Form On The Site
Let’s make it live! I’m trying to transition out of using Elementor (excessive DOM use = slowing down site. Still using it tho) so WordPress’s built-in block editor is actually pretty blessed. All you do is press the ‘+’ icon and you can select WPForms as the short-code and it will input your form for you!
Hit “Publish” and you’re good to! go
Bonus CSS Code
This is how we can add css to match up the photos if you’re lazy to pre-re-size your photos like me:
.itemformpics img{
width: 100% !important;
height: 350px !important;
object-fit: cover !important;
}
Don't Forget to Pin Us!
