Documentation › JavaScript framework of public web forms › Widget

Widget for embedding public web forms

You can embed a Plumsail web form to any website using the Widget.

Find the Widget snippet in your form’s settings → Sharing tab:

Widget Snippet

The Plumsail.Forms constructor creates a form instance:

var fd = new Plumsail.Form(element, formId, options)

The Plumsail.Forms constructor returns the Form Manager.

You can use the constructor to define form properties when embedding a form. The constructor takes the following arguments:

element

A DOM element or a CSS selector for an HTML-element that will be replaced with the form:

Element argument

formId

The ID of the form that will be rendered:

From ID argument

options

An object with the initial form settings:

var fd = new Plumsail.Form('#plumsail-form-nc1p', 'b9309da3-9669-40ca-b643-198d7d2c4b36', {
    culture: 'de-DE',
    language: 'de-DE',
    theme: 'Plumsail'
})

culture

The name of the forms’ culture. By default, it’s taken from the browser settings.

Set the culture of the form to German:

var fd = new Plumsail.Form('#plumsail-form-nc1p', 'b9309da3-9669-40ca-b643-198d7d2c4b36', {
    culture: 'de-DE'
})

language

The name of the form’s language. By default, it’s taken from the browser settings.

Set the language of the form to German:

var fd = new Plumsail.Form('#plumsail-form-nc1p', 'b9309da3-9669-40ca-b643-198d7d2c4b36', {
    language: 'de-DE'
})

theme

The theme of the form. By default, it’s taken from the form’s configuration.

Use the name of a predefined theme or a custom theme ID to set the form theme:

//set the theme to a predefined theme by name
var fd = new Plumsail.Form('#plumsail-form-nc1p', 'b9309da3-9669-40ca-b643-198d7d2c4b36', {
    theme: 'Plumsail'
})

//set the theme to a custom theme by theme ID
var fd = new Plumsail.Form('#plumsail-form-nc1p', 'b9309da3-9669-40ca-b643-198d7d2c4b36', {
    theme: 'c5449aa88b954ab8eeab171cb1935eef'
})

beforeCreate

The event handler of the beforeCreate event.

var fd = new Plumsail.Form('#plumsail-form-nc1p', 'b9309da3-9669-40ca-b643-198d7d2c4b36', {
    beforeCreate: function(vueConfig) {
        console.log('beforeCreate');
        console.log(vueConfig);
    }
})

created

The event handler of the created event.

var fd = new Plumsail.Form('#plumsail-form-nc1p', 'b9309da3-9669-40ca-b643-198d7d2c4b36', {
    created: function(vue) {
        console.log('created');
        console.log(vue);
    }
})

beforeRender

The event handler of the beforeRender event.

var fd = new Plumsail.Form('#plumsail-form-nc1p', 'b9309da3-9669-40ca-b643-198d7d2c4b36', {
    beforeRender: function(vue) {
        console.log('beforeRender');
        console.log(vue);
    }
})

rendered

The event handler of the rendered event.

var fd = new Plumsail.Form('#plumsail-form-nc1p', 'b9309da3-9669-40ca-b643-198d7d2c4b36', {
    rendered: function(vue) {
        console.log('rendered');
        console.log(vue);
    }
})