Join Morten Rand-Hendriksen for an in-depth discussion in this video Adding a contact form, part of WordPress DIY: Restaurant Website.
- View Offline
- No business website is complete without a proper contact page and a proper contact page always includes a contact form. There are various reasons for this, most notably that one, if you provide your email address online then computers, or bots, will find your email address and send you thousands of emails with ads for printer cartridges or trips to places you don't want to go to and other things you don't want. The other reason is if people come to your site and want to contact you and you make them use their email, they might not be able to use it.
Maybe they're on someone else's computer or they're on the phone or they're on some device that doesn't allow them to use email. By providing a contact form, people can simply fill in the contact form and then they can get in contact with you. Now Jetpack makes it easy to create a contact form for us. So let me just show you my current contact page as it is. I've created a standard contact page that says, "Planning a party? Need catering? "Have questions about food allergies "or special requirements? "Get in touch and we'll be happy to answer your questions. "For regular reservations, go to our Reservations page.
"For all other inquiries, call Nadia's Garden at "phone number or fill out the form below "and visit us in person." And here we want the form to appear. So, let's create a contact form. Jetpack adds the functionality of creating forms in all our pages and posts and the way to do that is by going to the page or post a question and click Edit Page. Then, in the page editor, find where you want the form to appear. So right now I have a place holder, right here. So I'm going to place the cursor right there then click Add Contact Form, this new button that was added by Jetpack.
This opens the form creator and from here we can create a contact form. So, you have a default form here that asks for the Name (Required), Email address (Required), Website and Comment (Required). So I'm going to remove the Website option and I'll add a new field. I'll call this new field, "Phone", because that's important when people contact you. I'll make it a Text field, I'll make it Required and I'll grab the Phone field and pull it up directly under name.
So now we have Name, Phone, Email, and Comment. You can also choose to make other things like a Drop down. So I'll make a Drop down here. Then say, "Type of Inquiry". In-quee-ry, that looks right. Then you can put in Options here. So say, "Booking". Or "Food allergy question", "Comment or suggestion". And save this field.
And then when you're happy with the form itself, you also need to go click on Email Notifications. Now, what happens when people fill out this form is the form submissions will end up in this Feedback option that's inside the back end of WordPress. But it's also a good idea to get an email notification. So here we can put in an email address that you want the messages to be sent to. So i'll put in email@example.com and then subject line can say something like, "Message "from contact page". When I'm done with this, I'll click Save and go back to Form Builder to review my form and if I like my form I click Add this form to my post.
Now the form is added in the form of what's known as WordPress short codes so you'll see here that each of the pieces of the form is contained within one of these square bracket areas. So here we have the contact form, end contact form. Then we have a contact form field for name then another one for type of inquiry and so on. So you can actually edit the form in text if you want to here. But if you want to see what it looks like on the front end, simply Update, View the Page...
Now there's a contact form on the page and we can fill it out. Morten, what is my phone number... And I'll say that this is a comment or suggestion. "Heloooooooooooo!" Then I click Submit. The form is now submitted with a preview for me as the visitor. And then I can go to the back end of my site, go to Feedback and here is that message in its entirety.
So now you have a simple contact form on the contact page and people are able to contact you in whatever method they find most useful.
Find more courses in this series in our WordPress DIY playlist.
- Making a basic content inventory
- Finding a suitable theme
- Adding a food menu page
- Customizing fonts, colors, and navigation
- Adding a contact form and reservations widget with Jetpack
- Testing the site