Video Summary

Alright, in the last lesson, we went over Contact Form seven, we understood that all these different menu items can give us different inputs for our contact forms. And now what we want to do is figure out how we can set up the series of HTML codes and short codes, which is basically just these little building blocks or input blocks for this contact form, and how we can make this Contact Form bars. But before we get to that, I want to make sure that we made this insurance form copy and we want to be when we get down later down the road and we’re testing this. We want to make sure that all we have to do is refresh the this page versus the Elementor page with Elementor pages saving a lot of rooms just full page and all that as we made verses of the refresh on the homepage is just a quick boom it just reads reads the code and stuff trying to upload anything. So what I’m gonna do is I’m gonna come over here and I’m gonna click insurance form copy. 

And also to is that when this form got shorter, it made the image like the right size. So I just wanted to throw that out there too. If you look over here, right this, this is super long form. So it made the picture extra large. Let’s come back over here and where to set and click update, which is fine to go through, and we will refresh. 

And now when we get done editing some stuff, all we got to do is click Save in the contact form and refresh this and we’re good to go. So when I’m always looking at any kind of code that’s within WordPress, and it has a white background, black text, and it’s not giving, you know sorting out and colorizing the different tabs and classes and makes this really hard to dissect. So what I want to do is I’m gonna go over here, I’m gonna copy this. And I’m gonna go over to code pen. And remember in the HTML and CSS lessons, we use code pen. If you jump to the section, write code pen.io And your browser and just click open pen, and you will see the section and basically what we’re going to do is we’re going to paste this into the HTML. 

And now we get a full look of what this HTML actually is. And also do it I didn’t want to say as I drag this down to the bottom to keep this within where we can see a very well, I moved over the CSS, you probably started off or something like this, but I just move everything over because I want to be able to see this as clearly as I can. Right. So what we’re looking at here now is is that we got these little shortcodes or input codes with these little brackets. And that’s what it’s showing us here. And we are basically kind of seeing when we have like a little h four and a little span element. Right. 

So we’re seeing that, but really, we’re not seeing any stylings. We’re not seeing the input values because these shortcodes are specific to our WordPress theme and our plugins. And also to is that these classes are setting up different stylings that are through the WordPress theme CSS that’s in like the database and the site files. So we’re not going to see that here. But what is nice is that we get to see the outline of what is happening. So what I’m going to do is I’m going to start off with the bottom so I know that submit get a quote, we’re gonna need that we’re gonna need that button. And I’m gonna look up and I really don’t want if you look back at our form, we got this little slider where we go from zero to 90,000 and we decided that we did not need that. So we’re gonna come back over here, and we see that we have this insurance balance, you know, class and get insurance balanced input. So that’s what that is. And if we come up here luckily for us, we were or the developers made the classes really simple. So we get this nice, get insurance range slider. So I know that slider is starting from this div. So if I click right in front of this div, you I don’t know if you notice, but this div gets highlighted. So that means that this div is basically saying up between different inputs from between here and here. So now if I come and highlight all the way up from what we just clicked on, and I delete this that just goes away. Right? So we just deleted that down here. Now, same thing appears we got the insurance range, and we have our, you know, limits of balance and we also have our $68,000 Right. And that’s if we look back over here, that’s where if we started off at this is where it was asking to be sat was like it was like 68,000.

Now we’re starting to see a really nice outline. So we got the two divs right here and the ending tags, and these three are basically the full name, email, and then we have the insurance type. But what we don’t really need is we don’t really need a insurance type. So now if I click on in front of that, we see this div highlighted and now we can come here and delete this. And now we have a really simple we have your name, email. And quote, right. So let’s just copy and paste this in to our contact form here. And we can delete this because remember, we made a copy. So we’re not losing out on the original. So if you place this into here, and we click Save. 

We have the full name. We have the email address, we haven’t get a quote. But again, in the previous video, we talked about that if I was going to save this contact form, I think that I would want to have a phone number. And I’d want to have a section where they can type in about their problems. So let’s say we wanted to have if it was say instead of home it was you know, maybe service and someone could say well my oil light is on and my check engine lights on right I just want to get a service or maybe it’s the auto repair or auto body repair and just say I got into a fender bender, when can I get my bumper replaced, right? I want to know I want them to tell us a little bit about what what’s going on in their lives and you know how we can help them out. So how do we do that? Right? So what we’re looking at here is we got this div and it’s basically saying it’s given us a styles that we have for you know, white background. It’s got this nice little section here. So what I’m going to do is I want to keep that due because that’s what’s given us the style. So I’m going to copy this and I’m going to enter and I had to just use spacing because tab on the browser goes to I think a tabs down to save. 

So I’m gonna hit and paste and now what I can do is I can figure out what the next section is. So I want I want their be able to get their phone number because maybe they maybe they don’t check their email and it’ll be about want to be able to text them or call and leave a message later because if you have their direct phone number, the odds of you getting a hold of them are a lot higher than just an email alone. So what we’re gonna do is we’re going to do tell as an telephone, and the reason why I set up tell is that until they use like, kind of like the CFO or like HTML version of where you want to tell colon and put the phone number in and now you got to click to call type of deal. And so that’s what I have to tell instead of phone. But let’s just click on that. And instead of tell 390, I want this a little bit more. 

Little bit more descriptive. So my new phone and right here, I miss the default value. This is where you could put something in there. If you want it to say if you want like the default value is that if you don’t put anything then you will get this. But this can also be used as the placeholder. And basically what that is, is that instead of having a label, like in the previous example, we can just put in a placeholder here. So when you click and you start typing, it will change right? But this way that these are labeled without having a top label. 

I didn’t have I didn’t make this a required and if you wanted to, you can just come here and put in a little asterix and it makes it required or if you wanted to just do it all over again. You could just delete it. Click on tell make sure that this is this field is required and then you can put an insert tag and now you have this new unit or input I mean, setup. So I want to do too is I want to end this div tag just like the HTML, right? We need to every tag needs a closing tag. So we’re closing this tag around this and now if we click save and now we refresh this boom, we have the phone number right here. But we still want to have the text option available. So what I’m going to do is I’m gonna come back down here and do the same thing. I’m going to copy this nice little class we’re going to enter and do my little pluses or middle spaces. And then what I’m gonna do is I’m going to do text area because text area gives us more of like the paragraph settings so real quick text area. 

And I’m not going to make this required because the more you require someone to fill or the more stuff you did requiring to fill in your conversion rates, so the people who will fill it out, the amount of people who will fill it out goes down. So I want to leave this as an option for them. But at the end of the day, I really need to know their name, their email and their phone number I need a way to connect with them because otherwise, we need to require that because otherwise a contact form coming in is basically useless to us unless we can get a hold of the client. But we can still get a hold of client without knowing exactly what they need. So we’re gonna leave this empty but we’re going to do is we’re put in text area actually just put in tell us more. 

And now I have this tell us more section. So what we just did as we went through and we copied all of our information or recovered all of our information into code pen, we dissected it, we got down to the elements that we needed to, we moved it back into contact form seven and we added a couple of extra features while utilizing their classes that I have all of their CSS already attached to it. And we were able to take a form that was nowhere near what we needed and made it just simple, easy and ours right we didn’t run and get their full name, their email, their phone number and a little bit of a tell us more about what’s happening. So I’m going to pause this video because we went over a lot and in the next section, we are going to figure out how we can set up and fix this mail. We’re going to test out our form and we are going to maybe make a couple of extra stylings to the section and we will call it a day for the get the get a free inspection section of our website. So with that being said, let’s hop over to the last lessons. of the section and I will see you guys there.