Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

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
    }
  }
});

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
            }
          }
        }
      }
    }
  }
});

Updated about a month ago


Form


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.