How to Create a Form in Brizy

Every website needs a form. Whether to collect leads, accept payment, or simply to allow visitors to reach you out. There are a bunch of form builder plugins available for WordPress, but if you use Brizy, you don’t need to install one as Brizy has an element that you can use to add a form to the design (page or template) you are working on. Unlike other page builder plugins, say Elementor, the Form element of Brizy is available on both the free version and pro version. There is no difference in terms of field type availability. Whether you use Brizy Free or Brizy Pro, you can add the following field types on your form:

The difference between Brizy Free and Brizy Pro in terms of form creation is that in Brizy Free, you can’t connect your form with a third-party service like MailerLite, ConvertKit, and HubSpot.

A handy enough feature offered by Brizy related to form is the leads manager. This feature is particularly handy if you use Brizy Free and want to collect leads via your form. The feature also allows you to convert the leads into a CSV file for further processing. If you use tools like HubSpot or MailerLite, you can import the CSV file to your account. You can go to Brizy -> Leads to access the leads manager.

Creating a form in Brizy

First, create a new page (Pages -> Add New) and edit it with Brizy. Of course, you can also edit an existing page. Or you can also create/edit a template instead of a page.

On the Brizy editor, drag the Form element to the canvas area.

By default, you will have a form that consists of three fields. To remove an existing field, you can click the field you want to remove and click the trash icon on the appearing settings bar. From the appearing settings bar, you can also change the field type by clicking the Field tab. You can change the field type from the Type option. To add a new field, you can click the two-paper icon (duplicate) to duplicate it.

Setting the form action

By default, your form submissions are sent to the Brizy’s built-in leads manager. If you use Brizy Pro, you can set a custom form action to send the form submissions to your email account, MailerLite account, HubSpot account, Mailchimp account, and so on.

To set the form action, you can click the action button, followed by the plug icon on the appearing settings bar.

Setting a required field

Most online forms have at least one required field. If you want to set a certain field as a required field, click the associated field to open the settings bar. On the settings bar, click the Field tab and toggle the Required option.

Enabling/disabling label and placeholder

To enable/disable the label and placeholder of the fields, open the settings bar once again and click the Field tab. You can see the options to enable/disable the label and placeholder on the Advanced sub-tab.

To change the placeholder text and label text, you can simply highlight the label you want to change (or delete it) and type your new placeholder or text.

Setting the custom messages

After submitting a form submission, your visitor will get either a successful message or an error message. Brizy has a default message for each condition. You can also set a custom message for each condition if you want to. To do so, click the action button to open the settings bar. On the settings bar, click the chain icon. You can set a custom successful message on the Success field under the Message tab. Similarly, to set a custom error message, you can simply type your preferred message on the Error field.

Styling up the form

Once done setting up the fields, you can start styling up the form. If you want to set the form background (not fields background), you can edit the column or block associated with the Form element.

Customizing the fields background, text color, and border color

In Brizy, the setting options to set the fields background, text color, and border color lie in the same place. You can click anywhere on the form to open the settings bar. Once the settings bar appears, click the Colors tab to open the color picker. To set the fields background, you can click the Bg sub-tab. To set the text color, you can click the Text sub-tab. To set the border color, you can click the Border sub-tab. You can set the colors of these elements for both the normal state and hover state. Simply click the icon on the left side on the selector to switch between states.

Customizing the typography of the fields text

To set the typography of the fields text, you can click anywhere on the form to open the settings bar. On the settings bar, click the text tab to open the typography settings. You can set the font family on the left side. To set the font size, font height, and space between letters, you can go to the right side

Setting the fields size and border radius

When it comes to fields size, there are two variables involved: height and width. To set the height of the fields, you can open the settings bar (by clicking anywhere on the form) and click the Form tab. You will see a Background sub-tab. Click it and select one of the available size options. As you can see, there are also an option to set the border radius (the Corner option).

Unlike height, you can set a different width for each field. To do so, click the field you want to set the width of and click the gear icon on the appearing settings bar. Move the slider to set the width value.

Styling up the action button

To style up the action button, you can click it to open the settings bar. First, you can open the index pointer icon to set the button size, fill style, border radius (Corner), and border thickness. You can also set the icon, icon size, and icon position.

To set the typography of the button text, you can click the text tab on the settings bar. To change the default text, you can simply highlight the existing text (or delete it) and replace it with your new text.

To set the button background color, button text color, and border radius color, you can click the Colors tab to open the color picker. You can set the button background on the Bg sub-tab, the button text color on the Text sub-tab, and border color on the Border sub-tab. You can set the colors of both the normal and hover state. Simply click the icons on the left side to switch between states.

To set the button width, you can click the gear icon on the settings bar. You can also click the Align tab to set the alignment of the button.

You can play around with the Brizy editor to style up the form. Once done editing the page, you can click the arrow icon on the bottom-right corner and select Publish Page.

The bottom line

The Form element of Brizy allows you to add a form to the design you are working on. As we have covered above, the element supports 14 field types. The Form element is more than enough to create a simpler form such as a contact form, email opt-in form, file submission form, and other form types that involve the supported field types. If you have a dedicated form builder plugin such as Gravity Forms, Caldera Forms, and Ninja Forms, you can also add a form you created with those plugins via the Shortcode element of Brizy.