Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stuartajd/pardotform.js
Listen to events from an embedded Pardot Form, inspired by Marketos Forms2.js.
https://github.com/stuartajd/pardotform.js
pardot pardot-form
Last synced: 7 days ago
JSON representation
Listen to events from an embedded Pardot Form, inspired by Marketos Forms2.js.
- Host: GitHub
- URL: https://github.com/stuartajd/pardotform.js
- Owner: stuartajd
- Created: 2022-01-31T09:52:00.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-16T15:13:45.000Z (over 1 year ago)
- Last Synced: 2024-11-09T02:44:56.433Z (2 months ago)
- Topics: pardot, pardot-form
- Language: HTML
- Homepage:
- Size: 24.4 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Listen to events from an embedded Pardot Form, inspired by Marketos Forms2.js.
Report Bug
·
Request Feature
## How it works
As we don't control the full end-to-end process of creating a Pardot form, there are events that are emitted via PostMessage from the form iFrame. Pardot allows forms to be embedded using standard iFrames and still maintain default functionality such as prepopulation & progressive profiling.
Within the layout template on the form, emitters can be placed at strategic points to enable the Pardot form to trigger an event at the correct time. For example, on load.
When creating a Pardot form, the form should be set to "Always display form after submission" to allow the script to trigger the validation rules correctly on revisiting the page. The "Redirect to the following URL" should not be checked to allow the script to control the submission.
The main `src/pardotform.js` script should then be included on the outer page, this will then listen to all events outputted by the script.
## Methods
| Method | Description | Parameters |
|---------------------- |----------------------------------------------------------------------------------------------------------------------------------------- |------------ |
| new PardotForm(url, config) | Loads a new PardotForm instance | URL: Pardot Form URL, Config: see below for config options |
| .loadForm(container) | Loads a new form iFrame form into the container element | container: DOM Element for the iFrame to be appended to |
| .onLoad() | Adds a callback that is triggered when the form has completed loading. | callback |
| .onSubmit() | Adds a callback that is triggered when the form is submitted. This will occur before the success / failure of the submission is known. | callback |
| .onValidate() | Adds a callback that is triggered when the validation is attempted. The success or failure of the submission will be returned in the callback. | callback |
| .onSuccess() | Adds a callback that is triggered when the submission was successful. | callback |
| .getFormElem() | Returns the container element for the embedded form. | |
| .getUrl() | Returns the Pardot form URL. | |
| .resize() | Trigger a resize of the Pardot iFrame based off the contents height, will not resize if the `resize` option is disabled in config. | |
## Config
| Method | Description | Parameters |
| ----- | ----- | ----- |
| resize | The form height can be automatically resized when the outer page is resized. | Default: `"resize": true`
## Usage
#### Page Script
The page script should be uploaded to a clients instance, then referenced directly in the code. This will include the classes required for the `pardotform.js` script to run.
#### Form Layout Template
Within Pardot, a layout template should be completed and the "Form" tab content updated to include the content from the `src/form-layout.html` file. This contains the default output for a Pardot form however does include slight alterations to emit events.
## Examples
#### Default Pardot iFrame
```html
const pardotForm = new PardotForm("*Pardot Form URL*");
pardotForm
.onLoad(function(form){
console.log("loaded");
})
.onSubmit(function(form){
console.log("submitted");
})
.onValidate(function(form, passesValidation){
console.log("validated");
})
.onSuccess(function(form){
console.log("success");
});
```
#### Dynamically creating a new Pardot form
```html
const pardotForm = new PardotForm("*Pardot Form URL*");
pardotForm
.newForm(document.querySelector(".pardot-form-here"))
.onLoad(function(form){
console.log("loaded");
})
.onSubmit(function(form){
console.log("submitted");
})
.onValidate(function(form, passesValidation){
console.log("validated");
})
.onSuccess(function(form){
console.log("success");
});
```