Styled Contact Form
A Contact Form 7 form restyled with modern fields, a solid button, and colors that match your page, in Filled, Outline, or Underline styles.
Styled Contact Form shows one of your Contact Form 7 forms with a clean, modern look: roomy fields, labels above them, a solid button, and validation messages that match. Pick a field style, set the size and corner roundness, and choose colors, or leave the colors empty and the form picks them up from the text around it and your theme's accent color, so it suits light and dark backgrounds alike.
Only the form inside the element is restyled. Every other Contact Form 7 form on your site keeps its usual look.
This element needs the Contact Form 7 plugin. See Install plugins, then build your form under ContactContact Forms. Until a form is chosen, editors see a short hint in place of the form. Visitors see nothing.
Add it
In WPBakery, click Add Element and pick Styled Contact Form from the Highend Shortcodes category. Or use the shortcode. See Shortcode.
Settings
formThe Contact Form 7 form to show, picked by its title. Make and edit forms under ContactContact Forms. The element remembers the form by an identifier that survives a demo import or a site move, so it keeps finding the right form.
FilledstyleOptions: Filled (a soft background), Outline (a thin border), Underline (a line under each field).
Above the fieldslabelsOptions: Above the fields, Hidden, placeholders only. Hidden labels are still read out by screen readers. Give the fields placeholders in the form, for example [text* your-name placeholder "Your name"].
Fit the textbutton_widthOptions: Fit the text, Full width.
16font_sizeIn pixels, for the fields and the button. Labels are a little smaller.
12radiusIn pixels, for the fields and the button. Enter 0 for square corners. Underlined fields are always square.
Roundcorner_shapeHow rounded corners are drawn. Options: Round, Squircle, Soft squircle, Bevel (cut corners), Scoop (inward curve), Notch (inward square). Browsers without corner shape support show normal rounded corners.
Colors tab
Every color is optional. Colors left empty are worked out from the text color around the form and your theme's accent color.
field_bgLeave empty for a soft tint of the text color (Filled) or none (Outline and Underline).
field_borderThe border (Outline) or the line (Underline). Leave empty for a light tint of the text color.
text_colorWhat visitors type, and the labels. Leave empty for the color of the text around the form.
label_colorLeave empty to use the text color.
accentThe ring around the field being filled in, checkboxes, and the sent message. Leave empty for the theme's accent color.
button_bgLeave empty to use the accent color.
button_textLeave empty for white or near black, whichever reads better on the button. This needs a browser with CSS relative color support.
Common settings
Styled Contact Form also has Entrance Animation, Entrance Delay, and Extra class name fields. See the Elements overview.
Put fields side by side
Fields go under each other by default. To put two or three side by side, for example a name next to a phone number, wrap them in <div class="hb-form-row"> and </div> in the form's template. The fields share the row's width equally, and stack again on phones (screens under 690 pixels wide).
Edit the form under ContactContact Forms, open its Form tab, and add the wrappers around the fields you want to pair. This is a shortened version of the booking form from the Hairdresser demo:
<div class="hb-form-row">
<label>Your name
[text* your-name autocomplete:name placeholder "Your name"]</label>
<label>Phone
[tel* your-phone autocomplete:tel placeholder "(212) 555-0100"]</label>
</div>
<label>Email
[email* your-email autocomplete:email placeholder "you@example.com"]</label>
<div class="hb-form-row">
<label>Service
[select* service first_as_label "Choose a service" "Cut & blow-dry" "Balayage" "Consultation only"]</label>
<label>Stylist
[select stylist "No preference" "Maren Holt" "Ivy Marsh"]</label>
</div>
<div class="hb-form-row">
<label>Preferred date
[date* preferred-date]</label>
<label>Preferred time
[select preferred-time "Any time" "Morning" "Afternoon" "Evening"]</label>
</div>
<label>Anything we should know?
[textarea your-notes placeholder "Your hair, the look you want, photos you saved"]</label>
[submit "Request appointment"]Put each field in its own <label> with its text before the field tag, as above, and the label sits above the field.
Shortcode
[hb_contact_form form="a1b2c3d" style="outline" labels="hidden" button_width="full" radius="14" accent="#c8553d"]In WPBakery, the Form dropdown fills in form for you. By hand, use the id from the form's own Contact Form 7 shortcode (shown on its edit screen).