Build Your Own Business Website header image

How to Convert a Static HTML Site to Thesis Part 16 – Recreate the HTML Forms

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to recreate the HTML forms using Contact Form 7. We set up the text fields, use the generate tag to configure the drop down box to specify the choices for the drop down. We discuss the difference between email and text fields within the HTML code and show where to copy and paste the Contact Form 7 shortcode to make it show up on the page.

Video Transcript

Rick: The next thing we’re going to take a look at is let’s see… services. Okay so here we’ve got this little form that he’s got, right? Sell your home with Biltmore, etc. And this form was created in… as an HTML form that was create using Microsoft’s ASPX. And we arent’ going to be using that system so what we’re going to do instead is we’re going to use Contact Form 7 to create this. But we’ll go ahead and… and so I think actually tat’s what we’ll do. We’ll just go ahead and install Contact Form 7 and then we’ll start laying it out so that we can accomplish the same kind of thing in Contact Form 7. Now this is kind of a complicated form for Contact Form 7 too so it’ll be an interesting exercise.

So we’ll come over here and load the plugin. So add new plugin, go ahead and need to keep that open and in mind. Okay and so we’re going to search for Contact Form 7 and install it. I have a whole bunch of videos in the site about how to Contact Form 7. I’m not going to repeat that information but we are going to take this basic contact form that comes to pre-built with Contact Form 7. And we’re going to add the rest of that other information to it.

So we want your first name, your last name, telephone number and email. So your first name, let me change this. Your first name and actually, we really want to generate a name tag here because let’s see… no, I guess not. We’re going to call this one first name and then… well first, we’re going to stack everything and then once we’re done stacking everything, we will arrange it. So it’s kind of two different things. Your last name and then those will be last name. Okay so your first name, your last name, your email, your telephone number. Copy that. No actually, let’s see… generate a tag… yeah, we don’t have a telephone number field so we’re just going to use another text field, your phone number and then phone number.

Okay so now we’ve got those 4 fields set up and then best time to contact you… this is a select drop down box that we’re going to be configuring. So tis’ got anytime, evenings, weekends, evenings or weekends. And so now we are going to generate a tag and that is going to be a drop down menu. And the menu name is going… we can leave the menu name the way it is. We’ll leave the id and class alone. And we aren’t gogin to have multiple selections or a blank option so it’s going to be anytime, daytime, evenings, weekends, evenings and weekends.

So those are our choices there and so grab this code. Actually, first thing we’re going to do is grab this code, paste it there and then best time to contact you. And then in the place of that email field, we are going to place this field. So we copy that brown code there and replace that email. Actually, I made a mistake here with the phone number. It’s not an email field, it’s a text field so we have to change that too. So we have a text field and just to sort of refresh your memory on what this means is this is the kind of field it is. The asterisk means that’s it’s required so if it’s not filled out, it’s going to come back and then this is the name we gave the field. So we got a first name, last name as text fields, email as an email field, text as a phone number and then the select menu, it’s not going to be a required one so we’re not going to have that there.

And then we’re going to have a section about your home so it’ll be city, property type and then we’re going to have these things. Although before we do that, before we get too far down the road, let’s just save this form. Let’s see, and actually let’s rename the form. Instead of contact form 1, let’s call it… what is he caling this thing? It is Your Information About Your Home. Well, let’s just say… let’s call it About Your Home. So we’ll save that, okay and then we grab the insert code for this. We come over to the Sell your Home page and we edit that page and we just paste that form… Contact Form 7 shortcode in there and hit update. View that page and we’re going to have the basics of the form in here. So here’s our drop down, anytime, daytime, evenings, weekends, evenings and weekends. We’ll work on styling this here a little bit as we get going. But nevertheless… so we’ve got our different pieces of our puzzle are coming together here.

So then let’s come back over to Contact Form 7 and look at this thing. And so we’ve got… we’ve got one thing it says your information. It says About Your Home. So actually, let’s do that in this contact form. Let’s put an h3 tag here and we’re going to call it Your Information. We’ll close out that h3 tag and then we’re going to do the same thing down here. See, we don’t need a message or subject so we’re just going to delete those. But… what’s it say? About Your Home.

