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.

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

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.

AttributeDescription
label This is the label that the users will see in the dropdown if there are multiple actions.
methodThis is the HTTP method for your end-point. You can add GET or POST.
urlThis is the URL where the form will submit.
targetThis 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
            }
          }
        }
      }
    }
  }
});

Did this page help you?