19. Embed signup form on WP using a plugin

Hi guys, welcome to another MailChimp tutorial video. In this video we are going to take a look at how to embed the form using a WordPress plugin. The plugin we are going to look at is called MailChimp for WordPress.

So, I’ll copy the name, then I’ll go to my WordPress Dashboard . “Add New” . I will paste the name here to search for it. Here, it is. You can see it was last updated one week ago. That means, it is an active plugin so it is safe to use.

So I will click “Install Now” then I’ll activate the plugin . So we need to go to the plugin settings. You can see it is here. Just click on that. You can see mine, I’ve already added my API . SO if you don’t have an API already, you can go here “Get your API Key” .

For me I have created, I had created this one and this is the one I want to use. So I’ll just copy it .if you don’t have an API Key already , you’ll see this button of “Create a Key “ .Just click on it and the key will be created. So you see I have created another key. Yeah so you can use any. If you don’t have an API Key already you’ll see this button, just click on that , then copy the key that is created. Come back and paste it here. I’ll disable this key once I’m done with the tutorial so don’t try to use it. Then save changes.

So as you can see it brings all…all of the lists that I have. If I had more than one list it would bring them here. And it also brings all the fields that the list has . Our list has an Email, a First Name and a Second Name. That’s all we need to do here .

Then we’ll go to Forms . The first thing you need to do, so you’ll select the list .If there are other lists here , you’ll need to select one from the lists that you want the contact form to be subscribed to. What that means is once the form is created , and people subscribe which list do you want them to be added to. That’s exactly what this, is all about.

So once we select this, you can see all the fields in the list are here. We want to add the fields. Any fields that you need, you’ll add them here. So if all you needed was the email, then this would be enough. But we also want to add the First Name. You can change the Name if you want to. ‘Initial Value’ you can input an initial value . ‘Wrap in Paragraph <p> tags’ That’s what this is about . ‘Required Field? ‘…Yes.

Add to Form …Yes we can just…Add to Form. Once you click on add to form, you can see the First Name was added here.

Then I’ll come back and choose Second Name. Well this is not a required Field but you can click here to make it required. Then, doing the same thing, just come here, click. Then click on “Add to form”.And it will be added where the cursor was .

Then you’ll save the changes. Once we’ve saved those settings, now the form is ready. What I want to do is take a look at the settings down here. So you can see MailChimp Double opt-in. Double opt-in, if you select “Yes” people will need to confirm their signup. If you choose “No” they’ll be directly subscribed to the list. There are a whole bunch of other settings here .’Hide Form after successful signup’ , you can choose to hide the form once someone subscribes successfully.

‘Redirect to URL after successful signup’ . If you have a page maybe for downloading something , you can put the link here, once they have subscribed …or it can be a thank you page …You can put the link here and once they click on the button it will automatically redirect them to this page.

‘Successfully subscribed’ .So these are the Messages. these are feedback Messages .As you can see if someone inputs an invalid email address , if a field is required , if someone is already subscribed , if there is a general error . These are the lists you…these are just feedback information .if your form was being translated. If you had translated your form to another language, you’ll have to come here and translate the language…translate all of these into your particular language .

The next thing we have to do is embed this form on our page. So to embed the form on your page you will come here, and select this . So as you can see you can display …you can display the form inside a post ,inside a page or a text widget. So Before I take a look at this, let’s just go to the page. Pages…embed it on one page and then we can see how changing the CSS options here will make things different .

So I had created this page . And just like that, once I save .I update the page then I view the page . As you can see the styling is pretty terrible. If we go back to the plugin , MailChimp for WordPress then we go into forms . If we take this, ‘yes Load Default theme’ . Let’s take the black.. the dark theme. This one. The dark theme then we come and save the changes. We see how that will appear . Well you can see that does something but not much.

I’m guessing that the issue is with my theme . Let’s try the light theme . the issue is with the theme I am using .But all of that is not a problem because you can style all of this with CSS. If you have a bit of knowledge in CSS , you can style this yourself . Yeah you can see this is the form that comes up but you can style this yourself .using the Firebug plugin you can select the items and just style them one at a time . But Maybe in your theme it will appear differently because I have used this plugin in other themes and it appeared better than it does now.

So if you take a look at the other form ,whereby all we did was embed the code directly on the page , it looks pretty neat , even for this . It looks pretty neat . This is why I still prefer embedding the code directly like I did with this. But if you feel you need to use a plugin , why not? Go ahead and use the plugin .Plus the plugin I can see comes with other options .At the end of the day this is just doing the same thing that you would have done taking the code from MailChimp, pasting it into a page . It is just the same thing .

Bizanosa / Ricky Wahowa

Ricky provides online tutorials in Web related topics. The internet connects us all. He specializes in some back end and Front End web technologies. And has acquired web Marketing skills along this journey.

We use cookies on Bizanosa.com. Continuing to use this website, implies consent of our Privacy Policy Privacy Policy

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.