- By
Almost all websites need a contact page. It needn’t be too complicated, but it must, at the very least, include a contact form (preferably one that both looks great and works seamlessly). The problem is, however, that WordPress doesn’t actually come with any such forms built in. So what do you do? How exactly do you go about adding a contact form to a WordPress page (or post)? Well, as usual, it’s actually pretty simple when you know how!
Here’s all you need to know:
How to add a basic contact form to WordPress
– (note: video credits to Topher DeRosia – creator of HeroPress)
Video Transcript:
Hi! This is Topher with WinningWP. In this video I’m going to show you step-by-step how to put a contact form on your WordPress website. If you follow along each step at the end of the video you’ll have a fully functional contact form. The plugin I chose to use is called Caldera Forms and I chose it for a number of reasons. One is that it’s free. Another reason I chose it is that the end result form is very attractive and it’s responsive. So if the mobile web is important to you this will fit right in. This is the Caldera Forms website but you can also see it here on WordPress.org. So let’s get started. We’re going to start here in your admin area. We go to Plugins → Add New and under Search Plugins type “caldera” and here it is right at the top. So we click Install Now and then Activate. There we are. Caldera Forms is installed. So the next thing we’re going to do is go to the Caldera Forms menu item here and click Forms at the top of the list. Near the top of the page you’ll see the New Form button and it’s blue. We’ll click that. Then we have a bunch of options here for different kinds of Forms. There’s a blank form, variable pricing form, a simple booking form; but the one we want is on the top left, a contact form. So I’m going to click that. We’re going to give our form a name, nothing too fancy just Contact Form and click create form. Now we have a form. I’m going to give you a quick tour of it. Here in the admin area, the top form field is actually a plain HTML field and it just has this text in it. If we wanted to get rid of it we could click this X in the top left. If we wanted to move it we could click these three bars at the top right. If we wanted to add to it we could click the plus at the bottom here. And if we wanted to split it and make it two columns we could click this icon at the top. The same holds true of all of these fields they all have the same little icons. This one was split into three and there are three fields there. There’s another HTML field, then there’s a comments and questions box, and then there’s a send message box. And if you click on any one of these, In each one of these has a little pencil you can click on and edit some information here on the right. Fortunately you don’t really need to. This contact form is complete out of the box. We do need to configure where it’s going to get emailed when someone fills it out though so right here we’re going to click email. Here’s the “From” email. Now if you want to change it so that your email actually says the address of the person who filled out the form you can click in this reply to email field, and these are called magic tags. I’m going to click “email address” and now this field will be automatically filled in from the field in your form where the form filler put in their email address. And you can leave the rest of these fields all at their defaults. So now we’re going to click “Save Form” at the top. Now that we have a form we want to put it on a page so I’m going to go to my pages section, create a new one called contact, and then right here at the top of the content area is a Caldera Form button. So let’s click the Caldera Form button. We can choose our form and if we chose to set it as modal then it would simply make a link and we would have to click it to pop the form up, but we want to embed it right in the page, so we’re going to leave that unchecked. And I click Insert Form and there’s our form, so now we save our page and view it. And here we have our contact form. All things considered, there is very little work to get this form together. Caldera Forms came with a contact form. All we had to do was choose it, name it, give it an email address, and save. Then we could embed it right in this page. So let’s review real quick. We got Caldera Forms by going to Plugins → Add New and searching for Caldera. We installed and activated it then in the admin menu we went to Caldera Forms, clicked new form, chose the contact form template, named it, and clicked Create Form. Then we configured it by clicking the email tab, adding an email address and then saving it. Then the last step was to create a page or edit a page if you need to click the Caldera Form button select our contact form and click insert form. Then simply save your page and view it. If you’d like to learn more about WordPress check out WinningWP.com.
Anything to add?
