How To Add A Sidebar Email Opt-in Form To Your Website

[00:00:00] In this video, you're going to learn how to add an email opt in form to your website's sidebar. So, let me first show you what I'm talking about. On your website, if someone goes to a blog article this is the sidebar right here. And so, why you would want to add an opt in form here on your sidebar is because if you are sending traffic to your site, like you are doing content marketing on social media and posting links to the articles that are on your blog, then this gives people an opportunity to actually sign up and get your lead magnet. In this case, it would be a free report from this site. And from other types of sites that we support on the profit platform, it also be a free course or other lead magnets that you create yourself, depending on the site type. And so for this particular site, which is a PushButton AI course sales type site, then the lead magnet is going to be a free guide that they are promised when they opt in on the site. So I'm going to show you how you can add an opt in form over here, that's going to help you with getting people who visit your site and are just looking at the content pages to sign up for your lead magnet.

[00:01:13] So first we need to log into the site dashboard. In this case, kittycareacademy.com/wp-admin is where I want to go to do that. And once I'm logged in, I may need to click the “show all menus” link over here. It's not showing this time, but in case it is then I need to click it to be able to see all of the menus. And then from here, I want to find “Appearance” over here in the left hand navigation menu. If I hover over that, then I can come over here and click “Widgets.” and this page shows you the widgets that are already set up. On your site. And you don't need to really worry about too much. If you'd like to take a look here, you can see that this first widget is recent articles, and the second one is categories that have been set up for the blog posts on this site.

[00:02:13] In this case, we're going to add a new widget, so to add a new widget, what we're going to do is click this plus button, and then we're going to search for “HTML” because what we want to add is a custom HTML widget. And so if I click on this, it just goes ahead and adds it over here. Now I want to move it up to the top so that it's above the other widgets. And so to do that, I just need to click on this “move up” arrow until it is at the top. And now we have to go get the code that we're going to insert in here.

[00:02:51] And this part will take us a bit of time to get done, and if at any time you just need to pause the video and get something done and then restart it, that's okay. As long as you just follow these steps, you will be able to accomplish this. Parts of what we're going to do are a little bit technical, but it's actually made very simple by our Profit Platform CRM. So that's where we need to go next. So go over to your Profit Platform CRM and log in.

[00:03:16] And normally you will be at your dashboard when you log in. And so then where we need to go in order to create this form is to the “Sites” area. And don't worry about what that means exactly, but essentially what we want to do is create a form and it will automatically put us into the correct place for creating a form. And so we can either click this button here, or we can click the one up here to start creating a form. And by default it's going to create an email opt in form for you. Now you can change this name if you'd like to, it doesn't matter what the name is really, so I'm just going to leave that one as it is. And then you can see that it has these different fields. Now, generally speaking, you want this form to be as simple as possible in terms of what you're collecting, it “reduces the friction” for them to go ahead and fill out this form and give you their name and email address.

[00:04:10] So we're going to pare this down just to those fields. So first of all, I'm going to get rid of the phone number. And secondly, I'm going to remove this consent section here by clicking on it and then just clicking the X. And then, there's a couple of other things I want to change. First of all, I do actually want to require their first name and last name. So when I click on this field, then I can select this to make it required.

[00:04:39] And when I click on this field again, same thing, just make it required. And now our button text just says “button,” so we want to actually change it to be a “call to action.” I am going to change the text here by just clicking on the button area itself and then going over here to change the text. So what I'm going to change it to is this. “Yes, please send me the free guide.” Okay, and then just to make it a little more visible, I'm going to go ahead and bold that, and that should be all we need at this point. Now, I want to add some text that will help people understand what they're going to get, in other words, the free guide, when they opt in. So I will come over here to this plus button here, and I'm going to add a text element from down here. I can just click and drag that over and drop it where I'd like to have it. And then when I click on it, I can customize it. So what should you put here? Well, one thing that you can look at is to go ahead and go over to your website homepage which is the opt in page on this site. And I can look at the text that's right here and you can see what it's promising is a “free comprehensive guide called Meow Mastery.” So what I'm going to do is just copy a little bit of this text, not the whole thing. And so I'm going to just copy this part. So this is just a quick way that I'll be able to not have to write or come up with a bunch of text. So I'm going to paste that in and then I'm going to add some more text to it, and I'm going to change it to this. Now, obviously this is very large over here and so I'm going to set the font size to make it somewhat smaller. So I'm going to actually move this down to 20. And I think that might end up being a lot better. Now we can always modify this later also. So I'll show you how to do that as well. So that'll be part of this video. We'll be tweaking this form a little bit in a couple of different ways so that you can see how that works.

[00:06:39] So what else I'm going to do right now is I'm going to select all of this text, and make it bold just to give it a little bit more weight. Okay, so now that I've done that, I'm actually pretty close to done with the basic form. And so I'm going to go ahead and save it. And then if I want to, I can preview it. And that's what it's going to look like. And let me close the preview. And then I can use this “Integrate” link here to get the code that I'm going to need. And so, you want to make sure that this “Inline” is what's selected, which it is by default, and then use this button here that says “Copy embed code” to copy the code. Just click it. Notice it says it's copied to the clipboard. And now we're going to go back over to our tab where we have the Widget area open. And I'm going to paste the code for the optin form right here. And now I can click “Update,” and that is now saved. Now I can also preview it to see what it would look like. And that's not exactly what it's going to look like on the sidebar, but that is a preview of how it will appear. So let's go see, over here on this tab, I'm going to just go and see what it actually looks like. And we're going to go to the cat blog where I am here now.

[00:08:04] Now, just so you know, this right here, this top navigation bar that's showing up is not going to show up for anyone who is not logged into your site. So this is only going to show up for people who actually are customers. And so you don't need to worry, visitors coming from social media or whatever are not going to be logged into your site. They're not going to see it. The first thing they're going to see will be this. Now, if you look at this, you can see it's sort of big, and it's taking up a lot of space here, and so there's a few things that I could change about it. First of all, I didn't really think about this earlier, but I don't really need to have the “privacy policy” and the “terms of service” links on this form because they are already at the bottom of the page on this website. I can remove that to make it a little bit smaller. And then I can also change a couple of other things here that will help make this a little bit smaller. So back over here in the CRM, I can adjust a number of things. And so I could start with looking at changing the font to a smaller size. If I'd like to do that, that's one option. Or I can also do some things like reducing the amount of padding. Because how much padding is used in terms of the number of pixels in the sidebar can make a difference on how big the block of text looks. So you notice over here, there's quite a bit of padding around the text, that's the 20 pixels on each side. So what we're going to do is cut that down, and I'm going to reduce that down to five pixels, and see what that looks like. And then I hit save. Now for some changes you make, you will have to copy the code again, and for others you won't. In this case, if I go back to the cat blog and hit refresh, you can see that it automatically changed it without me having to go and change the widget code again. Oh, I did not remove the privacy policy and terms of service section. So I'm going to do that. And to do that, all I need to do is click this. Now, this one, I may actually have to update the the code for, but let me just try it and see what happens. I'm going to hit save, go back to the blog and hit refresh. And it actually did work to remove it.

[00:10:21] Okay, so one last thing I want to change is actually see if I can reduce this top padding, just to make that a little bit smaller. Now to do that what we need to do is actually click on the background of the form, and then that will show you the settings for it. If it does not show the settings for it, you can click this button here to show the style and options. Okay, now we're going to scroll down and you can see that it has 30 pixels of padding on the top and 40 on the left and 40 on the right. So let's go ahead and reduce those as well. So I'm going to bring this down to, I'm going to say five pixels again, and then on the right and left, let's also set those to five pixels as well. And let's save that and then go see what that looks like over on the website. And so I'm going to go ahead and refresh over here and that's pretty good. And because there is already padding built into the sidebar, I think this actually works pretty well.

[00:11:19] So, there are a number of options that you can change over here on this, including you could change the color of the font itself on the headline, or you could change the color of the form itself. There are a lot of options that you can change on this form. And it's something that you can take some time to try out different things and see what they look like until you get to the result that you're looking for.

[00:11:42] And so now that we're happy with the form, then we are done with adding it to the sidebar. Now there's another step that we're going to need to do. So now that we've made sure that the form is saved, then we can just go ahead and go back into our CRM. This next step is that we need to make sure that when somebody signs up, that they are going to be tagged as a new lead so that they will go into our automation that we've set up for the “new lead workflow.” Okay, and that automation starts with them being tagged as a new lead. So by default, that opt in form that we created does not add any sort of a tag. And there's not really a way to do that directly. So what we can do though, is set it up so that whenever a new contact is added to the CRM, they're automatically put into the New Lead Workflow.

[00:12:34] So we can just click this button here to create a new workflow and select start from scratch. And then there's just this reminder showing us that the “allow reentry” is now on by default. That's a setting, not something you need to worry about right now. So I'm going to click, “got it.” And this, will be a very simple workflow. to do is change the name of the workflow. So we'll select this text and delete it. And I'm going to call it “tag all new contacts with new_lead tag.” So to do that, first thing we need to do is add a trigger. And actually we don't need to really search the triggers because the one we want is right here. ” Contact created.” And that's all we need to say. That's going to be the trigger. The trigger is when a contact is created. So we'll save that. And we're going to add a new action by clicking this plus button here. And in this case, we want to add a contact tag. So again, we don't need to search for it, it's right here. I'm going to click on that and we're going to select the tag that we're going to add, which is this one here, it's already been created for me, “new_lead.” And that's all we're going to need to do here. So we'll save that action also. And that's it. That's the whole workflow. So all we have to do now is save it, and then publish it.

[00:13:54] And so that is saved. And now what will happen is anytime that a new contact is added, it will get tagged. And don't worry that if you're using an opt in form from your website that already adds a tag, like the one that is on the PushButton, AI websites, it will not be any kind of an issue when somebody is added and already tagged with that “new_lead” tag. So this workflow will still run, but it won't actually do anything because it will see that the tag is already there.

[00:14:25] And that's all we need to do to set that up so that any new contact that comes into your CRM will automatically get tagged with the “new_lead” and then that will trigger this “New Lead Workflow,” and remember that in this workflow, the first thing that happens after a slight pause, is that it's going to go ahead and send them the free guide link in the welcome email.

[00:14:47] So that is how to add an email opt in form to the sidebar of your Profit Platform site.