Mailchimp WordPress Sign Up Form Tutorial (WordPress Integration)
📺 ดูคลิป · 👁️ 63,111 views · 📅 2020 · ⏱️ 21:28 · 🌐 Websites / WordPress / Hosting / Builders
📌 สรุป
คลิปนี้สอนวิธีสร้างฟอร์มสมัคร email list ด้วย Mailchimp แบบครบ 2 รูปแบบ ได้แก่ Pop-up Form (ปรากฏอัตโนมัติเมื่อเข้าเว็บ) และ Embedded/Inline Form (ฝังในหน้าเว็บ/บล็อก/sidebar/footer) โดยเชื่อมต่อกับ WordPress ผ่าน plugin ที่เหมาะกับแต่ละแบบ เนื้อหาเน้นปฏิบัติจริงตั้งแต่สร้างฟอร์มใน Mailchimp จนถึงทดสอบว่า subscriber เข้า audience list จริง
🔑 ประเด็น / ขั้นตอนหลัก
- ส่วนที่ 1 — Pop-up Form: ไปที่ Create > Sign Up Form > Pop-Up Form ใน Mailchimp เลือก audience list แล้วเข้า form builder
- ปรับ layout (มีภาพซ้าย/ขวา/บน) เพิ่มฟิลด์ First Name (ไม่บังคับกรอก เพื่อให้คนสมัครง่าย) ตั้งข้อความปุ่ม 'Sign Up' เป็นต้น
- ตั้งค่า Display Option: ไม่แนะนำให้โชว์ทันที (immediately) ควรตั้งเป็น 20 วินาที / scroll กลางหน้า / หรือ on exit เพื่อประสบการณ์ผู้ใช้ที่ดีกว่า
- ตั้ง Success Message ให้กระตุ้นเปิด email ทันที เช่น 'Go to your email inbox for a free gift' เพื่อช่วย delivery rate ระยะยาว (Gmail จะมองว่า email ที่คนเปิดมีคุณภาพสูง)
- เชื่อม Pop-up กับ WordPress: copy script จาก Mailchimp > ติดตั้ง plugin 'Insert Headers and Footers' ใน WordPress > วาง script ในช่อง header > กลับ Mailchimp กด Check Connection แล้ว Activate
- ส่วนที่ 2 — Embedded/Inline Form: ติดตั้ง plugin 'MC4WP: Mailchimp for WordPress' ใน WordPress แล้วเชื่อม API Key
- รับ API Key: ใน Mailchimp ไปที่ Account > Extras > API Keys > Create A Key > Copy
- สร้างฟอร์มใน MC4WP: ตั้งชื่อ เลือก audience เพิ่มฟิลด์ First Name ปรับข้อความปุ่ม เช่น 'Send me the free ebook now'
- ปิด Double Opt-In ใน Settings เพื่อไม่ให้สูญเสีย subscriber ที่ไม่ confirm email แทนนั้นแจ้งวิธี unsubscribe ใน email ฉบับแรก
- ใส่ Tag เพื่อติดตามที่มาของ subscriber เช่น 'free ebook website' ช่วยให้รู้ว่า lead มาจากจุดไหน
- วาง Embedded Form บนเว็บ: copy shortcode [mc4wp_form] > วางใน blog post หรือไป Appearance > Widgets เลือก 'Mailchimp Signup Form' วางใน sidebar/footer
🛠️ เครื่องมือ / บริการ / ลิงก์ที่พูดถึง
- Mailchimp — ฟรี (free plan มี 1 audience, ปิด badge ไม่ได้ต้องอัปเกรด)
- WordPress — CMS หลักที่ใช้ในคลิป
- Plugin: Insert Headers and Footers — ใช้ฝัง Pop-up script ใน WordPress header (ฟรี)
- Plugin: MC4WP: Mailchimp for WordPress (mc4wp) — ใช้สร้าง Embedded Form (ฟรี)
- ตัวอย่างเว็บ demo: medicstutorials.com
💡 เอาไปใช้ / ข้อสังเกต
- Double Opt-In ปิดได้ = ได้ subscriber มากกว่า: Simon ปิด double opt-in ทุกครั้งเพราะคนจำนวนมากไม่คลิก confirm ทำให้สูญ lead — แทนนั้นแจ้ง unsubscribe link ใน email แรก
- Success Message = hook ให้เปิด email ทันที: ข้อความหลังสมัครควรกระตุ้นให้ไปเปิด inbox เช่น 'check your email for a free gift' เพราะ Gmail ติดตาม open rate ส่งผลต่อ inbox placement ระยะยาว
- Pop-up timing สำคัญ: อย่า set immediate — ใช้ 20 วิ / scroll / on exit แทน ลดการรบกวน UX และอัตรา bounce
- Tag subscriber ตามแหล่งที่มา: ใช้ tag เช่น 'free ebook website' ใน MC4WP เพื่อ segment และวัดผล lead source แต่ละจุดได้
- Embedded Form ปรับ CSS ตาม Theme WordPress อัตโนมัติ: MC4WP ดึง style ของ theme ปัจจุบันมาใช้ ทำให้ฟอร์มกลืนกับหน้าเว็บ ไม่ต้องแต่งเพิ่ม
📄 Transcript เต็ม (English, 3,636 คำ)
what's up my name is simon and in this video i'm gonna show you step by step how to create simple signup forms using mailchimp and how to put those signup forms on your wordpress website so in the first part of this video we're gonna create a simple pop-up form that will basically just show up when somebody visits your website and in the second part of this video we're gonna create an embedded form that you can basically put wherever you want on your website so without further ado let's get started with the tutorial so let's go to this little pen icon on the top here where it says create and then you want to scroll down to sign up form right here and here we see those three options so you have the embedded form the pop-up form and the signup landing page so let's get started with the pop-up form so click there and then we have to decide on what audience those people will get put on when they sign up through that form so if you have the free plan from mailchimp you only have one audience anyway so just choose your and then click on begin and that will take us into the form builder of mailchimp now a form is not very it's not very complicated design element so there's not much you can change here but there are a couple of customization options you have so first click on layout on the left side and then decide on your basic layout for your popup form so here the first one you have the image on the right side and then the text on the left and here you have it on the left side the image so choose whatever makes sense for you maybe you don't want to have an image at all and personally i'm going to choose this one right here which is the default one where we can put in an image on the top and then we can change the text on the bottom so let's choose this one and then the first thing i'm going to do is i'm going to set image right here so i'm going to put in an image i've already uploaded this image right here and probably for you you have to click on upload and then choose whatever image you want to upload and then it will be here you can select it and then insert and this form will be for like in video editing website and where you ask people to sign up to your newsletter where you'll share editing tips so this is why i have this editing tips picture on the top and then you can also change the text here so let's say um get our weekly editing tips um then they can type in the email address right here so this is obviously required and you can also ask for more things like for example i like to ask for their first name because then i can personalize the emails by using their first name so i'm going to click on the plus right here and i'm going to choose first name and i'm going to put this first name on the top so i'm going to click on this arrow right here and that will put this field on the top you can also make it required if you turn this on but i usually just don't make it required because i don't want people to not sign up because they don't want to give me their first name so i'm going to leave it at that and then you can also change the subscribe button so let's say this should say something like sign up and i'm going to put it in the middle so i'm gonna choose this and i i like to make my buttons green because um i don't know it's just how i like to do it green is obviously something good so i'm gonna make it green um that's basically it you can also put in a disclaimer at the bottom right here and all of those made with mailchimp and stuff you can really turn this off if you're on the free plan if you're on a paid plan you can always turn this one off um cool now you can also change the success message which is the thing they will see when they type in their information successfully then they will see this right now um let's change this to thanks for subscribing um go to your email inbox for a free gift something like that because i usually try to get them to open my first email right away because um that will help with my delivery rates because um when providers like gmail see that people are actually opening my then they the emails that i will be sending after that will be more likely to actually uh be in the main inbox which is the goal so this is the success matches message let's leave it at that and then let's go back to the left side here and choose style so here is where you can change the basic font so let's change it to verdana or something else ariel whatever you think works well for you let's also change this to the middle right here so let's now go to the settings on the left side and here's where we can change the overlay opacity which means that the higher you pull this up here the darker the background will be so the more your form will stand out i usually put this quite high because i want to make the background so my website a bit darker which um makes my pop-up stand out a bit better so i'm going to put it here then the display option you can decide on when your pop-up form will be displayed so right now it's set to immediately which is something i wouldn't recommend because people when they visit your website they don't want to be hit with a instant pop-up form right away so i usually put it on 20 seconds scroll to the middle of page or to on exit on exit means when somebody wants to close out of your page then they will see the pop-up for demonstration purposes let's put it on five seconds so then we can see if it actually works um then show mailchimp badge obviously you can't turn this off if you're on a free plan so if you want to turn this off you need to upgrade to a paid plan and then the position you can either put it in the middle of your website which is the modal one or you can just make it slide out from the bottom right which is a bit more subtle i'm gonna put it in the middle right now as a demonstration and that's basically it that's all the settings we can change here so next step is to actually connect this form to our website so let's click on connect right here and then we have to type in the website that we want to connect so i'm gonna connect it to kind of my demonstration website um which is called um www.medicstutorials.com click on get started and all we have to do now is we have to copy this code right here so click click on copy to clipboard and then we have to paste it into the header of our website so if you have your website on wix or squarespace um you have to kind of access your header um code and then just paste it in if you don't know how to do it just contact support of these providers and then they will definitely help you putting this into the header i'm going to show you how to do it with wordpress because i know most people use wordpress to build their sites so that's what i'm going to show you how to do now so i'm going to go over to my wordpress dashboard and the easiest way that i find to do it is to use a plugin called insert headers and footers because with many um templates or many themes you don't have access to your header code so i'm going to use a simple plugin so on plugins right here click on add new and then i'm gonna search for um headers and footers or header and footer and search for that and then the first one that comes up insert headers and footers i'm going to click on install now and then you want to activate it cool so now we have installed that plugin that helps us with inserting our header so all we have to do now is click on settings on the bottom left and then we're going to choose insert headers and footers so all we have to do here is paste our script that we have copied into this section right here and then scroll down and click on save cool so now we can go back to mailchimp and then we have to click on check connection right here and now we see success your site your site has been connected so all we have to do now is click on this button right here to activate this pop-up on our website so turn this on and then click on close so let's open up a new window and let's see if this actually works so let's type in medicstutorials.com and then after five seconds when we actually land on this website we should see that pop-up appear and there we go we see the pop-up right here get our weekly editing tips so let's see if it works when we type in some information so and let's type in simon media gmail.com click on sign up thanks for signing up go to your email inbox for a free gift awesome and then it disappears and we're back on the website so let's go back to mailchimp and see if we are actually on our audience list so let's go to right here and then click on all contacts and there we go simon.media.gmail is now on our email list alright so now i'm going to show you how to create a simple inline form or also called embedded form that you can put on your wordpress website you can put it on your blog post on your sidebar or on your footer basically wherever you feel that it makes sense on your website and really the easiest way um to to put this on your wordpress website is to use a plugin called mailchimp for wordpress so all we have to do is to head over to our wordpress dashboard right here and then go to plugins on the left side and click on add new and then what you want to look for is something called mc4wp which is short for mailchimp for wordpress and then it's this one right here mailchimp for wordpress now i see i already have it installed and activated so make sure you click on install and then click on activate and then um you will see this plugin on the bottom left right here and where we can start to connect our mailchimp account to our wordpress so click on mailchimp right here once everything is installed with your plugin and then we have to connect it by pasting our mailchimp api key into this field right here so go back to your mailchimp account and to get our api key we have to go to the bottom left where you see your name right here click on it and then go to account and then go to extras and click on api keys and as you see i already have created an so where it says your api keys you will see something like and this right here so click on create and create a key right here and then you will also see this one right here where you see your key so all you have to do once you have created your key is right click click on copy and then head back over to wordpress and just paste your key into this field right here click on save changes and then it will be connected to your wordpress account so now we can move on to actually build our form that we want to put on our website so let's go to the left side click on form under mcw mc4wp and let's give our form a title so let's say medics tutorials as a title for this form and then we have to decide on what audience list those people will go on i only have one audience medics tutorials and that's fine click on add new form and here's where we can build our form so when you scroll down here you see the form preview window right here where you see exactly what the form will look like on your website so most likely this will look a bit different in your case compared to mine because it kind of takes the same design off your already existing website and applies that same design to your form which is very cool so that the form perfectly integrates to our website so depending on what theme you have and this will look a bit different you will have different colors and also a font so um the way you build it let's say we want to add also a first name field all we have to do is go to first name click on first name right here and then we can add a first name field let's say first name and then your first name as a placeholder and you can also make it required if you take this right here i usually don't make it required and then click on add to form and that will add the html code in this form window right here and again on the right side you see exactly how it will look on your website um so you can also add things like agree to terms and stuff like that but i usually just just don't do this i just usually keep it simple and just ask for the first name and the email address so you can also change the the button to let's say we're giving something away so we say send me the free ebook now and you can change the button to say basically anything so let's click on save changes and then we move on to the second part so let's click on messages and the only thing i change here is to successfully subscribe message which is what people will see when they enter their details so right now it says thank you your signup request was successful please check your email inbox to confirm and because i don't want to have double opt-in i'm going to turn double opt-in off in a second now i'm not going to say something like this all i'm going to say is thank you um your signup request was successful um check your email inbox and download the this free ebook something like that and that's actually it let's scroll down click on save changes and then we're going to go to settings and we already have decided that they will go on the medics tutorials list and here is where i turn off the double opt-in again double opt-in is where people have to um again confirm that they actually want to be on your on your email list by clicking on a button in the first email they will get from you and i don't really i usually don't like this because um that will just make it harder for people to sign up and a lot of people will not kind of find this email or they will just not click the button so you will lose a lot of subscribers so i usually just turn this off right here and then in my first email i always tell them if they want to unsubscribe at any time they can just go to the bottom of the email and then click on unsubscribe so turn double opt-in off updating your subscribers okay you can also give it a tag so let's say this is um free ebook um website so i know where those people came from and then that's okay hide from aft uh hide form after successful sign up so i usually um you can click on yes so people don't see the signup form anymore when they have already signed up i usually just keep it as it is so i'm going to click and then you can also redirect people to a specific url if they sign up so if you want to you can direct them to the url where you're giving away that free ebook that you're promising when people sign up to your list or it will just say the success message that we have just adjusted i'm gonna leave it at that so i'm gonna click on save changes and then we go to the next part where it says appearance and here is where you can change the style of the form and as a default it takes the style of your already existing website so for me this is 2020 theme and you can also change it to red theme green theme blue theme but i would suggest you just leave it as it is because then it will take the design of your already existing theme so then we click on save changes and then to actually put the form on our website all we have to do is to copy this short chord right here double click right click copy and then let's say we want to put it on our blog post let's get go to an example blog post let's click on all posts and then click on this hello world post right here and let's try to insert this form that we have just created into this specific blog post so let's just um right click paste that will paste the shortcode right here click on update on the top right and then we're going to preview in a new tab and now as you can see it takes the exact font of the website and the exact color scheme of the website and um inserts this form into your blog post it's that easy so let's actually try it out as well so i'm going to type in simon simon number two and simon2 gmail.com and click on send me the free ebook now and then it says thank you your signups request was successful check your email inbox and download this free ebook and obviously then you would send them an email giving them the free ebook that you have promised them and you can also automate all this i'm going to show you this later in this tutorial i also want to show you how to put that form into uh into the sidebar or into the the footer so let's go back to our wordpress dashboard and then go to appearance and then customize then go to widgets and here you have the footer one and for the two widgets which is this one is the one and this is the two so let's say we want to put that form right here so we would click on footer number one and then go to add a widget and here we can type we can just choose mailchimp signup form and then it will put that form at the bottom of our website we can also change the title right here so let's say get our free ebook something like that and that will change the title of this form right here and again let's try it out as well so first of all let's click on publish and then let's go to our website and visit site let's see if it's actually there so let's go back to the home page scroll all the way down and let's type in simon number three simon 3 at gmail.com click send me this free ebook now and then it says thank you again the success message let's now actually check if those people are now on our audience list let's go to mailchimp click on audience go to all contacts and there we go we have simon number two and simon number three as a new contact so that's exactly how you can simply import or put um registration forms as an inline form on your wordpress website alright so i hope this tutorial helped you with your signup forms on mailchimp if it did give this video a thumbs up and leave me a comment down below with any questions or feedback and if you want to see more tutorials for me you can also subscribe to this channel so you don't miss any new videos this video was actually part of my complete mailchimp tutorial that's also available here on youtube so if you're interested in watching that complete mailchimp tutorial and set up your email marketing with mailchimp you can watch that tutorial as well here on youtube and with that being said thank very much for watching and i look forward to seeing you in the next video