Contact Form 7 Customizer lets you bring any Contact Form 7 (CF7) form into the Divi Builder and style it with pixel‑perfect control—no CSS required. Select a CF7 form, then customize labels, inputs, placeholders, radios/checkboxes, file fields, selects, and the submit button. You can also style validation states (error/success), spacing, borders, shadows, filters, transforms, and animations.
Quick Start
Add the Module
Open Divi Builder → Add Module → Contact Form 7 Customizer.
Select Form (Content tab → Content)
From Select Form, choose one of your existing CF7 forms (e.g., “Contact form 1”).
Style the Form (Design tab)
Use From Fields (Labels, Inputs/Textareas, Placeholders, Radios/Checkboxes, File, Select Field, Submit Button) for element‑level styling.
Configure Error Message, Validation Error, and Validation Success.
Adjust Size, Spacing, Border, Box Shadow, Filters, Transform, and Animation.
Publish & Test
Submit test entries to verify validation messages, field focus/hover states, and responsiveness on mobile.
Content Tab
Content
Select Form: Pick a CF7 form from the dropdown. The module renders the selected form inside the Divi layout.
Background
Set a background color/gradient/image for the module container surrounding the form.
Admin Label
Rename the module for easy identification inside Divi (e.g., “CF7 — Support Form”).
Design Tab
From Fields
Style every element of the form.
Label Text
Typography: Font family, weight, style, size, letter spacing, line height.
Color: Choose label color; ensure contrast with background.
Spacing: Margin/padding around labels for clear hierarchy.
Input / Textarea / Select
Controls for text inputs (text, email, url, etc.), textareas, and select dropdowns.
Typography: Font family/size/weight.
Colors: Text, background, and placeholder colors.
Borders: Style (solid/dashed), width, color, radius.
States: Focus/hover color and border accent.
Spacing: Inner padding for comfortable entry; outer margins for layout.
Placeholder Text
Typography & Color for placeholder copy in inputs/textareas.
Use medium contrast (slightly muted) so users can distinguish placeholder vs. typed text.
Radio / Checkbox
Size & Color: Control tick/indicator size and colors.
Label Alignment: Adjust spacing between control and label text.
Hover/Focus: Provide subtle feedback.
File Field
Button/Text Styling: Style the upload button and helper text.
Border & Background: Match other inputs.
Spacing: Ensure enough room for long filenames.
Select Field
Dropdown Styling: Text color, background, border.
Arrow/Icon: Color and size (if exposed).
Focus: Same accent rules as inputs.
Submit Button
Typography: Size, weight, letter spacing.
Background: Solid or gradient; ensure WCAG contrast with text.
Border & Radius: Match your design language.
Hover/Active: Color shift + micro shadow or transform.
Spacing: Padding and margin for a strong CTA.
Error Message
Styles for generic error notices that CF7 shows (e.g., “There was an error trying to send your message”).
Typography & Color: Use attention color (e.g., #D93025).
Background: Optional subtle tint to stand out.
Spacing: Margin above/below to avoid crowding.
Validation Error
Styles for per‑field validation errors (e.g., “The field is required”).
Field Border Color: Highlight invalid fields (e.g., red border).
Helper Text: Size/color distinct but readable.
Icon (if used): Small error icon with accessible color.
Validation Success
Styles for success confirmation (e.g., “Your message has been sent”)
Color: Success green (e.g., #28A745).
Background: Optional soft success tint.
Spacing/Animation: Fade in smoothly.
Size
Width / Max Width / Height / Max Height
Use 100% width for mobile; constrained width (e.g., 640–800px) on desktop for comfortable reading.
Center align the container in single‑column layouts.
Spacing
Margin (outer) and Padding (inner) for the module and inner fields.
Maintain vertical rhythm: 16–24px between fields.
Border
Module‑level border: width, style, color, radius.
Consider subtle radius (8–12px) and a light border for card‑like forms.
Box Shadow
Add depth: rgba(0,0,0,0.12) with blur 12–16px, spread 0.
Slightly stronger on focus for accessibility feedback.
Filters
Use minimal brightness/contrast/saturation on backgrounds; avoid affecting readability of text.
Transform
Micro‑interactions (hover/focus): scale(1.01–1.02), translateY(-1–2px) for the submit button.
Animation
Entrance animations: Fade/slide with 250–400ms duration.
Avoid heavy animations on inputs; keep the interface responsive.