Form

Form is a built-in tool for our page builder. It lets users create and add forms to their landing pages. These could be used to capture leads, sign up, contact, and a variety of other use cases.

Enable / Disable

Form tool is enabled by default but you can choose to disable it.

unlayer.init({
  tools: {
    form: {
      enabled: false
    }
  }
});

Usage Limit

You can put a limit to how many times Form tool can be used in a single design.

unlayer.init({
  tools: {
    form: {
      usageLimit: 1
    }
  }
});

Default Values

Form tool comes with the following default values. You can choose to change any of these.

Property	Default Value
fields	`[ { "name": "email", "type": "email", "label": "Email", "placeholder_text": "Enter email here", "show_label": true, "required": true } ]`
formWidth	`100%`
fieldBorder	`{ borderTopWidth: '1px', borderTopStyle: 'solid', borderTopColor: '#CCC', borderLeftWidth: '1px', borderLeftStyle: 'solid', borderLeftColor: '#CCC', borderRightWidth: '1px', borderRightStyle: 'solid', borderRightColor: '#CCC', borderBottomWidth: '1px', borderBottomStyle: 'solid', borderBottomColor: '#CCC', }`
fieldBorderRadius	`0px`
fieldPadding	`10px`
fieldBackgroundColor	`#FFFFFF`
fieldColor	`#000000`
fieldFontSize	`12px`
formAlign	`center`
fieldDistance	`10px`
labelFontSize	`14px`
labelColor	`#444`
labelAlign	`left`
labelPadding	`0px 0px 3px`
buttonText	`Submit`
buttonColors	`{ color: '#FFF', backgroundColor: '#3AAEE0', hoverColor: '#FFF', hoverBackgroundColor: '#3AAEE0' }`
buttonAlign	`center`
buttonWidth	`50%`
buttonFontSize	`14px`
buttonBorder	`{}`
buttonPadding	`10px`
buttonMargin	`5px 0px 0px`

Here are a few examples on how to change these default values.

Fields

When someone adds a form to their design, it only has the Email field added by default. You can change that and add more fields.

unlayer.init({
  tools: {
    form: {
      properties: {
        fields: {
          value: [{
            "name": "first_name",
            "type": "text",
            "label": "First Name",
            "placeholder_text": "Enter first name here",
            "show_label": true,
            "required": true
          }, {
            "name": "last_name",
            "type": "text",
            "label": "Last Name",
            "placeholder_text": "Enter last name here",
            "show_label": true,
            "required": false
          }, {
            "name": "email",
            "type": "email",
            "label": "Email",
            "placeholder_text": "Enter email here",
            "show_label": true,
            "required": true
          }],
        }
      }
    }
  }
});

Form Width

unlayer.init({
  tools: {
    form: {
      properties: {
        formWidth: {
          value: "100%"
        }
      }
    }
  }
});

Field Border

unlayer.init({
  tools: {
    form: {
      properties: {
        fieldBorder: {
          value: {
            borderTopWidth: '1px',
            borderTopStyle: 'solid',
            borderTopColor: '#CCC',
            borderLeftWidth: '1px',
            borderLeftStyle: 'solid',
            borderLeftColor: '#CCC',
            borderRightWidth: '1px',
            borderRightStyle: 'solid',
            borderRightColor: '#CCC',
            borderBottomWidth: '1px',
            borderBottomStyle: 'solid',
            borderBottomColor: '#CCC',
          }
        }
      }
    }
  }
});

Field Border Radius

unlayer.init({
  tools: {
    form: {
      properties: {
        fieldBorderRadius: {
          value: "0px"
        }
      }
    }
  }
});

Field Padding

unlayer.init({
  tools: {
    form: {
      properties: {
        fieldPadding: {
          value: "10px"
        }
      }
    }
  }
});

Preset Fields

When a user tries to add a new field, there are some preset fields available in the dropdown. You can change those preset fields if you like.

unlayer.init({
  tools: {
    form: {
      properties: {
        fields: {
          editor: {
            data: {
              defaultFields: [
                {name: "birthday", label: "Birthday", type: "date"},
                {name: "company", label: "Company", type: "text"},
                {name: "email", label: "Email", type: "email"},
                {name: "first_name", label: "First Name", type: "text"},
                {name: "last_name", label: "Last Name", type: "text"},
                {name: "phone_number", label: "Phone Number", type: "text"},
                {name: "website", label: "Website", type: "text"},
                {name: "zip_code", label: "Zip Code", type: "text"}
              ]
            }
          }
        }
      }
    }
  }
});

New Custom Fields

By default, users can add a custom field if they want. You can disable this behavior.

unlayer.init({
  tools: {
    form: {
      properties: {
        fields: {
          editor: {
            data: {
              allowAddNewField: true
            }
          }
        }
      }
    }
  }
});

Submit Actions

You can control where you want the form to submit, or you can let the end-users add a custom URL.

Pre-Defined Actions

You can add pre-defined actions for the form submission end-point. If there are multiple actions, the users will see a dropdown to pick one. Otherwise, it will just default to the one you provide.

Each action needs to have the following attributes.

Attribute	Description
label	This is the label that the users will see in the dropdown if there are multiple actions.
method	This is the HTTP method for your end-point. You can add `GET` or `POST`.
url	This is the URL where the form will submit.
target	This is target window where the form will submit. If you want the form to submit in a new tab, you can add `_blank`.

unlayer.init({
  tools: {
    form: {
      properties: {
        action: {
          editor: {
            data: {
              actions: [
                {
                  label: 'Marketing',
                  method: 'POST',
                  url: 'http://whatever.com/marketing-form-submission',
                },
                {
                  label: 'Sales',
                  method: 'POST',
                  target: '_blank',
                  url: 'http://whatever.com/sales-form-submission',
                }
              ]
            }
          }
        }
      }
    }
  }
});

Custom URL

You can let the end-user add a custom URL for the submit action. To enable this, you can set allowCustomUrl to true.

unlayer.init({
  tools: {
    form: {
      properties: {
        action: {
          editor: {
            data: {
              allowCustomUrl: true
            }
          }
        }
      }
    }
  }
});