Pardot Form AJAX Handler

"Pardot Form AJAX Handler", or "PFAH" in short, will help to you setup an AJAX submission for Salesforce Pardot forms, which were designed to submit with POST in iframe. With JSONP, we can even handle the result from Pardot's redirect.

Install

1. Extract and upload all the files in dist folder to your server.
   • e.g., //sample.com/pfah/.

Setup

1. Add main script after jQuery is introduced.
   • e.g., <script src="//sample.com/pfah/pardot-form.js"></script>
2. Go to Pardot and edit success/error location of the form.
   • set "Success Location" as //sample.com/pfah/pardot-form-callback-done.js.
   • set "Error Location" as //sample.com/pfah/pardot-form-callback-error.js.

Basic Usage

Once you've wrapped .pfah-form with .pfah-wrapper, you are good to go! .pfah-done or .pfah-error are shown when the result comes back from Pardot.

Template

<div class="pfah-wrapper">
  <form action="https://go.pardot.com/l/285052/2018-02-23/22nrnw" class="pfah-form">
    <input type="email" class="pfah-input" name="email" required />
    <input type="text" class="pfah-input" name="name" />
    <button type="submit" class="pfah-input">Submit</button>
  </form>
  <aside class="pfah-done">
    <div class="pfah-done-text">Thank you for your time!</div>
  </aside>
  <aside class="pfah-error">
    <span class="pfah-error-text">Something wrong, please try again!</span>
  </aside>
</div>

Samples

For more examples, please check demo folder.

• demo-basic.html: Basic inpage and popup forms.
• demo-css.html: Form with preloaded style.
• demo-event.html: Form with event controls.
• demo-popup.html: Manually trigger popup when blocked.

Notices

• Make sure that you have [type="submit"] button/input to submit your form.
• Multiple forms are supported, while same forms share same states.

Advanced Usage

Configuration

Extra configuration can pass to PFAH by add data properties to .pfah-wrapper.

• data-state="done": PFAH will save "done/error" state into localStorage with .pfah-wrapper ID.
  • This attribute can be either "done", "error" or "all".
  • With form states, PFAH will show .pfah-done or/and .pfah-error next time when user visit the page.
• data-source="source": PFAH will add a [type="hidden"] to pass current url to Pardot for tracking purpose.
  • This attribute can be customized according to your choice, but we suggest to use "source" or "referrer".
  • You have to add source or your customized field to Pardot form to make it work.
  • You have to make sure you haven't use the same name somewhere else in form.
• data-style="no": Use this option to complete disable the style of PFAH by not load css file at all.
  • You can use this option if you decide to import css file by yourself.
  • This option will disable theme as well.
• data-error="keep": Use this option to reserve the space for error message.
  • By default, PFAH will slide down the error message.
• data-remember="no": Use this option to disable input auto-complete function.
  • By default, PFAH will keep value you input in localStorage with same name.
• data-recaptcha="your_site_key": Use this option to add reCAPTCHA v2 checkbox to your form.
  • You need to generate your own site key from Google reCAPTCHA service.

Popup

1. Wrap your .pfah-wrapper in .pfah-popup.
2. Name your .pfah-popup with class or ID
   • e.g., #my-form.
   • Please DO NOT name it with prefix of pfah-
3. Toggle popup with any element with data-toggle="pfah-popup"
   • Use data-target to link the element with PFAH
   • You can manually toggle popup if click event is blocked.
   • Clicking on any elements with .pfah-close will close current popup.
   • Use .pfah-close-delay on <a> if you decide to download then close popup.

<button data-toggle="pfah-popup" data-target="#my-form"></button>
...
<div class="pfah-popup" id="my-form">
  <div class="pfah-wrapper">
    <i class="pfah-close-icon pfah-close pfah-icon"></i>
    ...
  </div>
</div>

Checkbox

PFAH has a customized checkbox style.
With .pfah-check-required, PFAH will show "error" state if those checkboxes were not selected on submit.

<label class="pfah-check-item">
  <input class="pfah-check-input pfah-check-required" type="checkbox" checked>
  <span class="pfah-check-icon pfah-icon"></span>
  <span class="pfah-check-label">Agree terms.</span>
</label>

Functions

• pfah.init(): PFAH will initialize automatically when DOM is ready. However you can manually perform it if forms are loaded into page asynchronously.
  • Load default form style (and extra theme).
  • Check form action url.
  • Generate ID.
  • Show stored state.
  • Load vendor js if there is a form shown in popup.
• pfah.callback({ result: state }): PFAH will callback from pardot-form-callback-done.js and pardot-form-callback-error.js automatically after a form is submitted. However you can manually if you want to simulate the form result.
  • Trigger callback events.
  • state can be "done" or "error".
  • pfah.form.id needs to be indicated before your call.
• pfah.popup(target): If your click event is blocked on element, you can try to call it manually.
  • Trigger call popup event.

Events

PFAH will log to console when some of following events happen to .pfah-wrapper:

• pfah.notpardot: A form action was not a proper Pardot iframe embed link.
• pfah.vendor: A vendor of PFAH is loading to page, with its name.
• pfah.ready: A form is ready to use, with .pfah-wrapper id.
• pfah.submit: A form was submitted to Pardot, with .pfah-wrapper id.
• pfah.callback: Received result from Pardot, with .pfah-wrapper id and "done/error" result.
• pfah.popup: A popup is triggered by user, with .pfah-wrapper id and "open/close" state.
• pfah.callpopup: PFAH is asked to show popup.

Layout

• .pfah-row-with-col: The inputs in PFAH can be either take full width or only half of the row.

<div class="pfah-row">
  <div class="pfah-col">
    ...
  </div>
</div>
...
<div class="pfah-row pfah-row-with-col">
  <div class="pfah-col">
    ...
  </div>
  <div class="pfah-col">
    ...
  </div>
</div>

• .pfah-center: Align text to center.

<div class="pfah-title pfah-center">My Form</div>

• .pfah-hidden: Hide something from user.

<div class="pfah-hidden">Secret</div>

Themes

PFAH allow you to override default style by adding your own css file. Different forms can use their own themes even they are on the same page.

1. upload pardot-form-mytheme.css to same folder you put PFAH.
   • e.g., //sample.com/pfah/pardot-form-mytheme.css
2. add data-theme="mytheme" to .pfah-wrapper.
   • Make sure your theme name is in lower case.

More

References

• JS Path: stackoverflow.com/questions/2255689/
• JSONP: stackoverflow.com/questions/47047487/

Tools

• Dependency: jQuery
• Vendor: bPopup, jquery-throttle-debounce, get-current-path
• JS linter: standard
• CSS linter: CSSLint
• HTML linter: htmllint

Change logs

190911
+ allow reCAPTCHA

180903
# path detect fallback

180709
+ samples: css/popup
+ events: ready/popup

180629
# debouce input
+ more samples

180626
+ allow same forms
+ allow remember input

180620
+ allow close popup

180619
+ allow required checkbox
+ allow text center

180616
+ add icons
+ add demo
+ allow popup
+ allow half row column

180613
# update basic style
+ allow keep error message

180608
+ allow source track
+ allow style disable
# unify init function

180607
+ initial release