Build Your Own Business Website header image

Add a Contact form Using Contact Form 7

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.

We just looked at how to add a responsive video widget to a WordPress 4.7 website. But there are plenty of other things that you can do with plugins and widgets. For example, we can add a contact form.

Use the Auto Generated Form

Let’s come back over to our plugins and add a new plugin. Let’s install contact form 7. And activate that. While we’re not going to talk about how to use contact form 7 at the moment, we will look at how to add it to your website using the automatically generated form.

Come over here to this new menu item here, Contact, it’s just above Appearance. Go to contact forms and you’ll see that there’s already one that’s automatically created. The way you add it to a page or a widget is to copy it’s shortcode. That’s this thing right here with these two brackets. This is a shortcode.

Add the Shortcode to a Page

Copy that and we’ll take it to a page. Let’s add it to smart typography. Edit that and add that shortcode right there. Update it and let’s view the page. And there’s your contact form. It’s already styled, that is this theme already comes with style for this contact form. Now that you’ve added the contact form it’s got its own style set up.

Add the Shortcode to a Widget

We can similarly add the contact form to a widget. Let’s go back to our widgets panel. Take this text widget here and instead of adding text let’s just place that shortcode there. And you have to save it.

Let’s go back to the page and reload it. And now we’ve got that contact form laid out here in the sidebar inside a text widget. Let’s go back to the widget and give the form a title. Open that up and say, Contact Us. Save that and let’s return to the site.

Now we’ve got a Contact Us title above the form. I’m really surprised that this 2017 theme isn’t using sidebars on the main page. There really aren’t. They just took the header off to one side the content to the other so there’s no place for those kinds of widgets.

I’m going to change themes here for a moment. And instead of this theme we’re going to activate the twenty fifteen theme. We have to come over here and set it up first. Let’s use the customizer for that. Customize. And so in customizing this will change our menus. Menu locations, primary menu is going to be the Crash course menu. And then social links menu will be that. Again it’s automatically making that change for us. So those are menus.

Then in terms of our widgets area, we can continue to use the customizer to set up our widget areas. So we can click add a widget. And we can either add one of these unused widgets or, look at that, it doesn’t give us access to the unused widgets. So we’re just going to save it and publish it.

Now let’s go back to our widgets panel. And there’s no footer widgets in this situation but we can come down here to our inactive widgets and we’re going to take our inactive widget and bring it up into this widget area. And the we’ll do the same thing with our visual editor widget. Save it and reload this page. This is the menu and then we’ve got our search and our video. We’ve got this on every single page.

0 Comments… add one
0 comments… add one

Leave a Comment