Contact Forms Widget

Explore the Contact Form widget in detail

If you want to provide your website visitors with an opportunity to get in touch with you or to leave feedback, deploying a contact form is essential. Contact forms are also your most reliable lead generation tool. 

That is why Boxmode has developed a dedicated widget that allows you to create and flexibly customize contact forms, as well as collect the obtained data in a convenient way. 

Adding a Contact Form

To add the Contact Form widget to your page:

  • Click the “+” icon in the left sidebar when in the editor;
  • Choose “Form” and pick a preferred widget template;
  • To add the widget, simply drag it to the canvas (the widget selection menu will automatically disappear) and drop it wherever you need it (the drop area will be highlighted).

Note: To cancel the process, press “Esc” on your keyboard while dragging the widget.

Adding contact form

Moving the Widget

To move the widget to a different area of the page, click on the widget to call out its controls. Click and hold the “crossed arrows” icon and drag the widget to any other location on the page. The drop area will be highlighted on the canvas.

Moving widget

Resizing the Widget

To resize the widget, simply highlight it and drag one of its anchor points up/down or left/right until you get the desired result. You can also adjust the widget’s padding in the similar way. Hover your cursor over the area around the anchor point (it will become highlighted as a half circle) and drag it up/down or left/right, accordingly.

Resizing widget

Editing the Widget

Click on the widget to highlight it. The widget controls will appear. Hit the “Edit” button to start editing the widget.

Editing widget

The editing menu will appear. It consists of several tabs, allowing you to adjust forms to your specific needs. 

Manage forms

Here you can add or delete fields of your contact form as required. Your Boxmode forms may contain up to 20 fields!

To add a field to the form, click “Add field.”

You will see a drop-down menu in which you can select the type of field you want to add. 

The selected field will be added to the form and will appear in the list.

Manage forms

When hovering your cursor over the field, the “Settings” icon will appear. 

Checkbox

Click it to call out the contextual menu and select the “Settings” option. 

Settings

The field editing menu will show up, allowing you to customize the fields of your form easily. Different types of fields may have different settings, but most of them include Field label, Description, Placeholder (hint text), Required field toggle switch, etc.

Manage form

You can change the sequence of your fields simply by dragging them across the list to the required position.

Templates

In this tab, you can select your preferred contact form design.

Templates

Fields

Here you can customize the appearance of your contact form fields. The parameters include field color, border style and size, fonts, text color, etc.

Fields

Design

In this tab, you can customize the visual parameters of your Contact Form, including Border, Shadow, and Background. Once the parameter switches are toggled on, additional tweaks will appear, allowing you to fine-tune the widget’s appearance. 

Design

You can set different backgrounds for your contact forms. To change the field background, click the “Edit” button.

Edit

Boxmode offers two types of background for your contact forms:

  • Color: Select a color fill using a color picker.
Color
  • Image: Upload an image from your computer or library (the assets you have already uploaded).
Image

Layout

Here you can control the layout settings of your contact form, including content alignment, the spacing between the fields, and the widget padding. 

Layout

Button

The controls available in this tab allow you to customize the button that appears in your contact form. You can edit both button design and button text, as well as select the action that will take place once the button is clicked (show text, jump to a URL, open a specific page of the website). 

Button

Send data

Here you can set the email address to which all the data obtained through your contact forms will be sent. To do this, simply enter your email address in the corresponding field. You can check if it is correct by hitting the “Send test email” button. 

Besides, you can integrate MailChimp to receive data through their service. For this, toggle the corresponding switch on and log in to your MailChimp account.

Send data

Deleting the Widget

To delete a contact form from the canvas, click on the widget to call out its controls and hit the “Trash bin” icon.

Try these tips on practice!

This form is for reporting instances of copyright infringement only. If you believe that your own copyrighted work is accessible on Boxmode in violation of your copyright, please fill in the following information, carefully read the statement below, and submit the form. To submit a valid Notification of Alleged Copyright Infringement, the information you provide...