MachForm hỗ trợ một tùy chọn dễ dàng để điền giá trị mặc định của các trường biểu mẫu của bạn bằng các tham số URL. Điều này có thể khá hữu ích khi bạn cần gửi biểu mẫu cho khách hàng của mình và điền sẵn một số trường với một số giá trị
Giả sử chúng ta có một biểu mẫu với URL như thế này
//www.example.com/machform/view.php?id=7
Biểu mẫu có trường Tên của bạn và chúng tôi muốn điền giá trị mặc định cho trường này bằng tham số URL
Trước tiên, chúng ta cần biết tên thành phần HTML của trường Tên của bạn. Để thực hiện việc này, nhấp chuột phải vào biểu mẫu và xem mã nguồn HTML của biểu mẫu
Bạn sẽ thấy một cái gì đó như thế này
Nhìn vào thuộc tính tên của trường và bạn có thể thấy rằng trường đang có tên. phần tử_1_1 và phần tử_1_2
Bây giờ để điền giá trị vào trường, chỉ cần đặt tên của trường vào URL và chuyển cả giá trị, như thế này
//www.example.com/machform/view.php?id=7&element_1_1=John&element_1_2=Doe
và kết quả là
Trường đang được điền với giá trị từ các tham số URL
Các tham số URL này có thể được áp dụng cho hầu hết mọi trường, bao gồm Văn bản một dòng, Email, Nhiều lựa chọn, Hộp kiểm, Danh sách thả xuống, Địa chỉ, v.v.
Trong bài viết này, bạn có thể tìm thấy các ví dụ về cách sử dụng JavaScript để điền trước biểu mẫu từ các nguồn khác nhau
Nếu bạn muốn điền vào biểu mẫu bằng dữ liệu bạn đã có hoặc làm cho biểu mẫu được cá nhân hóa hơn, tham số truy vấn URL là tùy chọn tốt nhất cho điều đó
Bạn có thể thêm tham số truy vấn theo cách thủ công hoặc sử dụng trình giữ chỗ [thẻ hợp nhất] để tùy chỉnh tham số URL trong bất kỳ nền tảng tự động hóa nào, chẳng hạn như MailChimp, Power Automate, Zapier, v.v. Chẳng hạn, điền vào các trường biểu mẫu với chi tiết liên hệ của người dùng
//use URL with parameters, for example: ////mydomain.plumsail.io/432d-9618-b81b32a4016b5?firstname=Jane&lastname=Doe&[email protected] fd.rendered[function[]{ var queryString = window.location.search; var urlParams = new URLSearchParams[queryString]; fd.field['FirstName'].value = urlParams.get['firstname']; fd.field['LastName'].value = urlParams.get['lastname']; fd.field['Email'].value = urlParams.get['email']; }];
Bạn có thể lưu dữ liệu vào bộ nhớ cục bộ của trình duyệt để sử dụng sau. Ví dụ: bạn có thể lưu một số giá trị trong khi người dùng đang làm việc với một biểu mẫu và sau đó tự động điền vào một biểu mẫu khác với dữ liệu từ bộ nhớ cục bộ bằng cách sử dụng mã
//store values in local storage like this: localStorage.setItem['value1', 'Hello, world!']; localStorage.setItem['value2', fd.field['Text0'].value]; //retrieve values from local storage fd.rendered[function[]{ var value1 = localStorage.getItem['value1']; var value2 = localStorage.getItem['value2']; if[value1]{ fd.field['Text1'].value = value1; localStorage.removeItem['value1']; } if[value2]{ fd.field['Text2'].value = value2; localStorage.removeItem['value2']; } }];
Bạn cũng có thể lưu trữ tất cả dữ liệu của biểu mẫu và điền vào biểu mẫu các giá trị giống nhau khi biểu mẫu được mở lại, như thế này
//save form data before save fd.beforeSave[function[]{ localStorage.setItem['form-data', JSON.stringify[fd.data[]]]; }]; //populate form data when form opens fd.rendered[function[]{ var data = JSON.parse[localStorage.getItem['form-data']]; if[data]{ fd.data[data]; localStorage.removeItem['form-data']; } }];
Bạn có thể yêu cầu một API bên ngoài để truy xuất các giá trị. Bạn cần đảm bảo rằng bạn có khóa nếu cần và bạn làm theo hướng dẫn từ nhà phát triển API. Chẳng hạn, bạn có thể xác định vị trí và IP của một người bằng ipapi. đồng
//make a request when the form opens fd.rendered[function[]{ $.getJSON['//ipapi.co/json/', function [response] { fd.field['Location'].value = response.city + ', ' + response.region_code + ', ' + response.country_name; fd.field['IP'].value = response.ip; }]; }];
Bạn có thể điền một trường từ và điều khiển từ bất kỳ nguồn dữ liệu ngoài nào. một dịch vụ web hoặc một tệp công khai
TLDR; . Phương pháp này sẽ hoạt động với bất kỳ ESP nào cho phép bạn nhúng địa chỉ email của người đăng ký dưới dạng tham số URL trong liên kết
Bằng cách chuyển địa chỉ email vào một URL, bạn có thể điền sẵn trường email [thậm chí ẩn nó hoàn toàn] và tạo các biểu mẫu khảo sát hoặc phản hồi hoàn toàn dễ dàng cho những người đăng ký hiện tại
Bạn có thể sử dụng tính năng này để gắn thẻ và phân khúc người đăng ký hiện tại cực kỳ hiệu quả, một tính năng thường dành cho các dịch vụ trả phí đắt đỏ như tin nhắn ngay
Thử nghiệm. Điền trước trường với tham số truy vấn
Tốt
Tuyệt quá
Kinh ngạc
Thêm chuỗi truy vấnNhững gì chúng tôi đang xây dựng [bản demo ở trên]
Ở trên, bạn sẽ tìm thấy một biểu mẫu ví dụ có thể điền sẵn trường email từ tham số truy vấn trong URL
Tự mình thử. Nhấp vào nút để tải lại trang bằng chuỗi truy vấn. Bạn sẽ lưu ý rằng biểu mẫu sẽ được điền bằng email được hiển thị trong URL. Bạn có thể thay đổi địa chỉ email trong URL, nhấn enter [để tải URL mới] và lưu ý rằng biểu mẫu được điền với bất kỳ địa chỉ email nào để nhập
Tại sao điền trước một biểu mẫu?
Tôi đã và đang sử dụng Convertkit để phát triển danh sách email và thu hút khán giả của mình. Một trong những tính năng Convertkit yêu thích của tôi là hệ thống tự động hóa mạnh mẽ và gắn thẻ người đăng ký
Và tôi muốn tận dụng quá trình tự động hóa này để cho phép người đăng ký tự định hướng hành trình nội dung của họ. Họ có thể điền vào một biểu mẫu hoặc bài kiểm tra ngắn và tôi sẽ hướng họ đến các chuỗi email tùy chỉnh. Đó là một kết quả đôi bên cùng có lợi và tốt cho tất cả. Ngoại trừ một vấn đề
Convertkit [và nhiều ESP khác] không có cách tích hợp để nhận ra những người đăng ký hiện tại khi họ điền vào biểu mẫu. Điều này gây ra hai vấn đề
- Người đăng ký trùng lặp. Họ có thể sử dụng một email khác để hoàn thành biểu mẫu thứ 2, làm mất mục đích và làm đầy danh sách của bạn
- bỏ rơi. Nhìn thấy một trường email trống, họ có thể từ bỏ biểu mẫu hoàn toàn
Và tôi không đơn độc khi muốn điều này. Tôi đã tìm thấy một số chủ đề trong diễn đàn Convertkit yêu cầu giải pháp cho vấn đề này
Tại sao tôi muốn làm điều đó
Khảo sát danh sách của bạn là vô cùng có giá trị. Bạn không chỉ có thể có được thông tin chi tiết tuyệt vời về đối tượng của mình mà còn là cơ hội phân khúc tuyệt vời
Ví dụ: chỉ với một vài câu hỏi, tôi có thể biết chính xác vị trí của từng người đăng ký trong hành trình của họ và gặp họ với nội dung phù hợp vào đúng thời điểm
câu hỏi ví dụ
- Bạn đã xây dựng trang web được bao lâu rồi?
- Tổng số người mới bắt đầu
- 1 năm hoặc ít hơn
- 25 năm
- Hơn 5 năm
- Bạn muốn xây dựng trang web cho ai?
- Riêng tôi
- khách hàng
- Bạn đang xây dựng [những] loại trang web nào?
- Blog / Liên kết
- thương mại điện tử
- Kinh doanh
- Cá nhân
Thật dễ dàng để hình dung nhu cầu của mỗi người sẽ khác nhau như thế nào, dựa trên câu trả lời của họ. Và với những hiểu biết sâu sắc này, tôi có thể giúp họ đạt được mục tiêu nhanh hơn và hiệu quả hơn
Giải pháp hiện có
Giải pháp dựng sẵn duy nhất mà tôi tìm thấy [dù sao cũng tích hợp với Converkit] là RightMessage
RightMessage là một nền tảng cá nhân hóa đầy đủ tính năng cực kỳ mạnh mẽ. Pat Flynn của Thu nhập thụ động thông minh sử dụng RightMessage cho mục đích chính xác này, để phân đoạn danh sách của anh ấy. Nhưng anh ấy cũng sử dụng nó để cá nhân hóa nội dung trên trang web của mình, thu thập phản hồi của người dùng, v.v.
Và mặc dù tôi nghĩ rằng sản phẩm này thật tuyệt vời, nhưng nó cũng quá mức cần thiết. Và khá đắt đỏ nếu tôi thành thật
Typeform cũng có khả năng này [trên các gói trả phí] nếu bạn sử dụng các trường tùy chỉnh để lấy tham số URL. Nó chắc chắn sẽ hiệu quả với tôi, nhưng nó có giá gần bằng danh sách email của tôi vì thành thật mà nói, một sản phẩm khá đơn giản
Giải pháp của tôi. Đoạn mã Javascript
Tôi là một nhà phát triển nghiệp dư giỏi nhất nhưng tập lệnh này đủ dễ để kết hợp
Đây là những gì nó làm
- Kiểm tra xem trang đã được tải chưa
- Kéo chuỗi truy vấn từ URL
- Tìm tham số 'Người đăng ký' và lưu trữ giá trị [địa chỉ email] trong một biến
- Điền vào trường email của biểu mẫu với địa chỉ email đó
Dễ đi tiểu
Mật mã
Code language: JavaScript [javascript]
function fillFormEmail[]{ const input = document.getElementById['id']; // replace 'id' with id of email field const queryString = window.location.search; const urlParams = new URLSearchParams[queryString]; //parse the query string const email = urlParams.get['subscriber']; // Store the parsed email address in variable input.value = email; // fill the form with the email address } if [document.readyState === 'loading'] { // Loading hasn't finished yet document.addEventListener['DOMContentLoaded', fillFormEmail] } else { // `DOMContentLoaded` has already fired fillFormEmail[]; }
Cách sử dụng cấu trúc
Có hai điều bạn phải làm để mã này hoạt động cho bạn
- Thêm id của đầu vào biểu mẫu email của bạn trong dòng
document.getElementB
yId['id']; - Xây dựng thuộc tính URL liên kết của bạn [để chuyển email]
Lấy ID của trường biểu mẫu của bạn
- Sử dụng Chrome hoặc Firefox, bạn có thể nhấp chuột phải vào trường email và chọn 'kiểm tra'
- Then find the the element and note the text in the id attribute.
- Chỉnh sửa javascript và thay thế 'id' bằng id của biểu mẫu của bạn [như hình bên dưới]
Chuyển email người đăng ký dưới dạng Tham số URL
Các hướng dẫn chính xác sẽ khác nhau tùy thuộc vào nhà cung cấp email bạn sử dụng, nhưng đây là định dạng URL cơ bản để sử dụng
________số 8
Vì vậy, tất cả những gì bạn phải làm là thêm phần cuối cùng đó, bắt đầu bằng dấu chấm hỏi
Hướng dẫn cho Convertkit
Khi bạn liên kết đến biểu mẫu trong email của mình, chỉ cần thêm chuỗi văn bản này vào cuối url của bạn
?subscriber={{ subscriber.email_address }}
Đó là nó. Mã ngắn đó sẽ được lập trình thay thế bằng địa chỉ email cho mỗi người đăng ký khi bản tin của bạn hết hạn