DiviFlash Contact Form 7 Styler module lets you style and customize the appearance of your Contact Form 7 forms.
Note: Before using this module, make sure the Contact Form 7 plugin is installed and activated.
Let’s see the settings in brief and how to make better use of it —
Content Tab
This tab contains the settings to select a Contact Form 7 form and customize the backgrounds of input fields, dropdown boxes, and buttons.
Content
Contact Forms: Select the form you want to style. (To style a form, make sure you have created at least one form using the Contact Form 7 plugin.)
Input & Textarea Background: Add a background color, gradient, or an image to all the input fields in the form.
Dropdown Box Background: Add a background color, gradient, or image to the dropboxes in the contact form.
Button Background: Add a background color, gradient, or an image to the submit button of the form.
Background: Add a background color, gradient, image, video, pattern, or mask to the module.
Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)
Design Tab
This tab lets you customize the visual appearance of the Contact Form 7 form.
Label Text: Customize the typography of all form labels, including font, size, color, and spacing.
Input and Textarea Text: Customize the typography of the text entered inside input and textarea fields.
Dropdown: Customize the typography of the dropdown menu text.
Submit Button
- Alignment: Change the horizontal placement of the submit button within the form.
The remaining options allow you to customize the submit button typography and border.
Input Field Width
- Input Text Width: Adjust the width of the text input fields in the form.
- Input Email Width: Adjust the width of the email input fields.
- Input Textarea Width: Adjust the width of the description field.
- Input Dropdown Width: Adjust the width of the dropdown field.
Spacing: Adjust the margins and padding of the module container.
Border: Customize the border using radius, style, width, and color settings.
Box Shadow: Add shadow effects to the module container.
Transform: Adjust the scale, position, rotation, and size of the module.
Animation: Add reveal animation effects and control the animation style, delay, duration, and more.
Advanced Tab
This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]
