skip to Main Content

I have a form at Contact Forms 7 to get my clients to receive a call in 30 minutes.
A guy built us a API that does the job. But I need to add the phone number automatically to the end of the external URL (not my contact page nor the thank you page). When submitted, the form redirects to a ‘thank you page’ and should fire a javascript that sets the phone number at the end of the URL.

Im new to Javascript but I’ve tried this code by prieston, but i don’t really know what I’m doing. Can anyone help?

I’ve also tried the CF7 to Webhook but it didnt work.

3

Answers


  1. Chosen as BEST ANSWER

    We managed to make it work with Javascript/AJAX with the following code.

        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);
    

    The code was fired with the plug-in Redirection for Contact Form 7 by Qube One.

    The redirection to a 'thank you page' was made with the same plugin.


  2. You can use Contact Form 7 events.

    So something like this will fire when the form is submitted.

    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 );
    
    Login or Signup to reply.
  3. Try this 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 );
    

    That would create a hidden iframe which will load the url. Then it should still be able to redirect the user to the thank-you page afterward.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search