How to Create a Contact Form in WordPress
Articles Blog

How to Create a Contact Form in WordPress

August 15, 2019

Welcome to WPBeginner and thanks for tuning in. In this video I’ll walk you through how to create a great looking contact form for your WordPress website. We’ll cover it step by step and we’ll do it all without writing any code. To get started let’s go ahead and head over to our website we want to log into the WordPress dashboard so add admin to the end of your website that will bring you to your login screen where you can login Alright, now that we’ve logged into our site we need to install and activate a plug-in so let’s go head over to our plugins area and click add new from the repository of all the plugins available for wordpress we’re looking for WPForms and this is the one we want so we’ll install that now we’re going to activate that as well alright now that it’s activated you see this area over here for WPForms. We’re going to create a new form I’m going to go to add new and here’s the WPForm’s dashboard. Most of stuff we need is right here we can select a template you can start from scratch and add the fields as you want you even have a suggestion form we’re going to use a simple contact form and if you wanted to upgrade you see down here you can also create donation form request a quote you can do some billing or order forms that gets more into e-commerce the newsletter signup form that will tie into your email subscriptions software but for us we’ll just do a simple contact form and we can click on the name to name it can add a description if you need that’s mainly for you. You can even add some specific CSS for the form, change the submit button text down here you want to make sure that that is enabled to keep spam from getting into your inbox so we’ll go with the general settings we’ll get back to notifications and confirmation in a minute I’m going to get back to the fields area or on the right this is what it looks like right now. Over here if you needed to add more fields you can just click on that and it’ll bring it down here under the last box and then you can click to drag them wherever you want it to go just like that I’m going to remove that. From here you can adjust the form fields you can adjust the format of each field and you can choose whether or not to make them required. I’m going to go through an adjust mine how I want it to look and you can do the same for yours. So the next thing we want to make sure is let’s look at the settings and under notification we definitely want the notifications on because we do want to get an email when somebody emails us and by default it’ll bring in your admin email of your website but you can actually put in something specific right there. This is what every email that comes from this contact form will say in the email subject line when it comes to and then this is pulling in from the field on the form this is also pulling in from the field on their form and then this brings in all their data as well. So the notifications look good now let’s go to confirmation and this is the confirmation message that they’ll receive on the page once they submit it. If you want to be more specific you can choose to send them to a particular page say your thank you page on your site you can choose that here or if you want to send them to another web address choose the URL enter the web address that you want to send them to and then once they click Submit then they’ll be taken to those different pages alright now our contact form is set up how we want it to look so I’m going to save everything and now we need to actually put it on our website I’m going to use a page. So I’m going to go to my all my pages and we have a contact us page so I’m gonna edit that because that’s where I want to put the form. Under my information up there was going to get on a new line and you see here we now have an ad form button so I’m going to click on that and if you have multiple forms you can choose from them here we only have this one so we’ll do that you can choose to show the form title or the form description since we have the page name right there we don’t need any of that when it inserts it you’ll see this shortcode that’s just an easy way for WordPress to share the form for you so you don’t want to mess with that. Once we’re done let’s click update or if it’s a new page that you’re creating click publish and now let’s see what it looks like. Now some people like to add the form on their sidebar area and I’ll show you really quickly how you can do that as well with WPForms you can go into your Appearance, Widgets area the sidebar usually has a widget area like you see here and we’ll scroll down because we’re actually looking for the WPForms widget. So we’ll left click drag that up to the top and now release that and you can choose again here what all to show and we’ll click save and now if somebody’s scrolling through your blog and you have your sidebar area then that will show on the sidebar for you. Did you learn something helpful from today’s video? If so make sure you subscribe to our YouTube channel right now just click on the subscribe button right here and thanks for watching

Only registered users can comment.

  1. I made this and when someone sends a message to me the box is mint green with white text saying their message was sent but you can barely read it. I don't see an option to change the color box on the conformations tab. Please, someone, inform me of what I can do to fix this issue.

  2. I getting 

    Be careful with this message 

    Gmail could not verify that it actually came from [email protected] Avoid clicking links, downloading attachments, or replying with personal information.
    When someone send me messages.

  3. Why, when i click on edit, my document window doesn't show. The edit button just takes me to "start writing or type/to chose block"? I don't get any option to add forms

  4. Great tutorial, thanks, I want to create a contact form like this one – they have a form where input fields only have 1 line, also it highlights the fields while writing, please help!

  5. Having Elementor the adds form button doesn't show. No I am not editing in Elementor, just the plug-in changes the page when installed.

  6. Hey there great tutorial. I have a question though when I click on my contact page edit button it brings me to a page that looks different then the page you show my page just says contact and then underneath that it says edit with elementor Which would bring me to the standard edit page with an elementary I don’t see anywhere where it allows me to add to form any suggestions would be greatly appreciated.

  7. Thank you – great tutorial… I've been putting off tackling this for months because I thought it would be hairy. You made it a 10 min job!

Leave a Reply

Your email address will not be published. Required fields are marked *