How to Design Awesome WordPress Forms in Under 5 Minutes

wpforms review

This article forms part of a larger series on WPForms

Click below to navigate to specific topics

A comparison on how Elementor’s form builder compares to WPForms.
Click here

This little-known feature only available in the Pro version will dramatically boost your form conversion rates.
Click here

By using the WPForms plugin survey add-on you can have professional surveys up and running in no time.
Click here

Let's take a closer look at WPForms

They call WPForms the “Most beginner-friendly WordPress Contact Form Plugin in the market,” and I would have to agree! 

I set up my contact form in under 5 minutes and if you don’t believe me, watch the video below. 

The Backstory:

I have a website dedicated to coupon codes and promotions for online business tools and I needed to add a contact form for people who couldn’t find the specific software they were after. Now some WordPress themes have great design options built in to them for creating contact forms which look great. But unfortunately my website was using a specialised coupon theme called Clipper and for all their good points they definitely omitted spending any time at all on custom CSS for forms. 

The result is that my contact form ended up looking terrible. I mean just look at it…

old form design
This form design takes me back to the dawn of the Internet in the mid-90s!

It really was a sad situation.

So I tried WPForms and in under 5 minutes I had a far more contemporary and slick form and in under ten minutes even had it integrated to my auto-responder of choice GetResponse.

EDIT: Since originally writing this post my auto-responder of choice has changed to Active Campaign. More on this in a future blog post.

Check the video out below of the before and after result!

WPForms Features

WPForms have several templates that make creating forms that much quicker. These templates include. (click images to zoom).

Next up fields! (Click the image to zoom)

Notice at the bottom of the image the options for accepting payments, including options for PayPal and Stripe.

Next up we have form page landing pages and the reason you should be interested in these is because they dramatically increase the conversion rate of people completing your forms because there are no other distractions on the form page. See an example below.

And finally integrations which all good form builder have! These are constantly being updated so visit this page to get the latest updates.

Ready to create Awesome WordPress Forms?

You have two options the free version which you can get hereOr the professional version with all its great integrations – Go Pro 

Hi there guys, its Paul Therond here and today we are going to have a quick little look at something that’s bugging me about recently because of a template mine for one of my website’s.

Basically, what has happened here is that I ran a website where I provide a number of bonuses e.g. special coupons and fulfiller marketers’. The template is fantastic for that purposes for highlighting coupons and promotions and stuff like that.

Something that they didn’t seem to quite put some maybe attention to was some of the sterling elements when it comes to forms. Here is basically what a contact form looks like using my current templates. Here is my whole website over here and then this element over here, it doesn’t look very professional, it doesn’t look very stylized and it is kind of lets the look and feel down in terms of what I’m trying to portray in the website. Now the interesting thing is that the plug-in that I’ve been using on my website is a very popular plug-in called Contact Form 7 which many of you are familiar with and possibly use and potentially it doesn’t look like this.

The reason for this is, it’s got to do with something called CSS or Cascading Style Sheets. Depending on your developer of your particular theme in terms of how much time they have put into dolling that up a little beat will mean that Contact7 will look different on different templates.

Here I am and I’m very happy with my templates basically for the purposes that it serves for this particular website. I don’t want to change my template but I’m not happy with the form so what can I do? I decided to contact WP Forms, this is a company that has come onto my radar recently. I thought I’d basically I’d take you through it and show you what it can do.

Here we are, this is what it looks like using the old version or the old way of doing things and simply using the cascading stall sheets of your templates and here is what a wp form looks like. As you can see, it’s a little bit more cleaner, a bit professional. You can pre-populate it over here like: enter your name, enter your last name, enter your primary email address, you can tell people what to do in here. Its also giving me this nice little option over here where a person can chose a file which was something that I was struggling to get right with contact form 7. Possibly it’s something that you can do but using wp forms, the whole process was much more intuitive and much more easier to use. I will run you through it shortly.

But some of you might be saying to yourself, but you could have simply just taken this form over here and adjusted the cascading stall sheets yourself and that’s an absolute valid point, yes you can do that but for myself, personally I’m a busy owner of an online business and I personally don’t want to be fiddling around with cascading style sheets myself. There’s more important things to the doing and yes I could have potentially given this this my developer. But then again, I’ve overloaded his plate recently that I have thought to myself well, let me just look at this plug-in and let me maybe do it myself and see how it goes. The fantastic news is after five minutes, I was all set up to go and had this great little form over here.

Let me demo it to you, it’s very easy to use like I said, literally after five minutes after activating the plug-in I had this great little form. Going to the desktop over here, we will see over here wp forms and let’s say for example you add new and you can enter your full  name over here, I will say test contact form e.g. and then we have a number of options over here, we’ve got a blank form, we’ve got a sample contact form but as you can see there a a number of different forms over here: request for code billing, donations, suggestions, user log in and a very very nice feature here; new user sign-up form.

So if you’ve been struggling to add a nice little call to action to get people to sign up to your newsletter, this plug-in might differently help you in that regard. I was going to show you the simple contact form, it will pre-populate the form with those elements  so you see name, last email address coming to message and then when you click on these things over here you get additional information that you can basically adjust. Here is what I was saying earlier abut you can say, enter first name and then place hold a text and click on email for example and go back to advanced options, place all the ticks , enter primary email address.

Nice little elements like that. What else can I show you: settings have a look here, general, test contact form, you can change and submit buttons there empty spare honey pot,all the confirmation messages that you get sent to you every time someone contacts you, confirmation messages what you’ll usually see and then you can submit. Notification here is what email address do you want to receive etc. you can change all those settings.

Something I like is the marketing function, lets say save over there. The marketing function basically integrates your forms with your email information software whatever. In case of the previous form which was the new user sign-up form, and that is very handy every time someone signs up, it gets sent to your email marketing software and they be followed by your email marketing software once you all that set up.

A great little plug-in over here as you can see ready on a matter of minutes. I was all set up to go. I’ll demo, I will go back to my contact page, I will quickly show you what I did, I used a combination of page builder, the beaver builder pager builder and the wp forms. I’ll go to the contacts page, I’m going on my click page builder icon over here which is beaver builder editor. I use builder a lot I really like the simplicity.

What I did was and this a simple text sided modules over here that a video blocking me, let me remove that that’s a mistake at content, text editor and then I just added the text over there whatever you wanted, save. I edited text over there and then what I deliver here is that I went to add content and then this is a great thing you will see advance modules.

Beaver builder automatically pulled in the wp forms, you see the wp forms so I drag that for you here. I can demonstrated and then you just choose and there is a test contact forms we just created. Beaver builder is a plug in to wp forms but the one tablet I can give you different is purchasing beaver builder. it’s a fantastic plug in in terms of purchasing, spicing up the look and feel of your page and in combination of these wp forms really does make all your user entry points a lot more professional, a lot more

I love wp forms, I’m sure you will too. Pricing is very affordable depending on how may websites you want to use and what pro-features you want to use and light version too which I will include a link for in the past but its differently recommended because they will be times where you just want to dolly-up a form and your template is letting you down a little bit. It is good to know that you could have a plug-in that within five minutes you get the effect. I’ll leave you guys, if you have any questions leave them in the comments. But differently get my recommendations.

Cheers now. Bye bye.

  • As always we are offering our special bonus of any Elegant Themes template of your choice when buying through the link on this page. We will also include our incredibly helpful SEO Cheat Sheet for you. Don’t miss out on this one!

  • >