Build My Site for Free

Hi, everyone! Welcome to BuildMySiteForFree.com. In today’s tutorial, I’m going to show you how to create a contact form for your blog. By doing this, you need to install one of the contact form plugins. The one that I’m going to use today is a very popular one called Contact Form 7. So, if you want to get this plugin, you can come to BuildMySiteForFree.com, and what you
want to do is click the plugins link up here in the top right hand corner. All of the plugins are listed in alphabetical order. So, once you find it, all you have to do it download it right from this page. Here we have our plugin that I want to use, the Contact Form 7. I’m going to click download.

It’s going to bring me to the plugin directory for this plugin, and of course it gives me a little bit of a description like it does with all the plugins. It gives you the version and what WordPress version it’s compatible up to as well as when it was last updated and how many downloads
have already been downloaded. Sometimes you may want to check out this information to see what the rating is before you install it to your computer, but I do want to use this specific plugin.

From here, you want to download it. So, if you do have a Mac, which is what I am using, you want to double click and scroll down to where it says “download linked file as”. You want to make sure that you always save it as a zip file. It should come up automatically for you. Then, you want to go ahead and click save, which I have already done prior to the video.

Now, we’re back here on our dashboard. What we want to do from here is open up the plugins link on the navigation menu. We want to click
Add New, and then you want to scroll over to where it says Upload and click. From here, you can choose any file that you want to upload. We want to choose the file that we just downloaded to our computer. So, you remember where it is.

You find it in your documents or desktop, wherever you saved it. After you have chosen it, you click install now, and it will be installed to your computer.

Once you’ve done so, a link will show up under setting called Contact, so now you have the contact form to fill out in order to set for your blog. If I click that, it will bring me to the Contact Form 7 page, and a lot of this is already set by default. By default, we already have the
codes for them to enter their name, their email, a subject for their message, and their actually message. We even have a code for a submit button. Most of the time this is what you are going to want to keep cause this is the main information you need when someone is contacting you.

What I’m going to show you first is what our contact page looks like, and then I’m going to copy and paste the code and show you how it
will look after we enter this information. So, to first create a contact page, you want to come to your add new page from your navigation menu. I’ve already started this. What you want to do is insert a title. It can be whatever. Contact Me, Contact Us, Contact Form, anything you would like. I went ahead and labeled it Contact Us. Then, you can have as much room as you want to enter some text. I just thought it would be appropriate to write, “If you have any questions, please feel free to contact us by filling out the form below.” So, below this text is where I’m going to paste the code, once we’ve finished. Right now, this is what our Contact Us page looks like, so you just click this Contact Us link and this is what we have, just the title and that little text we just entered.

Now, I want to go back to my contact form and since this is already by default what I want, all I have to do is copy and paste this link in
this brown box. So, you want to copy it, save of course, and then you want to come back and then right below click paste or control V or command V if you have a Mac or a PC.

Finally, what you want to do now is publish it. It’s going to take just a second to publish it. Now, when you view our page, you will
notice that the contact form is now below our text. So, they have the option to – well, the required option to insert their name and their email. Then they have text boxes to insert the subject of their message and their message. They will click send, and it will send to the email that you provided in the form.

Now, there are a few other options. So if we go back to our contact form, you have the option to add some tags. So, right here is where
this drop down menu is, it says generate tag. You have options to insert text fields, email fields, dropdown menus, checkboxes, even a quiz. You have all ofthese options to insert into your contact form. Today, let’s just show you how to insert a dropdown menu. You want to click dropdown menu, and this is the box that appears. You can create a name for it. You can make this a required field for them to fill out. The only thing that you really need to fill out is the choices. This could be any choice that you want, so I’m going to make it Male or Female. So, they have to use the dropdown menu and click whether they are a male or a female. It could be whatever you want. Once you’ve entered those choices, however many there will be – and you need to make them one per line,by the way. A new code will appear down here in the brown box.

So, this is what you want to do first to insert this into your form. You want to come over here to this text box. I’m just going to copy one of the code setup, and then you want to reinsert it, but you’re not using this actual code or the information in the code. What you want to do is change where it says your message and text area your message. So, since this is a choice, you might want to write something like “Choose One” cause that’s what will appear before the dropdown menu. Then, what you want to do next is copy this brown code, and then you want to delete this part and repaste it. That will be the new code that is entered, so now when we save this contact form and we go back to our Contact Us page, we will see what we just saw (the text boxes to enter your name and email as well as the subject and the message), but we will also have a dropdown menu that will say “Choose One” and it will also show Male or Female.

Like I said, you can make these any options that you want. So, one last thing that I would like to show you too is that every one of these options gives you a code in this green box. It’s cool because it tells you pretty much where you have to put it and what you have to do. You just have to
follow the instructions that they give you. See? It says right here put this code into the mail field below. What you want to do is copy that code and insert it down here and possibly write something like Choose One next to is so that when you get the contact message sent to your email, this will be the information that appears in that email. So, you will have everything according to what you inserted into this text box.

So, now that we’ve inserted what we wanted into the dropdown menu, you want to come back and click save. Once you’ve chosen save, you’re
going to come back and recopy this new contact for link. Then, you go back to edit page and what you want to do here is delete the old code and paste in the new one. It’s going to look the same. The only thing is that your changes will be saved, so your new things will be added to it. Then you would want to click update. I’ve already updated it, but now what you want to do is –we’re on our blog page. We’re on our Contact Us page. I’m going to go ahead and click that.

Now, as you can see, a dropdown menu has been inserted. It says Choose One, like our title we chose, and it has the dropdown menu for male or female.

This is how you go about generating different tabs for your contact form. So, please stay tuned for more videos on plugins. Thank you for watching.