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.
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.
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.
Editing the Widget
Click on the widget to highlight it. The widget controls will appear. Hit the “Edit” button to start editing the widget.
The editing menu will appear. It consists of several tabs, allowing you to adjust forms to your specific needs.
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.
When hovering your cursor over the field, the “Settings” icon will appear.
Click it to call out the contextual menu and select the “Settings” option.
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.
In this tab, you can select your preferred contact form design.
Here you can customize the appearance of your contact form fields. The parameters include field color, border style and size, fonts, text color, etc.
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.
You can set different backgrounds for your contact forms. To change the field background, click the “Edit” button.
Boxmode offers two types of background for your contact forms:
- Color: Select a color fill using a color picker.
- Image: Upload an image from your computer or library (the assets you have already uploaded).
Here you can control the layout settings of your contact form, including content alignment, the spacing between the fields, and the widget padding.
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).
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.
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!