Contact Form Block
Embeds a Contact Form 7 form with full visual customization over inputs, labels, buttons, checkboxes, radios, selects, and field layout. Form fields are defined in CF7 — this block controls how they look.
CONTACT FORM
First Name
John
Last Name
Doe
john@example.com
Message
Your message…
Send Message
Dynamic block
Dynamic block — rendered by render.php on each page load. The save() function returns null. Form markup is generated server-side from the selected Contact Form 7 form.
Requires Contact Form 7 plugin
This block requires the Contact Form 7 plugin to be installed and active. Form fields, validation, and email delivery are managed entirely by CF7 — this block provides the visual layer.
When to use this block
- Contact forms, enquiry forms, feedback forms
- Newsletter sign-up forms with styled inputs
- Multi-field forms with custom grid layout and field widths
- Forms with checkboxes, radios, or file uploads that need branded styling
Form Selection
Pick which Contact Form 7 form to embed. The dropdown lists all published CF7 forms by title.
Form
Sidebar Panel
Form ID
HOW IT WORKS
The formId attribute stores the CF7 post ID. At render time, render.php calls CF7’s shortcode to output the form HTML, then applies your visual customizations via inline styles and CSS classes.
No form selected? The block shows a placeholder prompt in the editor.
Input Styling
Control the look of text inputs, email fields, number fields, and textareas. All color values are hex.
Input Styling
Sidebar Panel
Background
Text Color
Placeholder
Border Color
Focus Color
Border Radius
px
Padding
px
Font Size
px
TEXTAREA EXTRAS
Textareas share all input styles plus two additional controls: textareaHeight (px) and textareaBorderRadius (px, overrides the shared input radius).
PREVIEW
Default state
Focused state
Labels
Style the <label> elements generated by Contact Form 7.
Labels
Sidebar Panel
Color
Font Size
px
Font Weight
Margin Bottom
px
LABEL WEIGHTS
Normal (400)
Medium (500)
Semi-Bold (600)
Bold (700)
Margin bottom sets the gap between the label text and the input below it.
Submit Button
Full control over the submit button appearance including hover states, border, radius, and width mode.
Submit Button
Sidebar Panel
Background
Hover Bg
Text Color
Hover Text
Border
Border Radius
px
Padding
px
Font Size
px
Font Weight
Full Width
TRY HOVERING
Auto width
Full width
Send Message
Outline style
Checkbox & Radio
Both checkboxes and radios support three display modes. Each mode has its own set of styling controls.
Standard
Option A
Option B
Custom checkmark icon, size, and colors. Works for both checkbox and radio.
Chip
Pill-style toggles. Selected chip gets active background and text colors.
Card
Starter
For individuals
Pro
For teams
Radio only. Supports image, heading, and body text with column layout.
Display mode notes
- Standard checkboxes: custom checkmark icon URL, icon size, checked/unchecked background and border colors
- Chip mode: pill-shaped toggles with active/inactive background, text, and border colors
- Card mode (radio only): columns, gap, font sizes/colors, image + heading + body alignment
Field Layout
Control field ordering, individual widths, and spacing between fields using a CSS grid layout.
Field Layout
Sidebar Panel
Gap X
px
Gap Y
px
Field Order
JSON array
Field Widths
JSON object
GRID EXAMPLE
First Name (50%)
Last Name (50%)
Email (100%)
Message (100%)
fieldOrder controls the sequence. fieldWidths sets each field’s percentage width within the grid row.
All Available Controls
Form Selection CF7 form ID, dependency
formId: the Contact Form 7 post ID. Selected via a dropdown that lists all published CF7 forms. Required — without it the block renders a placeholder.
Input & Textarea Background, text, border, focus, radius, padding, font
inputBg, inputTextColor, inputPlaceholderColor, inputBorderColor, inputFocusColor, inputBorderRadius (px), inputPadding (px), inputFontSize (px). Textarea adds textareaHeight (px) and textareaRadius (px, overrides shared radius).
Labels & Section Labels Color, size, weight, margin, transform
Field labels: labelColor, labelFontSize, labelFontWeight, labelMarginBottom. Section labels: sectionLabelColor, sectionLabelFontSize, sectionLabelFontWeight, sectionLabelSpacing (letter-spacing), sectionLabelTransform (text-transform, e.g. uppercase).
Submit Button Colors, hover, border, radius, padding, font, width
submitBg/submitHoverBg, submitTextColor/submitHoverTextColor, submitBorder, submitBorderRadius (px), submitPadding (px), submitFontSize (px), submitFontWeight. Width: auto (inline) or full-width (100%).
Checkbox & Radio Standard, chip, card modes + all sub-controls
Checkbox (3 modes): Standard — custom checkmark icon URL, icon size, checked/unchecked bg, checked/unchecked border. Chip — pill toggles with active/inactive bg, text, border. Card — radio only.
Radio (3 modes): Standard — same as checkbox standard. Chip — same as checkbox chip. Card — columns, gap, font sizes, active/inactive colors, image + heading + body layout and alignment.
Select & File Upload Dropdown arrow, menu, options + upload button
Select dropdown: selectArrowColor, selectMenuBg, selectMenuBorderColor, selectMenuBorderRadius, selectOptionColor, selectOptionHoverColor.
File upload: styled file-upload button inherits submit button styling by default; override with dedicated file upload controls.
Layout & Feedback Field order, widths, gaps, error/success colors
gapX/gapY (px): horizontal and vertical spacing between fields. fieldOrder: JSON array defining field sequence. fieldWidths: JSON object mapping field names to percentage widths. errorColor/successColor: hex values for validation feedback messages.