Tạo form subscription và kết nối với Mailchimp bằng MB Frontend Submission

Việc tạo form để người dùng đăng ký nhận thông báo (subscribe) từ trang web đã không còn xa lạ gì nữa. Chủ website thường tạo và tích hợp form đăng ký với một công cụ hỗ trợ email marketing để quản lý và gửi email một cách nhanh chóng và tiện lợi hơn. Một trong những hệ thống gửi email thường hay được sử dụng hiện nay là Mailchimp.

Với WordPress, bạn hoàn toàn có thể tạo một form subscription theo ý muốn, sau đó kết nối với Mailchimp. Việc này thực hiện rất dễ dàng với MB Frontend Submission của Meta Box. Tất cả được thực hiện qua 5 bước dưới đây.

Chuẩn bị

Trong bài hướng dẫn này, các bạn sẽ cần cài đặt các plugin sau:

  • Meta Box: để dùng được Meta Box Builder và MB Frontend Submission, bạn cần cài core plugin Meta Box. Plugin custom field này miễn phí trên wordpress.org nhé.
  • MB Frontend Submission: extension premium của Meta Box cho phép tạo form cho người dùng gửi nội dung ngay ở ngoài website. Ngoài ra, extension này cũng có thể xử lý nhiều loại form khác nữa.
  • MB Custom Post Type & Custom Taxonomies: extension miễn phí này của Meta Box giúp bạn tạo custom post type dễ dàng. Hoặc bạn có thể sử dụng công cụ miễn phí Post Type Generator (xem hướng dẫn tại đây).
  • Meta Box Builder: để tạo custom field, ngoài việc code thủ công, bạn nên tiết kiệm thời gian bằng việc sử dụng Meta Box Builder – extension premium của Meta Box với giao diện tạo field kéo thả trực quan.

Và tất nhiên, bạn cần có tài khoản ở trên Mailchimp sẵn rồi nhé. Nếu chưa có, hãy đăng ký ở đây.

Sau khi cài đặt và kích hoạt các công cụ trên, chúng ta sẽ tiến hành như sau:

Bước 1: Tạo post type mới cho subscriber

Trước hết, để lưu và xem lại dữ liệu của người đăng ký (subscribe) dễ dàng và thuận tiện, bạn cần tạo một post type mới tên là Subscriber. MB Custom Post Type & Custom Taxonomy sẽ giúp bạn thực hiện việc này.

Bạn vào Meta Box > Post Types > New Post Type. Sau đó điền tên và slug của post type rồi click Publish.

Điền tên và slug của post type Subscriber.

Khi tạo xong, bạn sẽ thấy tên post type là Subscriber hiển thị ở sidebar bên trái của Dashboard như trên hình đấy.

Bước 2: Tạo form subscription

Một form để người dùng subscribe thường sẽ có 2 trường là tên và email, nhưng bạn cũng có thể thêm các trường tùy theo nhu cầu nhé (đây cũng chính là lợi ích của việc dùng custom field để tạo form). Trong bước này, mình chỉ tạo 2 trường cơ bản là tên và email bằng custom field thôi.

Bên cạnh đó, để tiết kiệm dung lượng của database, mình sẽ tận dụng luôn trường post title để lưu tên và trường post content để lưu email. Mình đặt id cho cả meta box này là subscription-form. Còn id của field Namepost_titleEmailpost_content là vì post_titlepost_content là 2 ID mặc định của WordPress dùng cho tiêu đề và nội dung post type.

Như đã nói, mình dùng Meta Box Builder để tạo field. Nhưng nếu bạn muốn tiết kiệm hơn, có thể dùng công cụ Online Generator miễn phí của Meta Box để tạo code tự động nhé (xem hướng dẫn tại đây).

Truy cập vào Meta Box > Custom Fields > Add New sau đó điền tên và ID cho meta box, rồi chọn loại field là Text cho 2 field Name và Email.

Điền tên và ID cho custom field Email bằng plugin Meta Box.
Điền thông tin cho field Name
Điền tên và ID cho custom field Name bằng plugin Meta Box.
Điền thông tin cho field Email

Xem thêm: Cách tạo custom field với Meta Box Builder.

Sau khi tạo field xong, hãy sang tab Settings để chọn post type là Subscriber nhé.

Chọn post type của submisstion form là Subscriber

Cuối cùng, bạn ấn Save Changes để lưu thay đổi. Vậy là đã tạo xong các field cần cho form subscription ở đây rồi.

Bước 3: Chèn và hiển thị form subscription vào page

Để thêm được form subscription vào trang web và cho phép người dùng đăng ký form ở ngoài front end, bạn cần dùng extension MB Frontend Submission. Việc chèn form sẽ được thực hiện thông qua shortcode dưới đây:

[mb_frontend_form id="subscription-form" ajax="true" recaptcha_key="…" recaptcha_secret="…"]

Trong đó:

subscription-form: là id của metabox đã tạo ở trên
ajax="true": bật load ajax
recaptcha_key: Google reCaptcha site key
recaptcha_secret: Google reCaptcha secret key

Mình đã tạo một trang tên là Subscribe để chèn shortcode này, ngoài ra bạn có thể chèn vào bất kì bài viết, widget nào cũng được.

Chèn và hiển thị form subscription vào page bằng shortcode

