如何在我的 URL 末尾设置参数

Question

我在 Contact Forms 7 中有一个表格可以让我的客户在 30 分钟内接到电话。一个人为我们建造了一个 API 来完成这项工作。但是我需要将 phone 号码自动添加到外部 URL 的末尾（不是我的联系页面，也不是感谢页面）。提交后，表单将重定向到 'thank you page' 并应触发 javascript，在 URL.

末尾设置 phone 数字

我是 Javascript 的新手，但我已经尝试过 by prieston，但我真的不知道自己在做什么。有人可以帮忙吗？

我也试过 CF7 to Webhook 但没用。

Answer 1

您可以使用 Contact Form 7 events.

所以当提交表单时会触发类似的东西。

document.addEventListener( 'wpcf7submit', function( event ) {
    const phone = document.getElementById('phone').value; // Your phone field id
    const external_url = `http://external/?phone=${phone}` // Your page after the form is submitted
    location.replace(external_url) // Load the page with added parameter
  }, false );

Answer 2

试试这个 javascript:

document.addEventListener( 'wpcf7submit', function( event ) {
  var inputs = event.detail.inputs;
 
  for ( var i = 0; i < inputs.length; i++ ) {
    if ( 'phone' == inputs[i].name ) {
      var iframe = document.createElement('iframe');
      iframe.setAttribute("src", "https://voice.com.br/sendMessage/"+inputs[i].value);
      iframe.style.display = "none";
      document.body.appendChild(iframe);
      break;
    }
  }
}, false );

这将创建一个隐藏的 iframe，它将加载 url。然后它应该仍然能够将用户重定向到 thank-you 页面。

Answer 3

我们设法使用以下代码使其与 Javascript/AJAX 一起工作。

    var url = "https://www.urloftheAPI.com";

var xhr = new XMLHttpRequest();
xhr.open("POST", url);

xhr.setRequestHeader("Content-Type", "application/json");

var data = `{  
    "phone": "[phone]",
    "id": "company's id in the system of the api"
}`;

xhr.onreadystatechange = function () {
   if (xhr.readyState === 4) {
      console.log(xhr.status);
      console.log(xhr.responseText);
      console.log(data);
   }};

xhr.send(data);

代码是用 plug-in Redirection for Contact Form 7 by Qube One 触发的。

重定向到 'thank you page' 是使用相同的插件。

如何在我的 URL 末尾设置参数

How to set a parameter at the end of my URL

javascript

forms

wordpress