17. Embed SignUp form on WordPress (No plugin)

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

17.MailChimp Embed SignUp form on wordpress with no plugin - Bizanosa MailChimp Course

Video Transcript:

Hi guys and Welcome back. In this video we are going to embed this video on our WordPress website. First we are going to embed it on, on a Widget .Then we are going to embed it on a page.

So if you can embed it this way, just directly like this. It is faster and it will not take a lot of toll on your website and the website will load faster .

So the first thing I want to do, is I want to change this to ‘subscribe to stay informed ’. Then I’m going to confirm that any changes, anything I do happens here . Then I’ll come and click and copy . Then I’ll go to my website. I am already on the widgets page . To get here you’ll go to “Appearance” then click on widgets. So I want to add this in the second Footer , which is this one here, here. To do that I will use a text Widget .

I’ll take this Text . So, I want to put it here . Then I’ll paste the code inside there. Then I will save .And I want it to be, below the recent posts. So, if I reload the page , you’ll see the form down here. So the Next thing I want to do is embed this form, show you how you can embed this form on a page. Then we’ll bring in our code , our CSS to change the color of the button .

And now I’ll go, I’ve already created a page , it’s called signup to Bizanosa. And I want to …I want to add the code here. I’ve just remembered that since the page I’ll be using is a large page, with no widgets, I will have to input a width here in Pixels. So I want mine to be about 480px. Let’s go and see. First of all let me see, if everything happens on this page. Good. Then I’ll click , CTRL C, go into my page.

Then if you are on Visual Editor , click Text . Click on Text, paste the code in there and update. So, if you go to the Visual Editor, here is the form. So if you want to add any other text on this , you can do that here. Just come and write anything else. And with that, let’s go and view the page .

So the next thing I want to do is to change the color of the subscribe. To do that, let’s just go to the code that we had…we had copied earlier. Which is this . Then I am going to paste this into … I have…what’s it called….I have Jetpack installed. So with Jetpack , there is this option that comes along . With that I can just click on that . If you don’t have that, you can go to your Themes’ options and add the CSS there. If you don’t have that you can go straight….if you are not using a child theme you can go straight to your Style.CSS for the theme and add the code there . So I’ll save. This code will work for you as well. Just copy it or type it down and copy it to your website, it will work for you. You’ll just need to change the colors to match your Website.

So when I come here and II shift Reload , you’ll see the button has changed.

I can see there is a problem here. So this one is also 480px. So what I’ll do since I don’t want to complicate this ,Because the only other option I know I can curb this is for me to go back to this and…to go back to this and to make it just use the original width of it being responsive. SO I’ll just come back here, copy this. Go back into this, Edit the page. Once I finish the video I will work on it via CSS and in the next video I’ll show you what I was able to achieve . I’ll update this. So as you can see this is, It will take the entire page but this other one has been rectified .

Subscribe to my Channel. Watch all the videos in the playlist for the MailChimp Course, for this MailChimp course, Like and share the videos. Until next time see you guys.

Comment Here

Need WordPress help? Linux Server help? Talk to us.

  • We are your own WordPress customer service.
  • We set up Linux servers and install or migrate WordPress. Learn more here.
  • We support WooCommerce too.
  • Check out our WordPress customer support plans here or contact us below .

If you have any questions regarding WordPress support, Linux server support or any of our services, feel free to reach out or read more on our services page.

Join this free course:

How to host multiple WordPress
websites on a VPS

Close me!