Sử dụng Trình thiết kế biểu mẫu › Cách sử dụng biểu thức JavaScript trong trường › Cách điền trước trường dựa trên biểu thức JavaScript
Cách điền trước các trường dựa trên biểu thức JavaScript
Khi bạn sử dụng một phần tử bao gồm thuộc tính giá trị dưới dạng một trường trên biểu mẫu, bạn có thể sử dụng biểu thức JavaScript để điền trước thuộc tính giá trị của phần tử với giá trị thời gian chạy của một trong nhiều đối tượng và thuộc tính từ cơ sở dữ liệu Danh mục dịch vụ CA
Ví dụ: trong trường văn bản cho Tên trên biểu mẫu của bạn, bạn có thể chỉ định biểu thức JavaScript $[_. người dùng. firstName] để điền trước trường có tên của ID người dùng đã đăng nhập, người đang tạo yêu cầu và hoàn thành biểu mẫu. Tương tự, trong trường văn bản cho Họ, bạn có thể chỉ định biểu thức JavaScript $[_. người dùng. lastName] để điền trước trường bằng họ của người dùng
Để điền sẵn các trường trên biểu mẫu bằng biểu thức JavaScript, hãy làm theo quy trình này
- Thiết kế và tạo biểu mẫu
- Xác minh rằng cách tốt nhất để thực hiện tác vụ tự động trong trường hoặc các trường quan tâm là sử dụng biểu thức JavaScript
- Xem lại các nguyên tắc sử dụng biểu thức JavaScript trong các trường và xác minh rằng bạn muốn điền trước thuộc tính giá trị của một thành phần trong trường
- Xác minh rằng dữ liệu bạn muốn điền trước là một trong những đối tượng và thuộc tính mà bạn có thể chỉ định trong biểu thức JavaScript. Các đối tượng và thuộc tính này có liên quan đến dữ liệu nhân sự của người dùng đã đăng nhập, đến một hoặc nhiều đơn vị kinh doanh hoặc đến dịch vụ, tùy chọn dịch vụ, trạng thái hoặc dữ liệu khác liên quan đến yêu cầu có chứa biểu mẫu
- Chỉ định biểu thức JavaScript trong thuộc tính giá trị của phần tử cho trường. Khi chỉ định biểu thức, hãy tuân theo tất cả các quy tắc cú pháp trong đối tượng và thuộc tính mà bạn có thể chỉ định trong biểu thức JavaScript, đặc biệt là các quy tắc liên quan đến việc sử dụng toán tử để liên kết các thuộc tính. Sau đây là một số biểu thức hợp lệ mà bạn có thể thấy hữu ích ở dạng nguyên trạng hoặc dưới dạng mô hình
- Tên người dùng. $[_. người dùng. họ]
- Họ của người dùng. $[_. người dùng. họ]
- Tên và họ của người dùng, được nối trong một trường duy nhất. $[_. người dùng. FirstName + ' ' + _. người dùng. họ]
Ví dụ này có thể được sử dụng để điền sẵn trường văn bản ở cuối biểu mẫu, chẳng hạn như thông báo cảm ơn
- Thành phố của người dùng. $[_. người dùng. địa điểm. thành phố]
- trạng thái của người dùng. $[_. người dùng. địa điểm. tiểu bang]
- Dữ liệu địa chỉ vật lý của người dùng, được nối trong một trường duy nhất. $[_. người dùng. địa điểm. địa chỉ[0] + ‘ ‘ + _. người dùng. địa điểm. địa chỉ[1] + ' ' + _. người dùng. địa điểm. thành phố + ' ' + _. người dùng. địa điểm. tiểu bang]
Ví dụ này trả về địa chỉ đường phố, thành phố và tiểu bang của người dùng cho một địa chỉ ở Hoa Kỳ
thêm các chuỗi truy vấn vào URL của trang trước khi gửi nó tới các liên hệ của bạn. Các trường sẽ được điền dựa trên chuỗi truy vấn được thêm vào. Điều này cũng hoạt động đối với các trường biểu mẫu ẩn .Để tạo URL có chuỗi truy vấn, bạn cần sao chép tên thuộc tính nội bộ của bất kỳ trường nào bạn muốn điền trước, sau đó thêm chúng vào cuối URL trang của bạn
Xin lưu ý
- Không thể sử dụng chuỗi truy vấn để tự động điền các trường biểu mẫu phụ thuộc . HubSpot cũng không thể kích hoạt các trường phụ thuộc dựa trên nhiều giá trị trong chuỗi truy vấn
- Khi tự động điền các trường biểu mẫu bằng chuỗi truy vấn, bạn không thể sử dụng bất kỳ tham số bổ sung nào, chẳng hạn như tham số trong URL theo dõi. Làm như vậy có thể ngăn chuỗi truy vấn của bạn điền chính xác vào các trường biểu mẫu.
Sao chép tên nội bộ của thuộc tính
Để tìm tên nội bộ của thuộc tính
- Trong tài khoản HubSpot của bạn, hãy nhấp vào biểu tượng cài đặt cài đặt trong thanh điều hướng chính.
- Trong menu thanh bên trái, điều hướng đến Thuộc tính
- Nhấp vào tên của một thuộc tính để điền trước các giá trị
- Sao chép tên nội bộ của tài sản
- Lặp lại điều này cho bất kỳ thuộc tính nào khác mà bạn muốn điền trước giá trị cho biểu mẫu của mình.
Tạo chuỗi truy vấn tĩnh với các giá trị được xác định trước
Sau khi sao chép tên thuộc tính nội bộ, bạn có thể thiết lập URL trang mà bạn sẽ gửi cho các liên hệ của mình.
- Trong trình duyệt của bạn, hãy điều hướng đến trang mà biểu mẫu của bạn đang bật. Sau đó, sao chép URL
- Thêm dấu chấm hỏi [?] vào cuối URL của trang
- Thêm thuộc tính, theo sau là dấu bằng và mã thông báo cá nhân hóa. Đảm bảo tất cả khoảng trắng được xóa khỏi mã thông báo [e. g. , {{liên hệ. họ}} ]
Bạn có muốn điền trước các trường trên biểu mẫu của mình bằng một giá trị từ một trường khác có cùng biểu mẫu không? . Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn cách tạo biểu mẫu và thêm đoạn mã sẽ lấy trường Tên từ trang một của biểu mẫu và điền trước trường Tên trên trang hai của biểu mẫu tương tự
Tạo biểu mẫu
Đối với hướng dẫn này, chúng tôi đang tạo một biểu mẫu nhiều trang sẽ có trường Tên trên cả hai trang của biểu mẫu
Nếu bạn cần bất kỳ trợ giúp nào để tạo biểu mẫu nhiều trang, vui lòng xem lại tài liệu này
Định dạng trường Tên cho mục đích của hướng dẫn này được đặt thành Đơn giản.
Thêm đoạn trích
Để điền trước các trường trong cùng một biểu mẫu, chúng tôi sẽ cần thêm đoạn mã này vào trang web của mình
Nếu bạn cần hỗ trợ về cách thức và vị trí thêm đoạn trích vào trang web của mình, vui lòng xem hướng dẫn này
/** * Populate fields in the same form * * @link //wpforms.com/developers/how-to-pre-populate-fields-in-the-same-form/ */ function wpf_dev_name_change[] { ?> jQuery[function[$]{ var formID = 1072; // Change form ID var nameField1 = 1; // Change name field ID to grab name from first var nameField2 = 16; // Change name field ID to pass value to second $[ '#wpforms-${formID}-field_${nameField1}' ].on[ 'change',function[] { // Update value for nameField2 $[ '#wpforms-${formID}-field_${nameField2}' ].val[$[this].val[]]; }]; }];