search

afterwire / evidenceaction

0 stars 0 forks source link

Install Pardot plugin and link current newslette form to Pardot #44

Open afterwire opened 5 years ago

afterwire commented 5 years ago

https://wordpress.org/plugins/pardot/

I will work with @evidenceaction2 to get the appropriate values

afterwire commented 5 years ago

I've installed the plugin and put in the appropriate information that we discussed.

simonegiacco commented 5 years ago

We have an issue with this task:

afterwire commented 5 years ago

I put together the following test page and ran it on a local server and it seemed to work fine. Can we do something similar?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Example Form</title>
</head>
<body>
  <form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/280802/2017-03-02/4ymvv6" class="form" id="pardot-form">
    <input type="email" name="280802_9327pi_280802_9327" id="280802_9327pi_280802_9327" value="" size="30" maxlength="255">
    <input name="_utf8" type="hidden" value="☃">
    <input type="submit" value="Submit">
  </form>
</body>
</html>

It seems like so long as the form action is the correct value and the name and id field of the email match then it would work.

I will have to confirm with Hanna at @evidenceaction2 if my email was added to the list correctly?

afterwire commented 5 years ago

There is one annoying "bug" where it will redirect the user away from the page if we do it this way.

We could try to submit the form using AJAX I guess? But I dont know if we would run into CORS issues doing that.

Here's a sample snippet on how we could do it though:

function formSubmit(event) {
  var url = "/post/url/here";
  var request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.onload = function() { // request successful
  // we can use server response to our request now
    console.log(request.responseText);
  };

  request.onerror = function() {
    // request failed
  };

  request.send(new FormData(event.target)); // create FormData from form that triggered event
  event.preventDefault();
}

// and you can attach form submit event like this for example
function attachFormSubmitEvent(formId){
  document.getElementById(formId).addEventListener("submit", formSubmit);
}

Taken from https://stackoverflow.com/questions/25983603/how-to-submit-html-form-without-redirection and additional reference material here https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript

afterwire commented 5 years ago

@simonegiacco Just confirmed that the email I tested was indeed added to the mailing list with this method. So if we can move forward with the target='_blank' option we discussed that would be great!

afterwire commented 5 years ago

@simonegiacco Just wanted to confirm with you if you were able to take care of this?

afterwire commented 5 years ago

Hi @simonegiacco, this is really close to done but I just realised that you only have 1 of the 2 forms at the moment pointing to the Pardot URL.

Also I didn't think of this initially but the URL should be using HTTPS to avoid mixed-content warnings. So the form action for BOTH newsletter signup forms should be https://go.pardot.com/l/280802/2017-03-02/4ymvv6