Forms are a super powerful way to collect feedback, inquiries, or anything else you can think of on your WordPress site. They allow you to specify exactly what information people have to provide, rather than relying on them to just automatically provide it. For example, let’s say you have an inquiry form for your design business. Rather than having people email you to inquire about your services and hoping that they tell you about their project, specify what platform their using, and what their budget it, a form collects that information for you. You’ll get exactly the information you need.
But beyond contact forms, forms have a million different uses. Want to survey your audience? Use a form. Want former clients and customers to provide testimonials? Form. Accepting guest posts? Yup, you guessed it, form.
So you can see how many uses forms have on your site. But unless you’re pretty handy at html, actually adding a form to your site can be a pain. And beyond that, if you want people to take your form seriously, you need to make sure it’s user friendly. Fortunately, there are a bunch of different ways you can add forms to your WordPress website. Here are 4 ways:
Method #1: Typeform
If you’ve never used Typeform, then you’re in for a real treat. Typeform is an absolutely gorgeous form creator. Seriously. Every time I use one I geek out over how user friendly and beautifully designed it is (Psst… you don’t have to take my word for it. Check out some examples here.). And best of all, it’s free! Of course there are some limitations with the free version, but unless you have a form with a ton of fields or need certain features, the free version is plenty.
So how do you add a Typeform to your site?
First, sign up for Typeform, then click create a new form. You’ll be asked whether you want to start from scratch or use a template (for this tutorial we’ll be starting from scratch), then name your form.
Now this is where the fun begins. Drag and drop the different form options from the left of your screen to the right side.
Once your form is built, it’s time to customize the design. Click on the design tab above your form, where you’ll be able to customize the colors and font of your form.
From there, the next step is to configure your form. To do so, click on the configure tab at the top. You can go through the different settings, such as setting up notifications and integrating your form with other services.
Last but not least, it’s time to share your form! From the share tab, you’ll be given a link that you can use to link to your form on your website, social media, and emails. But we want to add the form to our WordPress site, right? To do that, click on embed in a web page (on the left side of the screen). No on this page there are two options: embed code and full page code. In most instances, you’ll want the embed code, so click on get the code.
Copy this code and head over to your WordPress dashboard. Navigate to the post or page you want to add the form to, and paste it into the post/page using the text editor (not the visual editor). That’s it! Your form is now embedded on your website!
Method #2: Google Forms
Google Forms is another tool you can use to embed forms on your website. It’s not as fancy as Typeform, but since we all have Google accounts, it’s readily available. And or course, it’s free!
First things first, create a blank form. Add your questions, then select a color palette from the top right menu. Click on the response tab and then click on the … in the right corner to select a destination for your responses and to enable email notifications.
When your form is ready to go, hit send. Next to send via click on the <> icon to get the embed code. Customize the size of your form to fit your page, then copy the code provided.
Go to your WordPress dashboard and edit the page or post you’ll be adding the form to. Select the text editor (not the visual editor) and paste the embed code. And you’re done!
Method #3: Gravity Forms
Once you’ve purchased your copy of Gravity Forms and got it installed and activated, click on the forms link in your WordPress dashboard, then add new. Drag and drop different form options from the right to the left.
When your form is setup to your liking, click on the form settings tab. On the settings screen, you’ll be able to edit the button text, specify where form descriptions are displayed, and more.
Once that’s done, click on confirmations on the left side of the screen. The confirmation is what is displayed after the form is submitted. There should be a default confirmation already created, which you can go ahead and edit. It’s already setup to display some text upon form submission, but you can change that to display a page, or set it to redirect.
After your confirmation is set, click on notifications on the left. Notifications will tell you when someone has filled out your form. Again, there’s already a confirmation created, called admin notification. By default, it’s set to send to the admin’s email address and it’s set to show as being sent from the admin. I personally change the from field to the person’s email (if that’s something you’re asking for in your form). To change any of the fields to content submitted via the form, click on the little arrow to the right of the field, then select the appropriate field.
Now that your form is all ready to go, it’s time to add it to your site. On the edit screen of your page/post, click on the add form button above the text editor. Select your form and decide whether or not you want the form title and description to be displayed (I usually don’t select this). Then insert your form. You’ll notice that a shortcode will be added to your post/page.
To add the form to a widget area, drag the form widget to a widget area. You can also use a shortcode in a text area if you want. The shortcode is as follows (where the # sign is the form id – found on the forms page):
[[gravityform id="#" title="false" description="false"]]
Method #4: Contact Form 7
If Gravity Forms isn’t in your budget, but you’d still like a form option that’s native to WordPress, Contact Form 7 is a good option.
After Contact Form 7 is installed and activated, click on contact from the WordPress dashboard, then add new. Now I should mention that Contact Form 7 isn’t the most user friendly in terms of building your form. You’ll need to know a bit of HTML to style your form and there are no drag and drop options.
When you create a new form, you’ll see 4 fields already created: name, email, subject message. You can customize these fields by editing the text outside of the brackets. Note: you don’t want to edit any of the text inside the brackets.
After you’ve created your form (make sure to save changes), click on the mail tab to setup where the form data will be sent (and how it’ll be formatted). You’ll notice at the top of the page the shortcodes of your fields are displayed. You can use these shortcodes in any of the fields. So for example, you can put
[your-email] in the from field. Note: if the correct shortcodes aren’t showing up at the top, go back to the previous tab and save. This should make them appear.
Once that’s done, click on the messages tab where you can edit the messages that are displayed in certain circumstances.
Your form is now all setup and ready to be added to your posts/pages. Save your form and a blue bar with a shortcode will appear below the form’s title.
The shortcode should look like this:
[contact-form-7 id="#" title="YOUR FORM's TITLE"]
Copy the shortcode and paste it wherever you want it to appear on your site. This works for posts, pages, and the text widget (for sidebars and other widget areas).
[Tweet “Check out these 4 options for adding forms to your #WordPress site:”]
Do you use any of these methods on your site? Have a favorite form tool? Share in the comments below!