How to Create a Contact Form With WordPress FREE 2021 ~ A WPForms Tutorial For Beginners

are you looking for the best contact forms tutorial to add contact forms to your wordpress website or elementor website that's simple install easy to use in less than 15 minutes your time at no cost to you are you trying to decide whether wp forms or contact form 7 are the best form solution for your website or maybe you just get started you have no idea how to add forms to your website at all if you're facing any of these problems and simply need a totally free step-by-step solution for adding forms to your website then you've come to the right place hello i'm yoda and welcome to my youtube channel now during this course if you run in any troubles just leave a comment below the video and i'd be more than happy to assist you and don't be shy about asking for help i've been a webmaster instructor aka the web yoda for over 20 years and i love to hear from my students but if you could please pay it forward if you could like the video subscribe to the video share the video tell your friends about the video those are the kind of things that help get the word out there so other students like you can find this video so let's go ahead and get started i have a lot to cover and i know your time is valuable the first thing we need to decide is which forms plug-in we want to use now it's undisputed that wp forms and contact form 7 are the best plugins by far out there if you do the research yourself you'll find that wp forms in contact form 7 are collectively 10 times more popular than all the other plugins combined in fact anyone promoting a forms plugin other than these two is simply making more affiliate money from that company both wp forms and contact 407 have lots of great free features and lots of great paid features i find both to be compatible with all wordpress versions and also very reliable and compatible with all the major themes and plugins that i've personally used so then the question is between wp forms and contact form 7 which of these solutions is the best solution for me originally i used contact form 7 exclusively but that was because it was the only game in town so because of this like many other wordpress developers i used contact form 7 exclusively for many years it worked great it was easy i had no reason to change but now i use wp forms exclusively and the question is why would i make that change the answer to this is on december 11 2018 contact form 7 released version 5.1 as it turns out version 5.1 was no longer compatible with google captcha now if you're not familiar with google captcha google captures that thing you do just before you send a form to make sure you're not a robot and for me google capture was extremely important to minimize the amount of emails i received from automated methods of submitting forms but surely contact form 7 would solve this problem quickly and release a new version so i didn't have to make a change however for months wordpress developers like myself attempted to convince the developer for contact form 7 to fix the plugin but for whatever reason they resisted at this point i determined i had two options i could either continue to use contact form 7 but stick with version 5.0.5 or i would need to research and choose another solution reluctantly i decided i'd look for a new solution and i'm really glad i did first of all wp forms was completely compatible with google captcha and it turned out to be a lot easier to set up than contact form 7. secondly wp forms is a drag and drop solution whereas contact form 7 required hard coding and this could be complicated particularly for new users so we're going to use wp forms let's go ahead and add wp forms to a couple of websites just to see how it works and what our options are the first one we're going to do is webdesigntrainingschool.com so there it is if i click on the contact page and we scroll down to the bottom we'll see that this contact form the captcha feature is broken that's what we're going to fix so i want to log into my wordpress admin click to log in and let's go ahead and add an extra tab so we can follow along as we make changes so i'll go here i'm going to right click and open a new tab and so here's our website go ahead and click on contact to get us over there and now we're ready to add wp forms to access the wp forms plugin i'm going to open up a new window and i'm going to go to webyota.com front slash wp forms and here you'll find a brief description of wp forms as well as access to the free version the paid version and the ability to set colors within wp forms so we'll go ahead and click on the free version and that downloads a copy to our computer so now it's available i'll go ahead and close that i'll come back to our wordpress admin i'm going to go to plugins add new plugin upload a plugin choose file i'm going to go to my downloads folder and there it is select it open install now and activate plugin it's really remarkable how easy it is to use this product now once it's installed and activated you'll see an option for wp forms we're going to click on wpforms and we're going to add a new form these are the simple forms that are available at no cost to us and we just want a simple contact form so i choose that and now my simple contact form comes up so let's say i wanted to add a subject line for my contact form and i want to put it between email and comment i'm going to come over here and i'm going to drag single line text right in there just like that so now i added a single line text field and now i want to customize that so over here we're looking at add fields right here we want to go into field options now we're in field options i'll click on single line text and now i can change this and we'll just call it subject hit enter now we have a subject now let's say you also wanted to add the phone number field come back over to add fields and all know to add a phone number if we click on that we have to upgrade we're not going to do that there's another way around that so even though we'll research some of the great pro features later for the purposes of what we're doing now we want to do everything you can do for free so let's go ahead and close that and i'll scroll back up and i want to add a phone field between these two so why don't i just take single line text put it between the two come back to field options choose that one and choose phone well now we have a phone field what's the difference the difference is our phone field is just a text field whereas the paid version does validation to see that somebody actually entered a real phone number another thing you want to be able to do in your form is to make a field required so with the phone field chosen over here if i click this little box here it makes it required and it also puts a little asterisk next to it so that people know that's going to be a required field now the next step is we need to tell the form where to send the email so in our case we're going to go to settings and then i'm going to choose notifications and the send to email address is who do you want it to go to now by default whatever the email you have set up as the admin email in your wordpress is where it's going to go but you can personalize this so i'm going to send mine to the web yoda at gmail.com now for testing out your form i recommend using a gmail account only say that because i found gmail accounts to be the most reliable method for testing your forms so we've set where we want it to go to we're going to click on save and now we're going to click this x and that takes us out of the wp forms edit menu and now we want to add our form to a web page now for a regular standard wordpress form we need the short code so if i select that short code i right click and copy now i can go to my pages i can go to my contact form choose that to start editing it i can go down to the section that has my contact form in it i'll edit that field and notice it has the contact form 7 one in here right now i'm gonna paste the new one in there and i'll get rid of the old one click done click update and now we're ready to look at our new form so we'll go over here notice at the bottom the captcha is broken we'll hit reload and we have a new form that doesn't have any caption information in there so what we want to do is go ahead and add the captcha to this form so we're going to go back to our wordpress admin go back to wp forms and then under wp forms there's an option called settings we're going to click on recaptcha and then you have three choices always use the first choice and then you need a site key and a secret key now you probably don't have those but to do that you're going to click on this read our walkthrough and wp forms has a very easy to follow method for setting up your captcha and showing you how to get your two keys that you need so there's really no reason for me to reproduce that whole section you'll just use theirs to get your keys once you have your keys you'll come back over and you'll put your keys in here i'm gonna put my keys in now these aren't my real keys they're just for an example i mean clearly my keys don't start with 8675309 and obviously my name's not jenny so now that we have those in there scroll to the bottom and choose save settings now that those settings are saved we can go back to our wp forms so if i just click on wp forms here it takes me back to my list of forms and there's our one form we'll choose that form and now when we click on recaptcha it has been enabled we click ok be sure to click save come back over to our form hit reload and look at there it was that easy so one other thing you may want to do is to change the button to say something other than submit so let's go back to our form and we'll go into field options we'll scroll down choose submit and where it says submit button text we can put let's say send message we hit save we come back over hit reload and there you have us in message button so now let's send a test message so we'll send it from bethany put a subject in testing one two three i'm not a robot i'll click send message thanks for contacting us we'll be in touch shortly so that worked now this message right here if you come back over to your forms and you go to confirmations you can set it to a different message there so that's fun to do as well now let's go check our email so i opened up a new tab to view my mail you should get a new message that shows up here it is simple contact form entry and there's the email but maybe we don't want to say simple contact form so we'll go back over to our form go back into notifications and where it says email subject we can put what we want in there and i'll put web design training school comments i'll hit save come over here let's reload on this we'll send another message from bethany four five six i'm still not a robot send message the new message is sent go check my email again go to all mail there's the new message we'll click on that and now it says web design training school comments so we have a simple form it's free and capture works everything we need so there was one last formatting thing i wanted to do to this form before we move forward and we'll go ahead and do that inside of wp forms and then we'll refresh our page and see how much of a difference it makes so we'll go ahead and close that we'll come back over here so this is where we left off editing our form and what i want to do is i want to go back to fields if you scroll down notice how this field's wider than the other ones and then when you look at the page so say we come back over here and we click on contact you see how these are short right here i want to fix that so we'll come back into the editor and we'll select each one of these i'll select name and then under advanced we'll set the size to large do email advanced size to large phone advanced size to large subject advanced size to large now we can hit save come back to here hit reload and look how much better that looks now i probably won't do that on each one of the ones the samples we're doing as long as you know how to do it here that should be plenty so now we're ready to move on to our next form and what we're going to do is add wp forms to an elementor website the website we're going to work on is bethany zoo website that we're still working on so let's go ahead and click here i'm going to type in sample.selftastic.com and there's where that image came from that we used on the thumbnail for this video and from here we'll click on contact and we scroll down and this is where she wants to add a contact form we'll come back to our admin i've already installed the free version of contact form 7 since we already know how to do that and you'll notice there's already a wp forms option here so i'll click on that we currently have no forms let's add a new form and here's our free choices so in this case we're going to do a simple contact form again we like it the way it is we'll hit save exit out of the forms editor we want to set up captcha so we're going to go to settings under wp forms captcha i'm going to choose recaptcha scroll down enter my keys again scroll down save settings now i need to go back into my form edit the form and activate the recaptcha so i could have saved myself some time if i would have set that up first but i'm doing these things kind of in the order that you might come across and you're like oh yeah i need to set that up first click on ok now we'll choose save we can exit out of that at this point we no longer need the short code because we're going to use elementor so i'm going to go to my pages i'm going to choose my contact form edit with elementor so now if we scroll down we see this is where we want to put the form on the left hand side if you click this icon here it brings up this list in case you're not already seeing this list in the search box we're going to type in wp forms and there's two choices in mind i don't know if there's gonna be two choices in yours but they both kind of act the same i always use this one over here i'm just going to drag that in drag it right under get in touch and now it's installed there i can choose the simple contact form and now the form is there i can hit update go back to the website hit reload and there's the form now on bethany's new website if you go to her home page and you scroll down to the bottom there's a place to sign up for a newsletter and she wants to put a newsletter link right here just to collect email addresses that means we want to set up a separate form for that so we'll go back to our wordpress let's exit out of that so we click there and exit to dashboard we'll go back to wp forms i don't really like this name let me make a change to that real quick so we'll choose that name and where it says simple contact form right there i clicked on it and we'll just call this our contact us form i can hit save i can close that this makes more sense and you know how to make that change now we're going to add a new one and see it made a default name because i didn't put one in there the first time we'll call this join email we'll do another simple contact form now because i don't want the form to get cluttered i'm not going to turn on the recaptcha on this one for her and also she only needs the email field and the name and the first and last name let's go ahead and get rid of this field right here i just click the little trash can on the right and now her form is ready we'll click on save exit out of the wp forms editor go back to our pages now we're going to edit her home page edit with elementor let's scroll to the bottom and this is where we want to put the new form so again we can come back over here you choose that icon to get this list to come up we type in wp forms let's drag that one over right there choose the form now these names make sense join email and this looked a little cluttered to her she said i don't really know what that i just want the email so anyway we'll update this and we exit it out elementor so we'll come back into our forms we'll choose the join email form over here to the right we'll close that out hitting that little trash can we can save this now if we come back over here and hit reload she says yes that's what i wanted so now we've added two different forms to her website one that doesn't have captcha and one that does that's pretty much the extent of it for making a free form for your wordpress or elementor website at no cost to you however if you've got just a few more minutes i want to show you some of these pro features that are really outstanding for example if you want to have a form where you can make a purchase on that page we'll be able to do that without having to purchase an entire shopping cart environment you could handle small sales on your site with no problem at all we're going to do that also going to add an employment form to one of the pages for our website and we're also going to look at how you can access all of the form information that comes to you from your website instead of having to dig through your email looking for it just make sure you don't miss any of them as well so let's go ahead and get started and to do that we'll go ahead and close this and we're going to go to another website now and it's the osaka steakhouse website and there's their website and we went ahead and added an employment field but it doesn't have a form on it yet and then there's the contact field so we're going to add both of those forms to their website so let's go ahead and go to the wp admin to log in log into that website now we're going to open up the extra window by right clicking here and open a new tab and that way we can see the website as we're making changes now the features we're going to use now are going to require a pro version so we go back over to this third tab and we're back at web yoder dot com slash wp forms and you can click on the pro button and that'll take you into their website so that we can get the pro version now our relationship with wp forms is not just an affiliate relationship in fact wp forms has partnered with the web yoda foundation to help provide a little bit of the money for every purchase to go to the foundation to make sure that we can produce as many videos as possible for free for everybody out there and to see that relationship from their website you could have just typed wpforms.com front slash web yoda and that link works and it brings you to the same spot but what that really indicates to you is that there's a little bit stronger relationship than just a regular affiliate they really do want to help out and provide as much free training as possible with our help now from here we can click on the get wp forms now button and if for some reason it's changed the setup you can also just go to pricing and it'll bring you to a page that shows you what the current options are and many times like right now they'll have some kind of special option going in this case it's 50 off so in our case the basic package is going to be just under 40 dollars for the year if you choose not to renew at the end of the year your paid version your plug-in will continue to work so let's go ahead and compare the options of the different paid choices typically you'll just need the basic version but in my case i'm going to purchase the pro version because one of my clients needs to have a purchase page and so they're going to use paypal for example so if you scroll down one thing you'll notice is if you only have one website the basic will be fine for you if you have three websites you're going to need the plus version if you want to use up to five websites you can use the pro version and if you want to have unlimited websites you're going to need to get the elite version so for you you're probably just going to need the basic version i'm going to need the pro version so i'm going to go ahead and click on that for my purposes and there it went ahead and applied the discount i can put my information in here and you go ahead and choose to complete the checkout i already have an account and i already have made the purchase so in my case from their main page i'll choose login i'll log into my account and from here we want to know how to get access to the new plugin if we scroll down we can choose few license key details and downloads and clearly this isn't my real license key again this is jenny's license key 8675309 and i can have up to five websites so you're going to want to copy your key i'm going to right click and copy i can download wp forms and this will be the paid version once that downloads complete i can close that and i can come back to my admin and notice this already has the lite version installed for this but we want to install the pro version so we're going to go to plugins add new and sometimes it'll look like nothing's happened that's because all this advertising is in the way so i'm going to close some of this advertising just to get it out of the way now i'm going to click on upload plugin choose file and there's the paid version we'll click on open install now activate plugin notice in this site we had contact form 7 at the old version so that it didn't break now the pro version is installed so i'll click on wp forms and notice there's a link right here that says enter and activate so we'll click on that you enter your activation key hit verify we are now verified click ok now we'll click on capture we'll choose recaptcha we'll scroll down enter your keys here again there's my jenny keys save settings so now capture will already be activated now we'll go into all forms and we're going to create a new form so i'll click on add new and our first one's just going to be a simple contact form go ahead and do that one real quick now notice all these are activated now so if i want to add a phone number i can drag the phone number in there and have a real phone number in there now and if i want to have a subject i can put a subject in here like this go to the fields choose that one subject just kind of a refresher and then i'm going to go into the settings and i'll name this contact us go into confirmations i'm okay with that notifications i'll put my email address in here i can hit save close out now i'm going to go ahead and make the second form while we're in here just so you see how easy it is they're going to want an employment application form let's go ahead and add that new form now when you scroll down you'll see an additional template section but to get these we're going to need to download the add-on so let's go back to their website we'll go back to our account now obviously this got us back to where we were already at but in case you came back at a different time i still wanted you to be able to find it by going into account and choosing downloads and now we're going to scroll down and you'll see the access you have to lots of different new add-ons that are available i'm going to show you how to use a few of these add-ons and then from that you'll be able to figure out how to use the other ones that you might need so in this example we need the form templates add-on but don't make the mistake of clicking here to try to get to that you actually just want to click this little cloud guy here and that's going to allow you to download the plugin and keep you going in the correct direction so now that plugin is downloaded i'm going to close that thing out we'll go back to our wordpress and now we're going to need to close this out because we need to add the new plugin so we'll go back to our plugins add new upload plugin choose file and there is our new add-on we'll open that install now activate plug-in now that that's activated we can go back to our wp forms we can go back to adding a new form so now we're ready to choose the template and as we scroll down you'll see there's this whole new section and as you review through these you'll see there's a whole bunch of different things that you can do obviously i'm not going to go through all these but if i can show you how one or two of these work then you can understand how everything works we're going to scroll back up and i'm looking for the job application upload form let's use that now it already has the information for doing an application as well as areas for people to upload their cover and their resume so that was super simple i didn't have to do any of the work and you could add your own extra fields if you want to but this is okay for our needs now and we're going to rename this employment application i'm going to go into notifications put my email address go to the confirmations i'm okay with that we'll hit save now we have both the forms we need now let's go add them to our pages i'll click on pages again this site is an elementor site so we'll go into the contact form page edit with elementor and this one currently is using the contact form 7 version so we're going to scroll down i'll right click on that and delete it and now in the box here we'll type in wp forms we'll drag that over we want a contact form in there choose contact us we can hit update go back to their website click on contact and there's our contact form and our submit button everything's ready to go now we want to add an employment form so let's go back to our wordpress let's exit out of elementor choose pages choose employment edit with elementor as we scroll down here's that same contact form 7 that didn't have any upload area it doesn't have the caption all that so we're going to delete that and we're going to choose our wp forms again drag that over select our employment form and now we have an employment form that is going to be fully functional we don't see the captcha here yet but it will be there later so hit update come back over here hit employment and now they have an employment form with all the bells and whistles but we did not turn on the captcha we'll come back over here we'll exit back out of elementor ironically it's helpful for you when i make these mistakes so you can see how to fix them so we're going to go back to our wp forms we're going to choose on the employment application click on captcha turn that on we'll save it close that out we're going to click on the contact us form choose capture there now it's activated we'll save it now it's saved and we come back over here and hit reload we scroll down and now it has the captcha also what's interesting is if you go back to wordpress enabled forms will say that they're enabled on this corner so you know that it's enabled in here as well now for our final example we're going to add a purchase form to another website let's go ahead and close that let's go to the other website and we're going to go to cozy1.com these guys are where i get all of my seo from which is probably the reason you found this video is because they do such a great job of making everything that we have available and searchable and findable whether it's in google or in youtube searches they already have an order form but we're going to make a sample order form so you can see how it works so let's go ahead and log into the wordpress admin for this site so we're logged into the wordpress admin in this case the pro version of wp forms has already been installed so let's go ahead and set up a purchase form so i'm going to click on wp forms add new and they do have fancy forms down here that may already have some of this built in but i just want to show you how to do it from scratch so we'll start with a simple contact form let's go ahead and add a phone number here and we'll add an address here and then we'll choose on the form options and i want to choose phone and let's say i want that to be required field now under the address form i want to put my fields for handling a purchase so let's go back to add fields scroll down and the first kind of field i want to do for the payment type fields is a multiple item it's little radio buttons so let's go and drag that over and basically it allows you to have a radio button where you can choose one of them but not all of them at the same time so we'll click here to edit it we could also go to fields over here and then choose this and now it brings them up and let's go ahead and give this a label choose your monthly seo package and our choices are going to be basic seo package premium seo package and supreme seo package and our pricing will be 59 a month 109 a month and 125 dollars a month and so now each one of these when we choose them it will allow us to select only one of those when it does them now something else that we may want to be able to do is to put the pricing out to the right so we can choose show price after the labels and there's our prices next i want to add a different type of purchase field go back to our fields scroll to the bottom and we're going to do check boxes this time we'll drag it right in between there we'll hit field options we'll choose that one so we can make changes and our label for this section will be choose your seo boosts so these will be ways that you could boost your seo to make some progress more quickly first of those will be moz domain authority the second will be ahref domain rating and the last will be alexa ranking 150k now for our pricing be 150 for that one 250 for that one and 199 for that one we want to show our pricing and on these you'll be able to select multiple ones as opposed to the ones up here you're only able to select one at a time now in any payment form you'd like to be able to show the total so let's go back and add our fields at the bottom we're going to choose the total one put it there and that will add a total to our form so at this point our sample form is complete you could obviously add as much as you wanted in here so let's go ahead and make a couple other settings so we'll click on settings and under notifications we will put jose one new sale and the email address now we'll go to confirmations thanks for contacting us we will put thanks for your order and now under payments we need to activate the kind of payment we're going to use and i already went over here and notice that this is the one that we used before if you scroll down here's the paypal add-on and i've downloaded that and i installed it and that's why this is already activated if you needed the other ones you'd have to download and install those but that's why those aren't activated this one is so i can choose that one and here you want to put the email that is associated with the paypal account in this case their email is payments at joseone.com and one of the neat things that you can do is under mode it says production that means that once you save this and you started it it's actually live and functioning but what you can do is you can choose sandbox mode for testing the form out so for our purposes i'm not going to leave it in test mode so i'll go ahead and change that back to production and then the last thing you need to do to take your form live is to turn on this checkbox right here to enable paypal then we can hit save we can exit and now we're ready to add this to a page so we'll go to pages already created a sample page so we'll go ahead and click on edit with elementor then i'll scroll down a little bit i want to put the form right here so i'll go over here and type in wp forms now there's another styler thing here and i think that was downloaded under a different product it's not one of the ones that came with what we're doing so we're not going to worry about that when we'll just use the same one we have been it works just fine now we're going to select our form sample purchase form there's our form we can hit update now we can go back to our wordpress we'll right click here open a new tab and now we're going to go to order dash sample and here's our form and let's go ahead and enter some information so i'll pick bethany over here i can choose the basic package notice how the total change is there i pick the premium it changes again we'll stick with the basic let's go ahead and add the ahref rating so notice that total goes up and now we can submit our order this is a required field notice the asterisk there test one two three hit submit and notice it takes us to a paypal window it's live we could actually process that it would go directly to jose one or we can pay with debit or credit card so it gives you a fully functional purchase page inside of a single form so there's one last thing i wanted to show you it's a really neat feature if you purchase any of the paid versions you get the ability to store all of the forms that you receive inside of wordpress which does two things one it allows you to check your form submissions without having to dig through your email to search for them and so if we go over here to wp forms what we're looking for is an option called entries and that's just going to be a list of whatever forms have been submitted now this is a sample so there's not a lot of data here the other advantage is is that if somebody abandons a form this product will also allow you to capture that information and you may be able to reach out to them and say hey we noticed you had a form and wanted to know if there's anything else we could do for you it's a really helpful feature if you're gonna have a purchase page for example because that way you don't have to dig through all your emails looking for the sales so that about wraps it up but since you made it this far i want to give you a little bonus and tell you the secret about how to make your website load as fast as possible if you're interested in optimizing the photos and images in your website just choose the link at the top right it'll take you to a video i made on optimizing your website now i truly hope i covered everything you needed in this tutorial now if there was something i didn't mention or you had additional questions please leave them below be more than happy to answer them for you but if i don't know the answer i'll go hey i don't know but if i do know the answer i can find the answer i'll give it to you and maybe we can work on it together so i really enjoyed doing this i hope you had a great time as well the only real payment i'm looking for if i could possibly get a subscribe out of this possibly a like out of this that'd be super helpful but outside of that i just hope you have a great day peace out you

Channel: WebYoda

Views: 76,383

Rating: 4.9944782 out of 5

Keywords: wpforms, wp forms, Contact Form 7, wpforms tutorial, wpforms wordpress, wordpress contact form, elementor forms, contact form, elementor contact form, how to use wpforms in wordpress, wpforms elementor, Elementor Forms Tutorial, wpforms plugin, wpforms wordpress tutorial, wpforms lite, wordpress forms, cf7 vs wpforms, contact form elementor, contact forms review, contact us page, best contact form plugin, contact form 7 vs wpforms, wordpress wpforms, wpforms contact form

Id: PdTVmZPzb_0

Length: 39min 16sec (2356 seconds)

Published: Tue Jun 01 2021