Andrew Dorokhov
The convenient part of Contact Form 7 is that we can copy the markup of the form straight from the layout, paste it into the plugin settings, and replace the inputs with the plugin tags. The design stays exactly as it was designed.
An example
The form tags:
[text* your-name placeholder "Name"]
[email* your-email placeholder "Email"]
[textarea your-message placeholder "Message"]
[submit class:button "Send us a message"]
The same fields wrapped in the original markup:
<label> Your Name (required)
[text* your-name] </label>
<label> Your Email (required)
[email* your-email] </label>
<label> Subject
[text your-subject] </label>
<label> Your Message
[textarea your-message] </label>
[submit "Send"]
An asterisk after the tag name (text*) makes the field required.
Important
Don’t add the form tags to the markup — the plugin adds them itself.
Filters
Contact Form 7 wraps every field in a span and runs the content through wpautop, which usually breaks
a carefully built layout. Both can be disabled from functions.php:
add_filter( 'wpcf7_autop_or_not', '__return_false' );
add_filter( 'wpcf7_form_elements', function( $content ) {
$content = preg_replace( '/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content );
return $content;
} );
Embedding a form into a template
<?= do_shortcode( '[contact-form-7 id="93" title="Contact form"]' ); ?>