Hướng dẫnsubmit thông tin form lên Hubspot siêu đơn giản

Hướng dẫnsubmit thông tin form lên Hubspot siêu đơn giản

Xin chào mọi người,

Trước đây mình thấy một số diễn đàn có chia sẽ cách lưu form lên Google Sheet rồi, nhưng thấy phải gán code này nọ phức tạp quá. Nhân tiện mình vừa hoàn thành chức năng này nên chia sẽ cùng mọi người luôn, không giấu diếm gì nhé.

I. TẠO ACCOUNT HUBSPOT

II.TẠO FORM TRÊN HUBSPOT

Các bạn truy cập vào đường dẫn tạo form như hình dưới.

Hướng dẫn lưu thông tin form lên Hubspot
Hướng dẫn lưu thông tin form lên Hubspot

Ấn Create form bên góc phải.

Tạo các trường cơ bản như sau : First name, Last name, Email.
Sau đó ấn Publish để lấy mã Embed code

Tại đây bạn sẽ có đoạn mã như sau


<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
portalId: "4917926",
formId: "2b36a405-9c51-40ab-9a75-6dafc769f2dc"
});
</script>

 

Bạn sẽ copy lại đoạn portal ID + FormID

portalId: “4917926”,
formId: “2b36a405-9c51-40ab-9a75-6dafc769f2dc”

ok, bây giờ đến bước tiếp theo nhé.

Bây giờ chúng ta cần thiết lập chúng vào 1 đường dẫn url.


url: 'https://forms.hubspot.com/uploads/form/v2/4917926/2b36a405-9c51-40ab-9a75-6dafc769f2dc'

Chúng ta sẽ tiến hành thành Portalid + formid vào đoạn URL này.

v2/{portalid}/{formid}

Done, bây giờ chúng ta sẽ tạo form html như sau.


<form id="frmSignUp">
<input type="text" name="firstname" placeholder="First name">
<input type="text" name="lastname" placeholder="Last name">
<input type="email" name="email" placeholder="example@email.com">
<input type="hidden" >
<button class="btn-primary">Submit</button>
</form>

Tiếp đến là sử dụng jQuery + Ajax để xử lý đẩy data lên Hubspot.


$('#frmSignUp').submit(function(e) {
e.preventDefault();
var $this = $(this);
var formData = $this.serialize();
$.ajax({
url: 'https://forms.hubspot.com/uploads/form/v2/4911881/e595dc2c-0671-4963-98c7-74fb5e7f6ed7', // nhớ thay 2 thông số nhé.
type: 'POST',
data: formData,
success: function () {
// Bạn muốn làm gì ở đây cũng được, khi gửi lên Hubspot thành công
}
});
$this.html('<p>Your info has been submitted successfully.</p>');
window.setTimeout(function(){location.reload()},5000);
})

Vậy thôi, các bạn hãy thử và trải nghiệm nhé. Chúc các bạn thành công, nếu có bất kỳ thắc mắc gì hãy comment bên dưới mình hỗ trợ cho nhé.

Trả lời

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 *