Designing Sign Up Forms

So we have our lists and now we want to create a sign up form so people can sign up for these lists. So let's go ahead and click into a list that we have here. And there are a few ways to do this. 1 is on the summary page, if we don't have any subscribers yet, we can see we can create an opt in form directly here. We can also click into the silent form tab to create a silent form.

By clicking here or here or we can go into marketing and to the lighting pages and forms page, which is going to be showing you similar options. So in this case, let's just go ahead and click create a sign up form. So what type of page do you want to create or what kind of sign up form do you want to create? We technically have 3 versions, the 1 we're gonna be going over, primarily are these 2 here. Full page would be a landing page where you can have a sign up form and different other kinds of information such as text, images, etcetera, if you want to design a full page.

Typically, this is really useful for marketing campaigns when you want to drive traffic specifically to 1 page where you can have a sign up form and be able to track that information easily. A full page option could be a great option for you if that's what you're looking for. We also have the embedded form. This is something that you can put on a simplerl website. It also could something that you can have that exists on an external website as well, where you can insert a snippet of code, where a form could either be embedded into a page or perhaps pop up as a model.

So to start, let's go ahead and click into full page. And this is where we'll begin. So we can see here we have a variety of templates that are available in some plural, where you can see that we have different designs with different color and layouts, things that have already been built for you. You can just swap out the text images and information to better suit your needs. But for this example, we'll go ahead and just go with blank.

Alright. So here we have the page builder that's loading up, and you can see a variety of things here. On the left side, this is where we're gonna be putting these sections is going to contain the content that we're going to be putting over here inside the landing page. We also see that we have the ability to preview what it will look like on desktop, tablet, and mobile. And for the time being, we'll just go ahead and keep this in full screen.

Over here on the left, we have the ability to add a section. So since we're wanting to create a sign up form, we can go ahead and click add section and type in to find these sign up forms. So the first is the list sign up. This is just a standard sign up form that we can have, which has a ability to have a call to action. Maybe some text.

We also have a 2 step line up sign up form, which is the ability to have a button. When clicked, it can have a sign up form pop up on the screen as a model. And we also have the horizontal list sign up, which is in this form factor instead. So to keep it simple, let's go ahead and just go with the regular list sign up. We can go ahead and click add.

And we'll go ahead and have this be the text above the above the senate form. So let's go with sign up for this list. And maybe special offer. Whatever special offer that's going to be. Right?

We can also include an image if you want to. So we can click this stock photos. Let's go with the beach. And select an image. And you can see this is what it does.

It basically makes the sign up 1 be pushed over in this case over to the left and the image is displayed on the right. We can also flip this as well if we wanted it to be on the left. 4, we can just remove this if we instead just want to have this be without an image. We can also scroll down We have the ability to change to have a background image instead if we wanted to instead of just the the white color. If we wanted to do any custom styling, we'd also want to change the style.

Right now, it's in default. These are gonna be changed by the theme if we select default or alternate that we can select custom as well. And if we wanted to, as an example, change this to be a different color, we could do that. Let's go with something kind of blue, perhaps. And I'll just go ahead and increase the opacity here.

That's obviously really bright. So let's go ahead and just tone this down a bit. So it's a little less dramatic. Something like that. And this button, we also want to change the button color because that doesn't really look great either.

So we can go ahead and scroll down. And you can see here it says the submit button color. So we can select this and let's say we just want to make this be maybe a gray. So we'll go with a kind of great color here. Right?

And I'll scroll back up here because this is important as well. So here we can see that we have the ability to select the list that people are going to be signing up to. So in this case, for this form, let's say we want to have them be signing up for the webinar. You can see it's selected by default because we are creating the form directly inside that list. We can have the ability to have a name.

It could be first name only or full name if we want to. We can also have this be required optional. You can include the option for a mobile phone. And of course, if you have custom fields created in your account, you could add any number of custom fields here as well. We can change the text, sign me up.

If we want to, we can change the button if we want this to be narrow, instead of full. And we also can change the button size. I'll go ahead and just leave those as is. And if we wanted to have this be an outline instead, we can change that. Obviously, that's gonna be dependent on your preferences.

And then we have this notice here. We hate spine spam too unsubscribe at any time. I'll just go ahead and leave that as well. And some people prefer to have the field labels, meaning the name and the email be inside. And that could be a way to kind of tighten up the silent form so that it's not as large.

So you have this is basically detecting my information because I'm logged in as an admin. That's why my name and and email are shown here. But if I wasn't able to be detected by the system that I would just show name and email. And Yeah. So this is 1 section.

Let's say you wanted to add an image to this. I'm gonna go ahead and save my changes for now. Something that's pretty common for you to do is add some sort of picture so we can go ahead and do that let's go back to stock photos and I quite liked this picture. Why don't we just go with this photo here? And let's say that we want to have this be above.

What we can do here is we can just go to the drag tool and select and hold that and put that on top. So we can see here now that we have a page that's been made with a picture and a list sign up. And if we go ahead and view the landing page, this will be what people will see. We have the image. Sign up for this list.

There you go. And we also have the footer that's shown. We also have the ability to hide the footer if you want to. So we can go ahead and just back to edit the landing page by selecting here. And if we wanted to hide the footer, we can do that as well.

And we do that by clicking appearance and hiding the saving the changes. In that way, the only information that you see are the 2 sections. You can see it now ends there at the bottom. So that would be a full landing page. Obviously, there are a variety of other set actions that you can add here depending on your needs.

So I would recommend just going through those and seeing what's gonna be helpful. Let's go ahead and dive into the embedded form. So we can see the difference here between the full landing page and a and an embedded form. So I'm gonna go ahead and just keep this open because we're gonna be probably coming back here. And let's go ahead and go back.

And in this case, we'll go ahead and go back to the list. Actually, let's just do it from the other page. So, lighting pages and forms. And just create a brand new 1 from this page. So we can click into embedded form.

And now you can see we have different templates for this particular embedded form style. In this case, let's just go ahead and go with 1 that has already been created. I like Aurora. So let's go ahead and select Aurora. And we can see here that we have the basics of the Senate form already created for you.

Right? Is basically the size that it will be. We can say sign up today. You know, get your free ebook if that's what you want to offer. Maybe I want to change this.

Color. We can do that by selecting text color here. And let's just go with white. Right? And of course, you can click here if you wanted to change this as well if you wanted to make this a lighter color.

And we can see this is the the way it will be displaying for desktop. We also have the ability to show this for mobile. Let's go ahead and change the picture here by clicking change. Stock photos. Let's go with mountains.

It's pretty cool. Let's go with this picture. Okay. That's looking pretty nice. I like that.

This is obviously not visible down here anymore. So maybe we want to have this have a black background and maybe we want the text to be white. Obviously, this is gonna be completely up to you how you want that to look. But we can see here this is pretty much how it's going to look on mobile and desk up. And we have the ability obviously to customize some of these additional settings if we wanted to to change the designs of these things if we wanted to have this be, you know, to change the accent outline if we want to change the text color or the background colors, anything anything like that.

The the fields are gonna be visible. Right now, we have first name and email, and we can rearrange these if you want to or add additional fields. And so we can go ahead and save our changes. Now the cool thing about these, of course, is that this can be something you can place even on a landing page or on a page on your website or even externally. Right?

And where you find this the code is down here. So we can see we have an embedded code. And let's say that we wanted to add this onto our landing page. We're inside some plural where we have the page builder. What we're gonna do is we're gonna select this can copy the clip copy this to the clipboard and we can go over to our landing page and the section that we need is actually the scripts section.

Since this is a script. So we can see here we have a script section that we can add. And all we're gonna do is we're gonna delete the existing text that is inside there, we're gonna paste in that script into this section, and we can save our changes. So Now, let's say that we want the button that makes this that makes this appear. We can do that as well manually or we can just have this automatically load.

Right? And the settings for that are gonna be in the settings. So when is it going to load as an example? Maybe we can have it load on a page load. Maybe you have a certain amount of time while this is loading what I'm gonna do here just to demonstrate how this can work.

Is we're going to save the changes here. And I'm going to just remove the existing thing sign up form, so we don't get confused. So we'll go ahead and just remove this section. Okay? So all we have here is a media and script.

And here on this page, what we're gonna do is we're gonna adjust these settings. So we can see we have the name of this form. And it's a model, meaning it's going to pop up. We can obviously select inline if you want to, so it'll be embedded into the page or we can have it slide in instead if we want. Here's where we are going to be looking at what's going to trigger the form to show.

So right now, it's selected to demonstrate or or display the form on x intent meaning when you're gonna maybe go to close the tab or something like this. I wanted to show right away. I also wanted to show on all devices. I'm gonna go ahead and just reset these. So that it'll just show, you know, a bunch of times for me.

And what do I want people to do when they sign up. I want them to sign up for a list and I want them, in this case, to sign up for my list that we've been talking about during this demonstration. And you can see here we have the ability to change what happens after someone opts in to send it for the list, and whether or not the set of form is active, if it expires. And we also have chairs that we can set up as well. But for the time being, I'm just go ahead and save my changes.

And now what we're going to do is we're going to go and make sure that the changes are saved for this page. And when we look at the page, what should happen? Because we have the script here with the embedded sign up form is that the sign of form should now pop up when this page is loaded. So let's go ahead and view this page. And we can see here that the pop up showed directly when the page loaded.

So this can be a good way when you have a website or a landing page when you want something to grab someone's attention. You can have this showed. So so that when someone arrives to the page, they can immediately subscribe to your newsletter. Of course, you can adjust these settings for or when it is that it's going to be displaying. If you wanted there to be a certain amount of time, you know, for example, after 10 seconds, after a minute.

So it doesn't, you know, manually automatically load right away. This might be something that you want to adjust. But you can see that this does function of course, we have the ability to have the button where someone clicks to to sign up that could load instead. And that's gonna function very similarly. To the 2 step sign up section, which is this 1 here.

If you wanted to have the button, it's going to load the form. I'm just I'm gonna go ahead and save this to show you what that means or how that could look. And the time being, we'll go ahead and just remove this section as well so we don't get the the second the script showing the the sign up form in this case, and we'll go ahead and click view sign up form in this case. See, we have the and if we click this button, what this is gonna do is this gonna have the modal pop up when the when the button is clicked and this will be a sign up form that you can also configure just like the regular sign up form. So you can click off here to close that.

And so this is sign up forms and landing pages. I really encourage you to go ahead and dive into a lot of these design options, making sure to also look at the appearance settings, looking into emzing your theme so you can get better control of the colors and things that are being used. And to use a variety of these things, not just line pages, but also taking advantage of the functionality of the embedded forms as well, which can be pretty powerful in allowing you to get more subscribers to your lists. I hope this helps.

Intro to Simplero

Course Content

Introduction

How to create an Opt In

Email Marketing in Simplero

How to Build your Marketing Website

How to Create Your First Product

Building Your Content in Simplero

How to Automate things in Simplero

Final

Designing Sign Up Forms

0 comments

Leave a comment