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.

PropertyDefault Value
fields[ { "name": "email", "type": "email", "label": "Email", "placeholder_text": "Enter email here", "show_label": true, "required": true } ]
formWidth100%
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', }
fieldBorderRadius0px
fieldPadding10px
fieldBackgroundColor#FFFFFF
fieldColor#000000
fieldFontSize12px
formAligncenter
fieldDistance10px
labelFontSize14px
labelColor#444
labelAlignleft
labelPadding0px 0px 3px
buttonTextSubmit
buttonColors{ color: '#FFF', backgroundColor: '#3AAEE0', hoverColor: '#FFF', hoverBackgroundColor: '#3AAEE0' }
buttonAligncenter
buttonWidth50%
buttonFontSize14px
buttonBorder{}
buttonPadding10px
buttonMargin5px 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
            }
          }
        }
      }
    }
  }
});

Updated 2 months 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.