Contact form 7 is a freemium plugin available for WordPress CMS. The Divi contact form 7 styler module helps you embellish the form created by contact form 7 without knowing or implementing any CSS code. In addition, this module contains several exclusive features to decorate every portion of the contact form. Unlike any other Divi module, these features are divided into three groups.
+ Content Tab
+ Design Tab
+ Advanced Tab
Note you need to install the free version of contact form 7 before using our module.
Content Tab
The content tab of the Divi contact form 7 styler module possesses all the imperative & initial features like the content, input text area, dropdown & button background. All these features included in the content tab are completely responsive and easy to customize. Let’s get to know each feature more closely.
Content
Here you need to select a particular contact form among others that you would like to decorate. This contact form should be created with Contact Form 7 plugin. If it’s empty, please add a form before you style it.
Input & textarea Background
Under the input & text area background feature, you can select the background for your input text area. You can also use a gradient color or a background image. The background Image does have options like selecting image size, position, and repeat.
Dropdown Box Background
Every single stylish option of the Input text area feature is available for the Dropdown box background.
Button Background
The next option is the button background. Again, you can use color, gradient, and image for your button background.
Background
This background option is for the whole module. Here you also can use color, gradient, and image for your background.
Admin Label
Contact form 7 styler can be given a custom label so that it does not need to only display as “Module-Type” on your page builder. You can use any name that is convenient for you.
Design Tab
The design tab brings a range of features to elaborate the beauty of the contact form imported in the content tab. The label text, input & text area, dropdown, submit button are the most reputed features. Now the time is to see what we got in the design tab with compressive demonstration.
Label Text
Here you can style your label text. It has all the necessary text editing options to make your label eye-catching. The label settings have font design options, including text alignment, style, color, and sizing. Also, you can fix a suitable letter-spacing & line-height for the label text.
Input & textarea Text
Those are the style for your placeholder text and your input text. This text style will apply to the text you will be typing to fill the form and placeholder. It has the same styling options like alignment, color, style, sizing, letter-spacing & line-height as any other text. Even more, you get the privilege to change the border width, color, and style for the input & text area.
Dropdown
Here is an option to customize dropdown options for contact form 7. Including regular text customizer, you will find other features like – Dropdown alignment option, Background colors (Solid, gradient, and image), Borders, Rounded corners, etc.
Submit Button
Styling the button according to the design is an important part. Keeping that in mind, the contact form 7 styler module does have all the necessary elements to design beautiful buttons. You can align the button, style the text with all the text styling options. You can also have rounded corners, border styles, and many more.
Spacing
Spacing is one of the most crucial features of the contact form 7 styler. Default Divi modules come with two spacing areas. However, DiviFlash has broken this down into the individual elements in the module. Now, you can utilize margin & padding to provide a balanced gap around the dropdown, Input text field, and submit button. Also, you get the common margin and padding.
Advanced Tab
The advanced tab of the Contact form 7 styler module brings the next level performance opportunity for designers. A designer can have multiple facilities to control the module visibility, transition, position, and scroll effect. Moreover, developers can use CSS ID & Custom CSS feature for further customization under the advanced tab. Here is the list of the features you got.
CSS ID & Classes
CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or styling the module.
CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.
Custom CSS
There are three custom CSS areas in the Contact Form 7 Styler Module; you can target and set your custom CSS code there. A sign “?” in each CSS input box will tell you which class has been targeted.
Visibility
The advanced setting’s visibility option allows designers to hide the Contact Form 7 Styler Module for a particular device.
Transitions
You have features like Transition duration, Delay, and Curve Speed for better customization under the transition setting.
Position
Here you have complete control over the relative, absolute, and fixed positions. This option is also available in every Divi module and works almost the same for all.
Scroll Effects
If you wish to give a scroll effect to your Contact Form 7 Styler Module, here you have the opportunity to achieve it with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, enable vertical motion, and motion effect trigger functions.
NOTE:
Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.
