Điền trước các trường biểu mẫu từ URL JavaScript

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

https://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

http://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:
//https://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('https://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

Nhữ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 đề

1. 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
2. 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ụ

1. 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
2. Bạn muốn xây dựng trang web cho ai?
   • Riêng tôi
   • khách hàng
3. 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

1. Kiểm tra xem trang đã được tải chưa
2. Kéo chuỗi truy vấn từ URL
3. Tìm tham số 'Người đăng ký' và lưu trữ giá trị (địa chỉ email) trong một biến
4. Đ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ã

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();
}
Code language: JavaScript (javascript)

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

1. Thêm id của đầu vào biểu mẫu email của bạn trong dòng document.getElementById('id');
2. 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

1. 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'
2. Then find the the element and note the text in the id attribute.
3. 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

Làm cách nào để điền trước trường biểu mẫu bằng JavaScript?

Làm cách nào tôi có thể điền trước các trường nhập biểu mẫu HTML từ các tham số URL?

Các trường biểu mẫu tự động điền là gì?