Creating a smart contact page for your blog

Bjork Ostrom walks through building a contact form with Wufoo that only shows relevant fields based on why someone is contacting you. Use conditional rules tied to a dropdown menu to cut down on confusing emails, set up reply-to so responses go straight to the person who submitted, and embed it on WordPress with a shortcode.
Chapters
Let's talk a little bit about contact forms. Not just any old contact form, but smart contact forms. Before we do, I want to introduce myself. I'm actually on the right side right here, looking all sly. That is my wife Lindsay on the left that I am giving the kind of sly eye to. And we run this blog called Pinch of Yam. And we also run a blog called Food Blogger Pro. And we want to help you start and grow your food blog, or maybe even just your regular old blog, whatever that might be. So today we're going to be talking about contact forms and we're going to be talking about a smart contact form. And a smart contact form helps you divide up and weed out people that might not need to contact you because you're able to kind of intercept them before they get to the message area. Now, I'll say this real quick. If you are just starting out, you can probably just have a really basic contact form where you have the person's name, email, and then the message. But as you grow, you want to create this smart contact form. So let's take a look at how it works. First, it's going to say I'd like to contact, and you can pick between Lindsay or me. So let's say that somebody wanted to contact me. They'd click my name and it would open up for the reason for contact. Now, on your blog, you might not have this pick a person option. You're probably just going to have this reason for contact. So let's say they picked me and then they picked Reason for Contact. And they said, how do I get started with my blog? Now, instead of just selecting this and writing a message, we have this block of text that will redirect people to a couple different places. And I won't read through this. You can go ahead and go to this page if you want to see how that works. But the basic premise with this is that we want to supply people with information that might be helpful and might answer the question before they get to the message area. So another example is people might ask about an ebook. We have ebooks for Pinch of Yum. And if they select that, it will have some FAQs here and then also a tip for downloading the ebook to the iPad. So these are some things that we've noticed people have had questions about a lot of. So how do you set this up in Wufoo? Well, there's a couple different options for Wufoo. Wufoo is a form creation tool. Because it's really hard to create this kind of form on your own if you're just coding it. So we like to use this tool. Now, you can create a free account, but if you create a free account, you won't be able to have these smart form options where you can create these rules. You just be able to do the name, email and then the message area. So that's an option, the free account. But the account that we use is this or that I'd suggest is the ad hoc plan. And at this point it's $15 a month. So once you sign up for that, you go to this area. You'll be at the form manager area. And let's step through and create a form kind of like this. So I'm going to go ahead and click on new form and once I'm in here, I can click up on this top area here and I can just call it my contact page. I won't put anything here, but you can go ahead and put a description area if you want. And then I'm going to start by saying add a field. I want to put in name at the top. And then I want to put right after that email. So I'm going to select email and then right away we're going to start building some of our form rules. Now, we're not going to actually create the rules yet. We're just going to put in the different areas that people will eventually see. So the first thing that we're going to click on is drop down and select. A choice is not what we want to say. We're going to say what are you contacting us about? And then we are going to pick some choices. Now I'm just going to use two examples here, but for your blog, you might want to have a whole list of different reasons for contact. So. So one of those I'm going to say, just wanted to say hi. Another one of those is maybe a question of can I use your recipes or your pictures? So that's a common one. If you have a food blog, people are asking that a lot. And then how about this? Let's pretend you have an ebook or some kind of product. We're going to put in a question there about ebooks. I'm going to make this a required question and I'm going to do that with these as well. So I'm going to click required, required. And then what I want to do is add a few other fields. So I'm going to add a section break. And for section break, this is going to be kind of some information. This is where we're going to put in that. That tool tip for people that's going to maybe answer the question before people send in their support requests or their email. So this is going to be for. Just wanted to say hi. So I'm going to put that in as the title and then under instructions for users, I have already typed this out, so I'm just going to drop that in and we're just going to have a quick little note here about people that just want to say hi. So we put that in. Great. After that we want to put in the message field and in order to do that, we just have to do a paragraph text and it's going to be called message and that is required. All right, so great. We have our. Just wanted to say hi and then the message for that. Now we also need to create the Can I use your picture or recipes? So I'm going to go back here and then I'm going to add another section break. And I'm actually going to put that right up here. I'm going to drop in that header or the field label and then I'm going to go back to my other form here. I'm on the other page and I'm going to copy this over. Now this is going to look a little bit more complicated because there is actually some HTML in here. So if you look at this right here, it says strong. What does that mean? Well, that means basically bold. And if you look at this right here, there's all this code. What is that? Well, that's actually just a link. So that's all HTML that you can use within the form in order to make it a little bit more dynamic and a little bit. Some certain areas pop out. That's what we're doing here. We have personal website in bold. We have business website in bold as well. We don't need to add another message area here. So we're just going to keep moving on. I'm going to go back here. Oops. Go back to here and say I have a question about one of your ebooks. I'm going to copy that and this is going to be our last section break. So I'm going to put that in. If this doesn't quite make sense yet, it will in a moment. When we go to the next step, I'm going to paste in some text there. Great. So we have our three areas. We have our message and then we have our question. What are you contacting us about? Now what we want to do is save the form and set up Some rules for this form. So I'm going to say save form and then I'm going to go back to the form manager. Now, two things that we're going to do here. The first is we're going to set up the rules and then after that we're going to set up notifications. So let's click on rules and I'm going to say create a field rule. And the first rule that I'm going to create is if somebody answers what are you contacting us about? And they say, just wanted to say hi, then I want to show them just wanted to say hi section. Does that make sense? I'm going to repeat that. What are you contacting about is can I use your pictures or recipes? Then we're going to show the section for can I use your pictures or recipes? And lastly, if they are contacting us about I have a question about ebooks. Then we're going to show I have a question about ebooks. Great. Now all I need to do is click Save field rules. And once I've done that, I can go back to forms and those rules are set up and I'm going to set a notification. I want the notification to go to not that, but Bjork at Food Blogger Pro. Oops. There we go. Set reply to. This means I can hit reply from this email address and this will populate with the email address that they fill out, which is perfect. And I want to send emails about new entries. So I'm going to go ahead and click save. So far, so good. There's one more thing that I want to do. I'm going to edit this again. And under form form settings, I can do a couple different things here that I think are important to fill out. So if you want to show custom text after they're done filling out the form, you can go ahead and do that, or you can just redirect them to a certain website. So let's say that maybe you'd want to say, great, thanks for filling out my form. You can check out my recipes now. That's not the best way to say that, but you get the idea. And then I'm going to link to, let's say. Pinchofyum.com recipes. That's not the right URL, but you get the idea. And then I want to send a confirmation email to the user and I'm going to send that to their email address and the reply I'll just say is my email address. So I'm going to save that form and then I'm going to go back to the form manager and I'm going to click on View so we can take a look at our form. Now. Now, this isn't where we're going to put the form. This is just an example of what it will look like before we embed it. So let's fill this out. Bjork. Ostrom. Bjork. I'll use Pinch of Yam. Just use a different email address. What are you contacting about? Just want to say hi. Boom, there's our text. Can I use your picture? Boom, there's our text. And last but not least, drum roll please. I have a question. There it is. Then they would fill this out with their question and they could say, blah, blah, blah, hit submit. Great. Thanks for filling out my form. You can check out my recipes now. Now that look, it looks like this link didn't work. So let's go back and take a quick look at that and see if there's something that we did wrong. I put this, the end of that tag in the wrong spot. So I'm going to switch that over. That was a coding error. So if you're like what, it's not a big deal. I'm going to refresh this. There it is. Recipes. So if I click on that, it would go to what is a broken page on Pinch of Yam. Because as we said before, that doesn't exist. All right, so we have our form created. Now what do we want to do? We want to put this on our website and we can do that by using the Wufoo plugin. So the plugin that you want to look for is WufuShortCode plugin. And once you install that, you can create a page by going to Pages Add New and that will pull up or that will allow you to create a contact page like this. So if I open this on Pinch of Yum, you can see it's Pinch of Yum Contact. Really basic contact form, but it's a smart form. It's going to help cut off any questions that might be able to pull answered really quickly and all around just a better way to handle your contact form. After you install that plugin, you create your page. All that you do is you would go to Wufoo and you would say code and then you would say embed form and you'd go for the Wufoo shortcode and you'd copy that and you just paste that in and you officially have a smart contact on your site. Last thing I wanted to say is if you are interested, you can go to foodbloggerpro.com ebook and that will pull up a page where you can subscribe to the Food Blogger Pro email list. We'll send you a book, it's 10 mistakes that bloggers make and how to Fix Them, and send you weekly tips to help you improve your blog. Thanks so much for checking this out and we will talk to you again soon. Sam.
More from ChatFBP

One more reminder to tune in here to the latest podcast! https://pod.link/1014116331

One more reminder to tune into this week’s podcast! https://pod.link/1014116331

A glimpse at our October coaching call all about returning to your blog. Replay on FBP!







