Add Contact Form 7 via the Elementor dragging the widget and selecting the previously created form you want to display on a page and customize the style of each field type according to your needs and wishes. Specify color, background, typography, and other things for different states of fields like hover, or focus.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content tab
On the Content tab of the contact form widget, you can manage the basic settings of the form such as title, description, label and error display.
General
- Select form – select the contact form you want to add to the page. To create the form install Contact Form 7 plugin and then go to Contact>Add new.
- Show title – the toggle to enable/disable the title display. When the setting is enabled, additional options appear for text entering and alignment.
- Show description – the toggle to enable/disable the description display. When the setting is enabled, additional options appear for text entering and alignment.
Form
- Form alignment – manage the current block alignment (left, center, right).
- Show labels – a toggle to enable/disable the field label display.
Error
Show validation errors – a toggle to enable/disable the validation error display.
Style tab
On the Contact form widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Title/Description/Label/Response message/Error message
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The text style settings for different states.
- Color – specify the text font color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Input/Textarea/Select/Button
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Height – specify the height of the current element using the slider in different units(px, %)
- Width – specify the width of the current element using the slider in different units(px, %)
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The text style settings for different states.
- Color – specify the text font color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Radio button/Checkbox
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Scale – specify the scale of the current element using the slider.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER/checked
The field style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