Ở đây để tránh cho việc form bị spam, mình có dùng Google reCaptcha. Việc tích hợp Google reCaptcha vào front-end forms rất đơn giản, bạn chỉ cần điền site key và secret key vào shortcode của form như mình đã làm ở trên. Chi tiết hướng dẫn cho reCaptcha và cho các thuộc tính khác của form, các bạn xem tại hướng dẫn sử dụng của MB Frontend Submission.

Dưới đây là form subscription mình đã tạo được. Bạn cũng có thể thấy biểu tượng reCaptcha ở góc màn hình:

Form subscription hiển thị trên WordPress website

Bước 4: Style cho form subscription

Mặc định Meta Box đã hiển thị form tương đối đẹp ở ngoài front end. Tuy nhiên, để tùy chỉnh cho form thêm đẹp hơn chúng ta cần thêm trang điểm cho nó bằng chút CSS. Bạn có thể tham khảo đoạn CSS của mình dưới đây và thêm nó vào Appearance > Customize > Additional CSS:

.rwmb-form {
	background: #e2e8f0;
	padding: 24px;
	border-radius: 4px;
	max-width: 768px;
	margin: 0 auto;
}
.rwmb-form .rwmb-meta-box {
	display: flex;
	justify-content: space-between;
	grid-gap: 12px;
}
.rwmb-form .rwmb-field {
	flex: 1;
}
.rwmb-form .rwmb-field:not(:last-of-type) {
	margin: 0 0 12px;
}
.rwmb-form .rwmb-label,
.rwmb-form .rwmb-field .rwmb-input {
	float: none;
	width: 100%;
	margin-bottom: 5px;
}
.rwmb-form button, .rwmb-form input {
	width: 100%;
}

Kết quả được form subscription đẹp hơn như sau:

Form subscription tạo bởi plugin Meta Box

Bước 5: Kết nối form subscription với Mailchimp

Tại bước này, mình sẽ hướng dẫn các bạn cách tích hợp subscription form vừa tạo với Mailchimp. Mục đích của việc này là để gửi thông tin của người đã đăng ký qua form subscription ở trên tới MailChimp. Sau đó bạn có thể dùng MailChimp để gửi các chiến dịch marketing tới những subscriber này.

Để làm điều đó, mình sẽ dùng thư viện sau để kết nối tới API của Mailchimp: https://github.com/drewm/mailchimp-api.

Bạn vào link này và tải file MailChimp.php về, chèn vào trong theme đang dùng. Mình đang sử dụng eStarchild theme của nó, nên sẽ tạo 1 thư mục inc và copy file vào trong thư mục inc đó.

Tiếp theo, bạn hãy chèn đoạn code sau vào file functions.php:

include get_stylesheet_directory() . '/inc/MailChimp.php';
use \DrewM\MailChimp\MailChimp;

function insertList() {
	$key = 'API keys mailchimp của bạn';
	$list_id = ' id của list mà bạn muốn tích hợp';
	$merge_var = array(
		'FNAME' => $_POST['post_title'],
		'LNAME' => '',
	);
	$mailchimp = new MailChimp( $key );

	$result = $mailchimp->post( '/lists/' . $list_id . '/members', array(
		'email_address' => $_POST['post_content'],
		'merge_fields'  => $merge_var,
		'status'        => 'subscribed',
	) );
	return json_encode( $result );
}

add_action( 'rwmb_frontend_after_process', function( $config, $post_id ) {
	if ( 'subscription-form' === $config['id'] ) {
		insertList();
		die;
	}
}, 10, 2 );

Giải thích:

  • 'rwmb_frontend_after_process': là hook khi form thực thi xong
  • subscription-form: là id của meta box đã tạo ở bước 2
  • Để lấy API key Mailchimp, hãy vào Account Mailchimp của bạn rồi copy API key ở mục Your API keys.
Lấy API keys để kết nối form subscription với Mailchimp
Copy API keys để kết nối form subscription với Mailchimp

Để lấy id của list, bạn cũng vào tài khoản MailChimp, sau đó vào Audience > All Contacts, ấn Settings và chọn Audience name and defaults:

Lấy id của list bằng cách vào tài khoản Mailchimp

Ở mục Audience ID, bạn sẽ thấy list id của mình.

List ID ở tài khoản Mailchimp

Lưu ý: Mailchimp thường xuyên thay đổi giao diện nên có thể lần sau khi bạn vào Account Mailchimp sẽ không thấy giống bài viết này của mình cho lắm. Nhưng các bước thì vẫn tương tự thôi nhé.

Sau khi làm xong, bạn hãy thử xem hệ thống có chạy đúng như mong muốn không nhé. Mình đã thử điền và subscribe vào form:

Thử điền vào form subscription trong front end của website WordPress

Rồi kiểm tra danh sách email của Mailchimp đã có thông tin mình vừa điền:

Danh sách email của những người đã submit thông qua subscription form của website WordPress

Vậy là chúng ta đã hoàn thành xong tất cả các bước tạo form subscription và tích hợp nó với Mailchimp tại đây!

Lời cuối

Việc tạo form subscription với MB Frontend Submission khá linh hoạt. Bạn có thể tạo form với nhiều loại field đa dạng và nâng cao hơn cho người dùng submit tùy theo nhu cầu. Ngoài ra, MB Frontend Submission có nhiều ứng dụng khác mà bạn có thể tận dụng cho trang web của mình.

Còn với Mailchimp, bạn có thể tham khảo thêm cách gửi newsletter cho bài đăng WordPress để giúp chiến dịch marketing hiệu quả hơn.

Chúc các bạn có những chiến dịch thành công!

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *