Skip to content

Instantly share code, notes, and snippets.

@afischoff
Last active December 1, 2022 20:51
Show Gist options
  • Save afischoff/6252964 to your computer and use it in GitHub Desktop.
Save afischoff/6252964 to your computer and use it in GitHub Desktop.
Example of using a hidden iframe to pass data to a Pardot form handler before continuing with normal form submission.
<html>
<head>
<title>Pardot Example Form Handler Submit</title>
<!-- Include jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Post to Pardot function -->
<script type="text/javascript">
// set the pardot form handler url and form element id
var partdotFormHandlerURL = 'http://www2.mydomain.com/form/handler/url';
var formElementID = 'example-form';
function postToPardot(formAction) {
$('#pardot-form-handler').load(function(){
$('#'+formElementID).attr('action', formAction);
$('#'+formElementID).submit();
});
$('#pardot-form-handler').attr('src', partdotFormHandlerURL + '?' + $('#'+formElementID).serialize());
}
$(document).ready(function(){
$('body').append('<iframe id="pardot-form-handler" height="0" width="0" style="position:absolute; left:-100000px; top:-100000px" src="javascript:false;"></iframe>');
$('#'+formElementID).attr('action','javascript:postToPardot(\'' + $('#'+formElementID).attr('action') + '\')');
});
</script>
<!-- end Post to Pardot function -->
</head>
<body>
<h3>Contact Us Form</h3>
<form id="example-form" action="my-server-form-action-page.php" method="post">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstName"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastName"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
@noorhammad
Copy link

Great gist, works perfectly.

One small typo on line 11, there is a variable declared (and invoked on line 19):

var partdotFormHandlerURL = ...

Which is a misspelling of 'pardot' (extra 't' before the 'd') which might cause confusion if typed.

@supercamilo
Copy link

works like a charm, thanks a lot.

@matthendrix
Copy link

  1. //$('#pardot-form-handler').load(function(){
  2. $('#pardot-form-handler').on('load', function(){

@mlougheed
Copy link

Can't get it to work. Do you have a live example? Will it work with a .NET site?

@anaghs
Copy link

anaghs commented Jan 25, 2018

The gist looks great. The one thing I am still trying to understand is why would I want to use an iframe to post to pardot? Is it for security?

@boldcolin
Copy link

boldcolin commented Feb 7, 2018

I tried a similar approach; I use $.post to POST form values to a PHP file. And there I use CURL (curl_exec) to post everything to the pardot form handler. Everything works fine but the Pardot cookies are not being set. Is the iFrame method a better method?

@Crim
Copy link

Crim commented Oct 3, 2018

I tried a similar approach; I use $.post to POST form values to a PHP file. And there I use CURL (curl_exec) to post everything to the pardot form handler. Everything works fine but the Pardot cookies are not being set. Is the iFrame method a better method?

That's because you are doing a server side post. When you make the request from your server, Pardot sets the tracking cookies on your CURL's request. You want the cookies set on the client's browser. This is why the iframe works better, because the client browser is making the request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment