Skip to content
/ pardotFormHandlerJS Public

Save yourself some time and set up custom html forms with direct submissions to Salesforce (aka "SFDC") Pardot (aka "Marketing Cloud Account Engagement"). It has custom JSONP AJAX implementation, allowing Pardot messaging in your form, request timeouts, cancellation, and more...

mindaugaspaulauskas.github.io/pardotFormHandlerJS/

License

MIT license
2 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

MindaugasPaulauskas/pardotFormHandlerJS

BranchesTags

Repository files navigation

pardotFormHandlerJS

pardotFormHandlerJS is a script tailored for setting up custom Pardot (aka "Marketing Cloud Account Engagement") forms on your website without using iframes or backend APIs, as it sends requests directly from browser to Pardot handler.

Project is lightweight and doesn't have any dependencies, effort was made to not add any unnecessary "fluff". It was attempted to support old browsers, without overdoing it. Suggestions and reports are welcome. There was no AI slavery on this project.

Demos

All demos:

https://MindaugasPaulauskas.github.io/pardotFormHandlerJS/

Demo source code:

https://github.com/MindaugasPaulauskas/pardotFormHandlerJS/tree/main/demo/

Setup

  1. Add pardot-form-handler-js.min.js to your project.
    • for example: <script src="https://yourwebsite.com/path-to-scripts/pardot-form-handler-js.min.js"></script>.
  2. Add callback scripts to your server, callback scripts can be dynamic or static:
    • Option A (recommended): setup dynamic callback script as it's documented in pardot-form-callback-dynamic.js-examples directory, example of scripts location: https://yourwebsite.com/path-to-scripts/pardot-form-callback-dynamic.js
    • Option B (not recommended as error messages from Pardot are lost, default error message will be shown): upload pardot-form-callback-error.js and pardot-form-callback-success.js scripts to your server to be accessed within your website, for example: https://yourwebsite.com/path-to-scripts/pardot-form-callback-error.js and https://yourwebsite.com/path-to-scripts/pardot-form-callback-success.js.
  3. Edit Chosen Pardot Form Handlers Success and Error Locations to the one you have set up before.
    • update Success Location, for example: https://yourwebsite.com/path-to-scripts/pardot-form-callback-success.js.
    • update Error Location, for example: https://yourwebsite.com/path-to-scripts/pardot-form-callback-dynamic.js.
  4. Edit Chosen Pardot Form Handlers Form Fields:
    • create Form Fields corresponding to your form inputs (or form values in the case of an ajax call).
    • for every field choose External Field Name that corresponds to html form input names.
    • for every field write an appropriate Error Message, so it could be understood in the error message, as all errors get joined to a single message.

Basic usage

Create an html form with action to your Pardot form handler location and add initialize it with code:

let pardotFormDom = document.querySelector(".your-form-elements-selector");
let pardotForm = window.pardotFormHandlerJS.setupForm(pardotFormDom);

Success and error messages will appear on top of the form, if you want messaging to be placed in a different location, within your form, create a container with class pardot-form-handler-js--message-container.

You can set up multiple forms on the page.

If you are choosing to use provided AJAX functionality, probably you have done some similar work before as there is some extra work involved.

Documentation

Contents

PardotForm AJAX
pardotFormHandlerJS.setupForm() pardotFormHandlerJS.ajax()
PardotForm.setSettings() -
PardotForm.onBeforeSubmit() -
PardotForm.pause() -
PardotForm.unpause() -
PardotForm.onSubmit() AJAX.onSubmit()
PardotForm.onCancel() -
PardotForm.onSuccess() AJAX.onSuccess()
PardotForm.onError() AJAX.onError()
PardotForm.onComplete() AJAX.onComplete()
PardotForm.destroy() -
(Settings) (Settings)
(Example of usage) (Example of usage)
Utility functions
pardotFormHandlerJS.getFormValues()

PardotForm documantation

pardotFormHandlerJS.setupForm()

Description

pardotFormHandlerJS.setupForm(form[, settings])

Returns a PardotForm object

Parameters:

  • form is the dom object of the form that will submit to Pardot
  • settings is an object with initial settings to be set. Read more in Settings parameter object at the end of this documentation. (Settings also can be set later via setSettings method)

PardotForm.setSettings()

PardotForm.setSettings(settings)

Sets the settings for the Pardot form.

Returns a PardotForm object.

Parameters:

  • settings is an object with settings to be set. Read more in Settings parameter object at the end of this documentation.

PardotForm.onBeforeSubmit()

PardotForm.onBeforeSubmit(callbackFunction)
PardotForm.onBeforeSubmit(function(formValues, form){/* yourcode goes here */})

Returns a PardotForm object.

Parameters:

  • callbackFunction is a function to be executed just before the submission, allowing code to terminate submission if needed.

Parameters of callbackFunction:

  • formValues is an object with form values.
  • form is a DOM element for referencing the form.

callbackFunction usage:

  • return false to terminate the submission
  • return true or void to process submission with original formValues
  • return modiffied formValues to continue with the submission

Example reasons for using callbackFunction:

  • to do local validation
  • to add hidden form values before sumbission
  • to do an asyncronious actions (includes usage of pause() and unpause())

PardotForm.pause()

PardotForm.pause()

Returns a PardotForm object.

pause() usage:

  • used in tandem with unpause() function, to pause submission for asyncronious process
  • call the function after onBeforeSubmit() is called and before callback function (callbackFunction) returns value;

Example reasons for using pause():

  • to do validation in an api
  • to to a CAPTCHA chalenge

PardotForm.unpause()

PardotForm.unpause(formValues)

Returns a PardotForm object.

Parameters:

  • formValues
  • set formValues as false to terminate the submission
  • set formValues as true or void to process submission with current formValues
  • set formValues as modiffied formValues to continue with the submission with .

unpause() usage:

  • used in tandem with pause() function, to pause submission for asyncronious process, it unpauses the submission
  • call the function after asyncronious process completes

Example reasons for using unpause():

  • to unpause the paused form (pausing reasons are listed in pause() functions section)
  • to add hidden form values before sumbission

PardotForm.onSubmit()

PardotForm.onSubmit(callbackFunction)
PardotForm.onSubmit(function(detail){/* your code goes here */})

Returns a PardotForm object.

Parameters:

  • callbackFunction is a function to be executed just after the submission.

Parameters of callbackFunction:

  • detail is an object submission and result details. In this case the result is not available.

Example reasons for using callbackFunction:

  • to lock form
  • to show loader
  • to remove old error messages

PardotForm.onCancel()

PardotForm.onCancel(callbackFunction)
PardotForm.onCancel(function(detail){/* your code goes here */})

Returns a PardotForm object.

Parameters:

  • callbackFunction is a function to be executed when a new form submission is made on the same form and the current request has not yet completed.

Parameters of callbackFunction:

  • detail is an object submission and result details. In this case the result is not available.

PardotForm.onSuccess()

PardotForm.onSuccess(callbackFunction)
PardotForm.onSuccess(function(detail){/* your code goes here */})

Returns a PardotForm object.

Parameters:

  • callbackFunction is a function to be executed when form submission is completed successfully.

Parameters of callbackFunction:

  • detail is an object submission and result details.

Example reasons for using callbackFunction:

  • to show custom success messaging
  • to replace the form with success message
  • to send form data to your database through an api call

PardotForm.onError()

PardotForm.onError(callbackFunction)
PardotForm.onError(function(detail){/* your code goes here */})

Returns a PardotForm object.

Parameters:

  • callbackFunction is a function to be executed when form submission is completed and has errors or timeouts.

Parameters of callbackFunction:

  • detail is an object submission and result details.

Example reasons for using callbackFunction:

  • to show custom error messaging

PardotForm.onComplete()

PardotForm.onComplete(callbackFunction)
PardotForm.onComplete(function(detail){/* your code goes here */})

Returns a PardotForm object.

Parameters:

  • callbackFunction is a function to be executed after the submission has completed (after success or error).

Parameters of callbackFunction:

  • detail is an object submission and result details.

Example reasons for using callbackFunction:

  • to unlock form
  • to remove/hide loader

PardotForm.destroy()

PardotForm.destroy()

Call this function to remove event listeners and cancel the current request of the Pardot form.

PardotForm settings parameter object

create an object with settings that you want to change, for example:

{
    successMessage: "Thank you!",
    timeout: 9999,
    defaultErrorMessage: "Something Went Wrong! Please try again.",
}

List of PardotForm Settings and default values:

  • actionUrl: false,
  • successMessage: "Success! Thank you for submission.",
  • resetFormAfterSuccess: true,
  • defaultErrorMessage: "Submission failed! Please enter required information.",
  • timeout: 5000,
  • timeoutMessage: "Oops! Request has timed out. Please try again later.",
  • showLoadingOverlay: true,
  • loadingOverlayBgColor: "rgba(0,0,0,0.1)",
  • loadingOverlayInnerHtml: [long string with html code, too long to display here],
  • showFormMessaging: true,
  • messageErrorBgColor: "#dd1a21",
  • messageErrorTxtColor: "#fff",
  • messageSuccessBgColor: "#147f3c",
  • messageSuccessTxtColor: "#fff",
  • messagePadding: "4px",
  • messageMargin: "0 0 4px",
  • messageBorderRadius: "4px".

Example of PardotForm Usage

let pardotDebugForm = window.pardotFormHandlerJS.setupForm(
    document.querySelector("#pardot-debug-form"),
    {successMessage: "Success!", loadingOverlayBgColor: "rgba(255,255,255,0.5)"}
)
    .setSettings({
        successMessage: "More Success!",
    })
    .onBeforeSubmit(function(formValues, form) {
        console.log("[onBeforeSubmit] formValues:", formValues);

        // Example code for pausing the submission.
        console.log("[pause]");
        pardotDebugForm.pause();
        setTimeout(() => {
            console.log("[unpause]");
            pardotDebugForm.unpause();
        }, 1000);
    })
    .onSubmit(function(detail) {
        console.log("[onSubmit] detail:", detail);
    })
    .onCancel(function(detail) {
        console.log("[onCancel] detail:", detail);
    })
    .onSuccess(function(detail) {
        console.log("[onSuccess] detail:", detail);
    })
    .onError(function(detail) {
        console.log("[onError] detail:", detail);
    })
    .onComplete(function(detail) {
        console.log("[onComplete] detail:", detail);
    });

pardotDebugForm.setSettings({
    successMessage: "Even more Success!",
});

AJAX documentation

pardotFormHandlerJS.ajax()

Description

pardotFormHandlerJS.ajax(url, values[, settings])

Returns an AJAX object

Parameters:

  • url is a string of a Pardot url that ajax call is going to submit to
  • values is an object with the values that are going to be submitted to Pardot
  • settings is an object with settings to be set. Read more in Settings parameter object at the end of this documentation.

AJAX.onSubmit()

AJAX.onSubmit(callbackFunction)
AJAX.onSubmit(function(detail){/* your code goes here */})

Returns an AJAX object.

Parameters:

  • callbackFunction is a function to be executed just after the submission.

Parameters of callbackFunction:

  • detail is an object submission and result details. In this case the result is not available.

Example reasons for using callbackFunction:

  • to lock form
  • to show loader
  • to remove old error messages

AJAX.onSuccess()

AJAX.onSuccess(callbackFunction)
AJAX.onSuccess(function(detail){/* your code goes here */})

Returns an AJAX object.

Parameters:

  • callbackFunction is a function to be executed when form submission is completed successfully.

Parameters of callbackFunction:

  • detail is an object submission and result details.

Example reasons for using callbackFunction:

  • to show custom success messaging
  • to replace the form with success message
  • to send form data to your database through an api call

AJAX.onError()

AJAX.onError(callbackFunction)
AJAX.onError(function(detail){/* your code goes here */})

Returns an AJAX object.

Parameters:

  • callbackFunction is a function to be executed when form submission is completed and has errors or timeouts.

Parameters of callbackFunction:

  • detail is an object submission and result details.

Example reasons for using callbackFunction:

  • to show custom error messaging

AJAX.onComplete()

AJAX.onComplete(callbackFunction)
AJAX.onComplete(function(detail){/* your code goes here */})

Returns an AJAX object.

Parameters:

  • callbackFunction is a function to be executed after the submission has completed (after success or error).

Parameters of callbackFunction:

  • detail is an object submission and result details.

Example reasons for using callbackFunction:

  • to unlock form
  • to remove/hide loader

AJAX settings parameter object

create an object with settings that you want to change, for example:

{
    successMessage: "Thank you!",
    timeout: 9999,
    defaultErrorMessage: "Something Went Wrong! Please try again.",
}

List of AJAX Settings and default values:

  • actionUrl: false,
  • successMessage: "Success! Thank you for submission.",
  • defaultErrorMessage: "Submission failed! Please enter required information.",
  • timeout: 5000,
  • timeoutMessage: "Oops! Request has timed out. Please try again later.".

Example of AJAX Usage

pardotFormHandlerJS.ajax(
    "https://pardothandler.onrender.com/pardot-handler-simulation-with-dynamic-success-and-error-location",
    {name: "Mindaugas", email: "fake@email.io"},
    {successMessage: "You have subscribed!", timeoutMessage: Something went wrong. Please try again later."}
)
    .onSubmit(function(detail) {
        console.log("[onSubmit] detail:", detail);
    })
    .onSuccess(function(detail) {
        console.log("[onSuccess] detail:", detail);
    })
    .onError(function(detail) {
        console.log("[onError] detail:", detail);
    })
    .onComplete(function(detail) {
        console.log("[onComplete] detail:", detail);
    });

Utility functions documentation

pardotFormHandlerJS.getFormValues()

pardotFormHandlerJS.getFormValues(form)

Returns an object with form values.

Parameters:

  • form is a Dom object of a form.

Usefull to get all form values, especialy when using AJAX functionality.

Other

  • More documentation is coming (especially on configuration)
  • More demos are coming (open to suggestions)
  • Please report any issues

Credits

Demo code

Demo hosting

About

Save yourself some time and set up custom html forms with direct submissions to Salesforce (aka "SFDC") Pardot (aka "Marketing Cloud Account Engagement"). It has custom JSONP AJAX implementation, allowing Pardot messaging in your form, request timeouts, cancellation, and more...

mindaugaspaulauskas.github.io/pardotFormHandlerJS/

Topics

form salesforce account-management form-submission sfdc pardot

Resources

Readme

License

MIT license
Activity

Stars

2 stars

Watchers

2 watching

Forks

1 fork
Report repository

Releases 4

v1.0.0 Latest
Nov 24, 2024
+ 3 releases

Sponsor this project

Languages