3.3 Contact & Find Us

For any freelancer or small business, you have to give visitors a way to get in touch with you. In this lesson, we're going to build out a page to help visitors get in touch. That means we'll need a contact form that will capture messages that landed our email inbox and any other contact details that we might want to give the visitors. Let's start off by setting up a contact page. We'll go through the same process of going to the Pages menu, adding a title, and then hitting Publish to get it online. Next, let's go ahead and reenter the front end editor. For this page, I'd like to propose a simple two column approach. On the left we'll include a contact form and on the right we'll have the map location of our business. Now I realize that many freelancers don't have physical place of business where they're located, but you might at least have a shipping address that someone can contact you through. Let's start off by adding the contact form. We're actually going to jump back over to the WordPress admin panel, and first set up a contact form and a plugin called Contact Form 7. This is a favorite WordPress plugin for many WordPress users, because it makes it really easy to add a contact form, and thankfully it's included with Bonfire. Click on Contact, and then click on Contact Forms. There's one placeholder built in already, just click on edit to start customizing it. You can see all these fields below. Basically, this has a space on the contact form for name, email, subject and message. Many times, this will be more than enough for a contact form on the web, but let's also add to that by adding a phone number field. I'm going to click right between the email and subject settings, and then click on the tell box here above. On this pop-up menu, you can choose if it's required or not. I'm not going to make it required for my example, and then I'll just click on insert. We also need to wrap in in some code a little bit, just as the other fields are. I'll just copy and paste one of these other blocks down here. Then I'll drop the code that's specific to the tell box right here, I'll customize it a little bit more to get it looking just right. Let's jump over to the mail section as well, double check that all of your settings are what you want them to be here. Then we also need to add a field for showing the phone number in the message body here below. Just paste in that same code, this will make what the user submits visible in the email that we will receive. That's it, just hit Save and then jump back to the editor and insert our contact form as you can see me doing here. Now, after we've added the contact form, let's go ahead and split this page into two columns. On the right we're going to add a map. I'll open the row options and choose the layout that splits this into equal columns. Let's add another contact block by clicking on the plus sign. This time we'll choose the Google maps option. We need to jump over to Google maps and find our business on the map by searching for it. Let's now click on Share and jump over to this Embed tab to grab the code we need. I'll go and copy that, then jump back over my settings and paste that code in. Let's go ahead and lock that in. And you can see we've created an easy to use tool for creating directions for our visitor. We've made it easy for visitors to get in touch via email or contact us with the form, plus find us on the map. Let's put the finishing touches on the site in the next lesson.