Skip to content

Instantly share code, notes, and snippets.

@afischoff
Last active December 1, 2022 20:51
Show Gist options
  • Select an option

  • Save afischoff/6252964 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown

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
Copy Markdown

works like a charm, thanks a lot.

@matthendrix

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

@mlougheed

Copy link
Copy Markdown

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

@anaghs

anaghs commented Jan 25, 2018

Copy link
Copy Markdown

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

boldcolin commented Feb 7, 2018

Copy link
Copy Markdown

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

Crim commented Oct 3, 2018

Copy link
Copy Markdown

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