Sexy Signup Pages: A Fun Guide to Customising Newsletter Subscription Pages | Rich Armstrong | Skillshare

Sexy Signup Pages: A Fun Guide to Customising Newsletter Subscription Pages

Rich Armstrong, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (22m)
    • 1. The Intro. Watch & Enroll

      0:57
    • 2. The Point of The Class

      0:38
    • 3. Create a List

      0:55
    • 4. Form Setup

      2:17
    • 5. Basic Design

      2:13
    • 6. Custom Form Options

      1:46
    • 7. Embedded Forms

      3:59
    • 8. Custom MailChimp Forms

      4:29
    • 9. Examples

      1:43
    • 10. Sneaky Image Hosting

      1:43
    • 11. Even More Custom

      0:38
    • 12. Share Your Progress

      0:31
    • 13. The Last Video – Watch It!

      0:34

About This Class

7e9ecbcc

Ready to create a stunning newsletter signup page?

Want to make it easy for potential subscribers to hand over their email addresses?

This class is about a) creating simple custom signup pages; b) inspiring you to blow the socks off potential subscribers; and c) showing you how to get started!

Why Should I Take The Class?

  • Gathering email addresses and sending email newsletters is a leading way to create a captivated and engaged audience.
  • But signup pages are often bland and boring – which is stupid, considering we live in this information-saturated and attention-scarce age! Who wants to hand over their email address to just another somebody?
  • By customising your newsletter signup pages, you can get them looking hot and sexy, and increase your signup rate!
  • But most importantly you can get them looking like your brand and the content they contain. This way, you're guaranteed to attract the right subscribers.

Who's It For?

  • You’ll need some HTML and CSS experience to get the most from this class.
  • But there are options for non-coders too!
  • As a designer, business owner, or anyone with a newsletter, you get to learn what’s possible!


Want More Coding Classes?

If you're looking to get into coding more checkout my other coding classes:


Credits:

Music in the videos – "Back To The Grind" by Blanket Music, soundofpicture.com

Transcripts

1. The Intro. Watch & Enroll: Hey. I'm Rich Armstrong. I'm a designer, coder and an avid doodler. I'm tired of seeing these typical newsletter sign-up forms. We've all done them. Think about it. You're asking permission to get into people's inboxes. That's a big deal. Let's impress. Let's show them what our brand is and give them a compelling reason to sign up. In this class, I take you through the steps I took to transform a sign-up page like this one into something fun, interactive and on-brand. I go over examples of my own, and I show you three ways of customizing your sign-up pages. You'll get the most out of this class if you can write a little bit of HTML and CSS. Even if you're a designer, the business owner or someone with a newsletter, you'll find it beneficial. I even have an option that requires no coding experience at all. You came to make a sexy sign-up page? Let's rock and roll. 2. The Point of The Class: What is this class really about? If you imagine point A being a blunt subscription process and point B being an amazing custom and glorious subscription process, this class is about inspiring you and showing you how to get a little bit closer to point B. What I'd like you to do right now is to take a screenshot of what your current sign up page looks like. If you don't have one, take a screenshot of the one you create in the next few videos. Upload the screenshots to your Project Gallery, then as you customize your subscription process, upload more screenshots, tell us what you've done and if you want, add a link to your sign-up page. Would love to see it. 3. Create a List: So in order to create an amazing newsletter and amazing sign-up page, we need people to send it to. In the newsletter world, it's called a mailing list. So let's create a list. That's what I want to do. You need to give it a name. So I'm just going to call mine a sexy sign-up forms or pages like so. I am going to say it's from [email protected], my name Rich Armstrong, and here I'm going to tell people where and why they signed up. You wanted a sexy sign-up pages. Make sure that your contact information is okay, and you can add your own notifications if you want, that tells you how many people sign up. Then you save. There we go, that's how you create a list in Mailchimp. It varies from news data provider to provider, but the steps are fairly similar. 4. Form Setup: Once you have your list setup, you can navigate to it, and on this page, you can manage it, you can add subscribers, you can change settings, but we're really interested in sign-up forms. Navigate to your general forms page and here you can change any part of the subscription process and unsubscription process from emails to pages to forms, everything, but we're going to stick with sign-up forms. Scroll down a bit and this is what a default page looks like. It's pretty standard, it doesn't look bad but there's nothing really to it. Let's set it up for future customization. What do you want on this page? What do you want to collect from your subscribers? How is what you collect going to make their experience better? Those are very good questions. You don't want your subscription form to be so long that when people are typing on their phone they get bored or get really irritated that it's so long. Keep it as short as possible but put enough in to enhance the experience. Sometimes you don't need to do anything. Sometimes all you need is an e-mail address. If you wanted to add something, you just tap on something on the right here, you give it a name like how many cats do you have? You can make it a required field or not. You can give it a piece of help text and I'll show you what that does now and then you say, 'save field'. If you have to tap on this, 'cat please, not dogs', that's what the help text does. Now this is not really relevant to my form so I'm just going to remove it. I then type delete, like so and it removes itself. You can also edit your titles, you can put in images here like so, you can also add a message. This is really cool for giving contexts like, what is this list about? What am I getting myself into? Do I really want to be giving you my email address? Provide a bit of context it really helps here. Alright, so that's the basics of setting up a form. This is really important for the rest of the customization process. We're going to be working with this sign-up page for the rest of the class. 5. Basic Design: Now that we've finished setting up our form, we can start to customize it. In this video, I'm going to show you how to do basic customization. You don't need to know how to design, although that would help and you definitely don't need to know how to code. On this page, you just click that "Designer" tab, and here we can start to change colors. For example, let's change our Background color. We can change it to, let's go for this weird green. There we go. Check it out. You can do the same thing with Headers. You can change the Margin Bottoms, the Margin Tops, Line Heights, Font Sizes. You can change the Outer Wrappers. Inside the body, you can change the background color. You can change this to very light blue, for example, like so. Check at that, looks really cool. MonkeyRewards. We can change this image, we can set it to something like this and that's at the bottom. This can make a bit of extra money if you want. Also, you can disable it if you have a paid account. Now, one of the best things I like to do is just to make sure that our buttons are actually our brand's color. We go to Forms, hit the "Buttons" tab, and then we change this. Maybe it's super red brand and you just want that to be red, you can also change the hovered color to something like a darker red, like so. This is how you can do some basic customization. It's great if you're in a rush if you want to get things done quickly, also if you have no coding experiences, this is such an easy way to do it. But if you have no design experience before you just pop it up there, I'd advise asking a designer friend like, "How does this look cool? Can you help me out?" Now this is basic customization, for the rest of the class we're going to be focused on total customization. You're going to want to know a little bit about code or involved in code a little bit. To preview what you've done so far, just copy and paste this. You're all here, open up a new tab, and paste it and there we go. That's what it looks like in the world. 6. Custom Form Options: How do I get my Mailchimp forms looking like this or like this? That's a good question. There's two ways basically. One, you can embed a form inside a websites or web page that you have access to. Since yellow, that's my yellow. You can put a form in there, and when you submit it, it brings you into the Mailchimp group. You're now into the Mailchimp subscription process. You'll get an email now and the following pages will all be controlled by Mailchimp. The next way is to customize the Mailchimp process. So we can actually customize this page, that's correct. Now this is the first page that we get to. We can customize this. We can do our own JavaScripts or CSS, we can upload images, we can draw an HTML, it's fantastic. So both ways are really similar. The only difference is the URL. You'll notice that when I do this and I fill out the form and I subscribe, I get to this really ugly page. Well, that's because I haven't installed it. I haven't customized it. This represents total freedom on my behalf. I get to customize every single segments or the subscription process. This symbolizes a lot of work. But if you're talking about getting emails from somebody or some brand for a long time, output evident to it. I don't want to invest in it, I would want to help customers. Now for the rest of this class, I'm going to show you how to embed forms into pages. I'm also going to show you how to customize the default Mailchimp pages beyond that basic form editor style. Fantastic, look great. 7. Embedded Forms: Let's get this customization game started. We're going to start with embedded forms. So navigate to your list, let's got to sign-up forms, let's go to embedded forms, and you have a bunch of options to choose from. I'm going to start with classic. You scroll down and you copy and paste what they give you. You then go to a code editor, create a New Document, paste it, and save it as something like "embed-form.html." Now, what I'm going to do is take out everything that I don't need and keep only the things that I need so that I can make a template, a blank template. There is a lot of stuff that I don't need here. So I'm just going to start deleting and you should do the same. What we really need is inputs so I'm just going to search for input. I'm going to cut them and put them at the top of the form. I'm doing this so that I can put this form anywhere. I can style it my way. I don't have to style it Mailchimp's way. This input is really important. Cut this, paste this over here. This one is to deter spam bots. We don't want spam bots. We don't need this; clear class, and then we just need that submit button. They've helped us out a bit. Thank you very much. I'm going to delete the rest of this. Then I'm just going to put a closing form tag over there. There's a bunch of stuff here that I still don't need. I'm going to take out the ID, the name, and the class. Targets I don't want it to be blank, I want it to submit in the same page and I want to perform to validate. That's great. This is really important. This u equals some really long number. It represents your account, your Mailchimp account, and this ID represents your list. Make sure that those numbers are correct. You want to send your subscribers to your account and your list. Our testing locally, we can add an HTTP colon. That just means that it'll take us to an absolute URL. The next thing I wanna do is check out. No, I need that. I really need the names of things. This tells Mailchimp what the values are. I don't need all that. Don't need all of that, or all of that. What I would like to do is put a placeholder in and say something like, "Email." Over here I can say, "first-name." Here I can say, "Last-name." I don't need that and I don't need that. There we go. I'm going to save that. I'm just going to drag this into Chrome. Have a look. That's my blank template. Now I can put this anywhere and I can customize it to my heart's content. If we wanted to, we could just put a bunch of HTML in here. Like so. Check out that. It's fantastic. From here, we can upload this to a website. We can use Surge or Git-hub to host our form or host our website with our form on it. When you submit this form, like so, you'll see that you are now back into the Mailchimp system. You're into the subscription process, which is really cool, but it's also really frustrating because it means we're stuck with these basic Mailchimp pages that we can only do limited customization on. But it doesn't mean that. In the next video, I'm going to show you how to customize these pages. Yeah. 8. Custom MailChimp Forms: We've covered embedded forms. Now let's go for super advanced custom forms. You navigate to your list and to "Signup Forms", go to "general Forms", but now scroll down and keep on scrolling down and you'll get to this "Advanced Mode" button. You may need a paid subscription to access it, you may not. Then you just go "Delete", you wrap all of your changes. That's really hectic. Now you got to "Signup Form" or any step in the process and now you get to customize absolutely everything yourself. You'll see that as soon as you've done this, your form or your page will look pretty basic like this, which is fantastic. It means that you now can customize it, you can do what ever you want to this page or any other step in the process: emails, confirmation pages, form homepages. Now, let's go back. What have they given us? Well, let's copy this and let's go into our code editor. This is the embed form, let's creates a new document, let's paste it. Now, we're going to do exactly the same, we're going to chuck out everything that we don't want, and keep the things that we do want. This will give us a base or a template from which to create our own custom pages. Let's save this as mail chimp signup. There we go. Now let's start taking things out. I don't want all that metadata, you can put your own metadata and of course, style. Well, we probably won't want to do some style changes. But the let's keep it like so. Now the foam. I don't want anything before the form, I've got an input share, there's my user account number and then here's my list number or ID. Then I'm going to search for inputs again because that's what I want. You'll see that there's these merge tags and these HTML error things. What are those? Those are mail chimp's way of inputting information into our forms, so we want to keep those. Like so, almost done. That says something about Facebook. No, don't want that. Then this is the spam bot deterrent. Fantastic and our Submit button. There we go. Now, let's just remove everything. All we have, is our form without unnecessary bits. If we drag this into Google Chrome, that looks weird. What are all of these things? Well, these are the merge tags I was telling you about. While you're busy taking over the world and changing this and making it amazing, you may want to copy it and paste it. Of course, when you're done, copy and then past it too. In here, you want to paste this, you want to say save changes, and then you want to check it out, and you'll see that none of that merged tag information is there. Now when you say subscribes to list, it says please enter a value. That is this, that piece of merge tag there. Now if you want to know all the merge tags that can be really useful, just to search for them. Mail chimp merge tags. There we go. All the merge tags rupture. You can put it in merge tags for your list name, your subscriber's first name, there last name, you can put in a merge tag for awards, you can put in emerge tags for errors, for hints, for all things. They're super powerful, they're super cool. Now, well basically you've got a template to take over the world, you've got everything that you would need. Now all you need to do is add your custom CSS, custom JavaScript, images, background images, videos, whatever you want. 9. Examples: How have I gone about customizing my sign of a pages? Well, this Yellowbelt JavaScript page is simple, is some really cool animation in the background, its just an email address because that's all I want. I want to make it as quick as possible for somebody to sign up. It has a brief description of what it includes, but not too much. What I've done here is I've got some class info, which is all laid up with flexbox. I've used the full width and full height style on the page. It's a bunch of headings and hr, and the form which only has a button and an input field. Outside of this container, I've got the scene which JavaScript adds to. It, adds mountains, it adds clouds, and then it puts a CSS class on it so that it transitions from left to right, or right to left. I've then got my share, div here with Twitter and Facebook Share icon, and that's it. It's almost the same style here. Well, I've got my content which is full width and full height, and you can see that on the body, I've got this custom image that I uploaded through Mailchimp. I then have my content which is full width and full height. Then inside here I've got a form, and inside my form, I have a few inputs. I then have a couple of h1s, h2s, and then my inputs and a button, and that's it. I've got rounded corners with border radiuses, I got a drop shadow, and I'm using flexbox again to central line the content. It's really simple. 10. Sneaky Image Hosting: This video is a sneaky video. I'm going to show you how to upload images to Mailchimp so that you can access them as images or in your CSS. Under Campaigns, Create a New Campaign. I just want a regular Campaign. Thank you very much. I want to send it to 60 sign up pages. Then once we get here, I'm just going to fill in the name. Test images, email subjects. All the rest is fantastically alright. "Next". It doesn't matter which one you select but make sure it has an image. All right. Then you browse here and you upload something. So I'm going to go into my desktop, I'm going to say images and then inbox love background. Open that up. There we go. Now if we go back here and you say you replace, you can see that this is where it is. If I just click on it, I can copy and paste this URL into something that I've done. So if I go here inside the body and we put an image tag in here, I'll just paste it right in there, and I save that. When I open up Mailchimp sign up, you'll see that my image is there. So I can use this as background images or just an image tags. It's really, really cool and it's helpful and perhaps it's a little bit sneaky. 11. Even More Custom: Well what's next for Sexy Signup Pages? Well the thing is once you've created an amazing signup page, you've still got all of those little steps to consider. So there's quite a few things that we need to edit and change, and customize. Once you've done your signup page, do the rest. Do them all phenomenally well. Make them beautiful, make them on-brand. But what if you design even more customization and integration than I've shown you, well then I'd suggest looking into Ajax form submissions and API calls. That sounds like mumbo-jumbo, then chat with developer, okay? 12. Share Your Progress: So once you start a customizing your pages, start uploading, it's your project gallery. Show us how you started customizing it. What copy have you use? What images have you used? What colors have you started to use? How does it relate to your brand and how does it relate to the content of your newsletter? Have you started doing customizations? Are they basic customizations? Are they embedded forms? Are they forms on mail chimp or forms on some other newsletter provider? Upload your progress and applaud what you've done so far. We'd love to see it. 13. The Last Video – Watch It!: You may be thinking there's a lot of work involved in making your Signup Page and your subscription process better. That's true. But sometimes the magic is just someone spending way more time on something, than anyone else might reasonably expect. This guy, Ray Teller said that. Well, that's it for this class. I hope I've inspired you and taught you a thing or two. Sign up to my Inbox Love newsletter. Follow me on Instagram and Twitter and tot ziens, which is goodbye in Dutch. Also, if you've liked this class, give it a raging thumbs up. Over and out.