Last active
December 1, 2022 20:51
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> </td> | |
| <td><input type="submit" name="Submit"></td> | |
| </tr> | |
| </table> | |
| </form> | |
| </body> | |
| </html> |
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
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?