Okay and then the next thing is city, property type. Okay so we’re going to generate another text field and the name of the text field will be city and it is a… let’s see, we want to make it required and that’s good. So the same thing we had before, we’ll have an opening p tag and then city. And then return tag so br and then our little text field and then the closing p tag. Okay so that’s city, property tpe and that’s another drop down. So opening p tag, property type and then another break tag and then we’ll generate a new tag and that new tag is going to be our drop down menu again. And then the choices are going to be… let’s see, single family home, condominium, town home… single family home, condominium, town home and then apartment, land/lot and other. Apartment, land/lot, other. I just did that to be funny. Place that in there with a closing p tag and then we have those little individual bits, size, bedrooms, bathrooms, garage, pool, lot size. Okay so then size in square feet. We’re going to call that home size. Square feet, br space and then that is going to be a text area so we’re going to generate a tag text field.

You know, in terms of max… in this case, we’re going to give it a max link because this doesn’t really make any sense for this thing to be a great, big… or actually, we can do it as a size, not a max link. And I think what we’ll do for size at the moment is we’ll say 5. Now I think that’s going to be 5 characters so let’s just see what that looks like. Home size in square feet… actually, we’re going to call it home size. Home size… let’s see how that worked, see if that worked the way we think it does and let’s make it only 5 characters long. So let’s go ahead and save this, come back over to our page and refresh it, see what the thing looks like now. Yeah, it did. So okay, that made it smaller.

Okay then we’ve got number of bedrooms, 1 through 6+, N/A, 1 through 6+. So we’re gogin to add another… well actually, let’s add a… let’s just grab this select tag here and we’ll call it # bedrooms or number of bedrooms and then we’re going to generate a select box, a drop down menu. And it’s going to be bedrooms and /a 1, 2, 3, 4, 5, 6+. Grab the code. Okay, that was number of bedrooms, number of bathrooms, 1, 1 ½, 2, 2 ½, 3, 3 ½ , 4, 4 ½ , 5 +. So number of bathrooms and then we’re going to generate a new drop down menu and it’s going to be bathrooms. It’s going to be 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5+. Okay and then the next one is garage so N/A car port, assigned space, 1 car, ½ car, 2 car, 2 ½ car, okay. N/A, car port, assigned space… chime in if you have a question please. Garage, generate tag… garage and /a car port, assigned space, 1… is it really 1 ½? Am I… oh no, it’s 1 car. Okay, just got 1 ½ in there. So 1 car, 1.5 car, 2, 3, 4, 5+ cars. So this is 4, 4, 3, 3, 2… losing track of it, okay 2. Okay, 1 car, 1 ½ car, 2 car, 2 ½ car, 3 car, 3 ½ car… there we go. Copy that, down to our garage and paste it. So that was garage, pool… no, yes community and then lot size. Obviously from Arizona… well, or some place where it means there is a pool and then we’re going to generate a new tag which is a drop down pool. Or was it? No, yes commmunity. No, yes community… copy that, replace this tag with it and then lot size in square feet. Okay and then that is going to be a text field called lot size. We’re going to give it… we’re going to let it be 8, replace that tag. And then I think what he has down here… oh, there’s more to it. How did you find the site? Additional information or questions and Contact Me. Okay, 3 more fields.

First field to look at is the Contact Me. Right now we have the submit as send. We just have to change that text to Contact Me. And then this one was How did you find the site? For a person who didn’t know there was a Spanish Inquisition… how did you find the site? No one expects a Spanish Inquisition. And let’s see, referral source and then the choices are Google, Yahoo, Bing… what else did have in there? Other search engine, link from other site, print ad, other. Instead of blank spaces, the first option, we’re going to pick that one and then other search engine, link from other site and then last one was other, right? Oh, print ad and other. Link from another site, print ad, other. Copy that one, paste the code in.

And then our final one is a text box, copy, any other questions or comments. Oh, what does he say? Additional information or questions and actually, we need to… this is a text area field and I think we’re just going to leave it like it as the moment, just like that without anything added to it. Let’s save this and refresh it.

Okay so now we have… contact the men. Contact Me.

So now we have this stuff in a list and well, all in a line, right? Now the next thing that we could do is we could you know, decide to lay this stuff out so that it was more similarly configured like this, first name, last name, telephone number, email. And although you know, I think that’s going beyond the scope of a beginning lesson because onow we will have to talk about code. So I think I’m just going to stop there.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one