If you want to provide your website visitors with an opportunity to get in touch with you or 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 customize contact forms, as well as collect the obtained data in a convenient way. 

To get general information about widgets, their usage, and customization, please check out our Widgets Overview article.

Editing the widget

To start editing the Form widget, click on it to call out its controls. You’ll see the horizontal control panel — the widget editing menu — with four controls:

  • Design
  • Layout
  • Settings
  • Templates

Let’s see what parameters you can tweak to define how your Form widget should appear visually and work.

Design

This control contains three main settings to customize the visual parameters of your Form: a border between the widget and other page components (i.e., a footer), a shadow between those components, and the background. 

Once the parameter’s switches are toggled on, additional tweaks will appear, allowing you to fine-tune the widget’s appearance. 

Extra settings for a border include:

  • Color
  • Size
  • Radius (rounding off the border’s corner radius)

Additional settings for the shadow are:

  • Blur
  • Distance
  • Angle
  • Color

Boxmode offers two types of background for your contact forms: color and image. To customize the background, press the Edit button.

To change color, select a color fill using a color picker.

Upload an image from your computer or Asset Library (the files you have already uploaded) to add it to the background.

Layout

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

Settings

This control allows for adjusting four parameters:

  • Manage forms
  • Fields
  • Button
  • Send data to

Manage form

Here you can add or delete fields of your contact form as required. To add a field to the form, click Add field. You will see a window with several field types: 

  • Name
  • Phone 
  • Email 
  • Text input
  • Text area (bigger than the text input field) 
  • Checkbox
  • A dropdown field to let users choose an item
  • A file attachment field

The field that you select will be added to the form. Your Boxmode forms may contain up to 20 fields.

Click on the ellipsis icon to call out the contextual menu (with Settings and Delete) and select 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.

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

Fields

Here you can customize the appearance of your contact form fields. The parameters include:

  • Fill color
  • Error color
  • Label color
  • Input text color
  • Description color
  • Font
  • Border

Button

These controls 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). 

Send data to

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.

You can also integrate MailChimp to receive data through their service. To do this, toggle the corresponding switch on and log in to your MailChimp account to complete the setup correctly.

Templates

By pressing this dropdown menu, you can select your preferred contact form design.

Now you know about all the ways you can customize the Form widget’s design and layout. It’s time to try these tips in practice.

Go to Editor