20. Using Popup SignUp forms in MailChimp

Last updated on October 31st, 2020 at 04:28 am.

Video Transcript:

Hi guys. Welcome back. In this video we are going to take a look at popups in MailChimp. So first, let’s go to our list .then let’s choose our Signup Forms . The you will scroll down and go to subscriber popup.

This is the initial form that there is for the popup. So if we come here to preview popup. This is the design that you will get initially . So it will just look like this exactly if you embed it on your webpage . So I’ll close that.

The different types of layouts are here. You can take one whereby the forms are like that and there is an image up there. You can take one where the image is on the right and the form element are on the left , where the image is on the left and the form elements are on the right.

So I’ll choose this one. Then I’ll see if there is anything I need to change. You can change the font if you wish to. You can change the color of the text .If you want to give a different name to the button it’s okay, you can do that here .For example if you want to say, ‘Signup’ or ‘Get it Now’ this is where you’ll change that. You can change the text color here, for the button. you can change the Background for the button, you can change the Hover color for the button .

You can align. You can align the elements. Left is okay for me. I want the button to be full width.

The modal styling, so if I want to change the color I will do that here . If I want to change the overlay opacity I will do that here. I think fifty is okay. At least that will make area behind the modal window visible. So what I mean is..this here.you can see this is an opacity of fifty percent .So if I increase that to maybe ninety, you will see it won’t be as visible. yeah so that’s what the opacity is. So I will put mine at forty.

So that’s for the fields and the layout .that’s for the design. The design of the form. Then I will go into fields. Keep in mind that we have this layout whereby the image is on the right and the form elements are on the left.

Moving on, I’ll go to Fields .Then, only email is being shown. I want the first Name there .i also want the second Name there . So I can make it required by clicking there. So this will be required.

That’s it, then I’ll move to content .As you can remember, the element. Here which has 450 by 400 px, that is the suggested dimensions . For me I don’t really mind. I am not going to be using this, so I can just choose the image that I had earlier uploaded into my MailChimp File Manager. So I’ll choose this. I’ll select it . So the body, you can say something here . Let’s say ‘subscribe to get the best free video courses’. So that will appear here .that’s where the body element is. You can add a link here just by writing something ,selecting it .Clicking there and then you add your link here. This is familiar from when we were working with general forms. So that’s it. You can also add if you want something on the footer. So you can see there.

If you want to put something maybe some Terms and Conditions you can put them under here. Here on the footer. It will appear down here . So that’s done for the content.

Then let’s take a look at the settings tab .In the settings. Popup delay , do you want it to appear immediately? Not really. I want it to appear after 2 seconds.

‘Max Popup width ‘ , ‘ you will be overriding the recommended width for the modal .‘ I think 980 is pretty wide but let me just leave it there.

This is good enough so I will just, I will just come here and publish . Before I do that let’s preview our form .So it will be something like this . If this is what you add to your website it will be something like this . Then I’ll publish . I will publish the form the way it is. Then I’ll view the code. I will copy the code, CTRL A, CTRL C.

Well, if I put this code into a WordPress website it’s not going to work . I don’t know why that usually is but it doesn’t work with WordPress until you do certain hacks . So I’m going to use a pure HTML file that I had created . The one we used for our first demonstration.

So I want to put the code in the footer . let me increase the window size . Since this is on my computer, I’ll need to add… Then we’ll preview it on Firefox . This is how it will appear, based on how you designed it on your MailChimp account . If you are putting this on a pure HTML page or you can try putting it on any other page, it will work fine. With WordPress if I put this code on the footer or the header of the WP header.php or the footer.PHP , it’s not going to work.

The other way we’ll do it will be via a plugin. So we’ll use a plugin for WordPress .I know most people use WordPress so ,so you can find out which other plugins or Modules are there for your CMS if you are using Drupal or you are using Joomla or whichever .Just find out which other plugins are available for you guys. For WordPress we are going to use a certain plugin .We’ll see it in the next video .

Ok. If you’ve been watching the entire course step by step, by now you are good with MailChimp and there is nothing you wouldn’t be able to learn or do in MailChimp . Like the videos , share the videos and subscribe to my channel. Until next time guys, see you.

Recommended VPS Providers

Find out the VPS providers I recommend.

Sign up below to learn how to host multiple WordPress websites on a VPS / Cloud Server.

Comment Here