The Generate embed web form script API call allows leveraging the same embed script approach as with public forms for leads (described in our article on Public Form Sharing), including all the available embed types such as:
- Simple <iframe>
- Dynamic <iframe>
- JS Widget <script>
The three embed types listed above are referenced to as the iframe, iframe_script, and widget types respectively in the endpoint’s body:
Similarly as with the Generate web form endpoint, the Generate embed web form script endpoint generates a lead form session using the leadId and webFormDefaultId parameters.
The only difference between the two is that the embed variant gives the embed specific configurations and responds with a script to insert.
Style Options
The Generate embed web form script endpoint allows you to adjust style configurations, however only for the widget type.
For instance, if you need to update all of the input fields' dropdown height, use inputHeight to change them all at once.
Or, if the font size doesn't fit your website design, you can adjust the fontSize property and it will calculate all of the other element font sizes accordingly.
See the full list of properties below:
| Property | Description | Overrides Form Share Style |
| hideHeader | Hides the Web Form top-of-the-page header | Hide Header |
| headerBackgroundColor | Top header background color | Header Background |
| primaryColor | Primary color: Buttons, input border |
Primary Color |
| secondaryColor | Secondary color: button hover text color | Secondary Color |
| fontColor | Color of font in the form |
Font Color |
| webformBackgroundColor | Main layout background color | Web Form Background Color |
| sectionBackgroundColor | Background color of each section of the form that contains fields | Section Background Color |
| fontType |
Font-family of the Web Form font Options:
|
Web Form Font |
| fontSize |
Font size of the main form body that the rest of the font sizes are calculated from. Default: 1rem Max: 24px |
|
| buttonColor |
Button background color |
|
| buttonTextColor |
Button text color |
|
| buttonHoverTextColor |
Button text color on hover |
|
| buttonHoverColor |
Button background color on hover |
|
| inputHeight |
Height of the input fields and dropdowns Max: 38px |
|
| buttonHeight |
Height of buttons |
|
| inputBorderColor |
Input fields and dropdowns border color |
Script Example
<script> (async function (w,d,s,o,f,cf,js,fjs) { w['WF-Widget'] = o; cf = { org: new URL(f).origin, ...cf }; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push([...arguments, cf]) }; const el = !d.getElementById('wf-widget') && Object.assign(document.createElement('div'), { id: 'wf-widget' }); el && d.currentScript.parentNode.insertBefore(el, d.currentScript) js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; const fc = await fetch(f).then(r => r.json()); cf.bnd = fc?.url; js.id = o; js.src = fc?.url; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', 'wf', 'https://example.com/web-form/bundle', { lf: false })); wf('init', { elementId: "wf-widget", id: '19c70afd-7f7b-4286-a9fd-f68ba25b7caf', options: { hideHeader: false, headerBackgroundColor: '#1d2f42', primaryColor: '#429fe8', secondaryColor: 'white', fontColor: '#333333', webformBackgroundColor: '#eaedf2', sectionBackgroundColor: '#ffffff', fontType: 'Lato', fontSize: 'initial', buttonColor: 'initial', buttonTextColor: 'initial', buttonHoverColor: 'initial', buttonHoverTextColor: 'initial', inputHeight: 'initial', buttonHeight: 'initial', inputBorderColor: 'initial' }, events: {} }); </script>
Script Customization
In some scenarios you may need to have a custom script preconfigured.
For example, let’s say you want to configure embed script events, or don’t want to paste style options through the endpoint’s request body.
The endpoint response includes the bundle_url (for widget type) and url (for both iframe options) properties to be inserted dynamically into a script template.
For widget type copy bundle_url and insert it at the following place in your script template:
For the iframe type, copy the url and put it into src attribute:
For the iframe_script type, copy the url and insert it into the following place:
List of Events
| Name | Description |
|
onLoaded ({ initialValues: Object, hasESign: boolean }) => void |
Called when all the web form requests are loaded |
|
beforeSubmit (values: Object, { form: Object, hasESign: boolean }) => void | Promise |
When the submit button is clicked but before the actual submit request is sent In case you need to wait for any async action to be done before the actual submit is performed you can use Promise, e.g.
{ |
|
onSubmitted (msg: string, { values: Object, form: Object, hasESign: boolean }) => void |
After the form is successfully submitted. In the case of web forms with E-Sign step, still gets triggered after a successful form submission, before E-Sign doc is generated. |
|
onSubmitFailed (msg: string, { values: Object, form: Object, hasESign: boolean }) => void |
Fired when form submission failed |
|
onESignFailed (msg: string, { eSignType: boolean }) => void |
Fired when E-Sign document signed process failed |
|
onFormFinished (values: Object, { form: Object, hasESign: boolean }) => void |
Form with E-Sign: after E-Sign doc is signed Form without E-Sign: after a form is successfully submitted. |
Parameters
| Name | Description |
|
initialValues { [string]: (string | null)[] } |
The form initial values that a form is prefilled with during the load |
|
hasESign boolean |
Defines if a web form has the E-Sign document/step |
|
values { [string]: (string | null)[] } |
Current form values object |
|
form FormState (react-final-form) |
The state of a form |
|
msg string |
Error message |
|
eSignType string |
Adobe E-Sign widget events Web Message Events — Acrobat Sign Developer Guide
For onESignFailed only the following events are available:
|