Contact Form 7

ska-theme includes compatibility with the popular Contact Form 7 plugin.

The default contact form will have styles out of the box:

The styles utilize the Button, Primary button, Form inputs, Label and Loading presets, as well as Tailwind configuration “warning”, “positive”, “negative” and “info” Theme palettes for styling notices.

To place a contact form on the page, use the Contact Form 7 block. To add Tailwind styles to the form, you can wrap the CF7 block in an Element block and add Tailwind classes that target form elements to that, for example:

[&_.wpcf7-submit]:mt-4

Disabling WPAUTOP

By default Contact Form 7 wraps the form elements in a lot of <p> elements and adds many <br> elements.

Adding the following filter to your child theme’s functions.php can change that:

add_filter('wpcf7_autop_or_not', '__return_false');

Without autop you can create very simplistic CF7 forms, such as:

<label class="half"> Name
    [text* your-name autocomplete:name] </label>

<label class="half"> E-mail
    [email* your-email autocomplete:email] </label>

<label> Title
    [text* your-subject] </label>

<label> Message
    [textarea your-message] </label>

[submit "Send"]

and render the form as a CSS grid:

grid grid-cols-1 sm:grid-cols-2 [&>:not(.half)]:col-span-full gap-4

Copy selector:

ska-blocks:{"skaBlocksSelectors":{"[&_.wpcf7-form]":{"skaBlocksGridColumn":{"v":{"$":{"@":""},"[&>:not(.half)]":{"@":"span-full"}}},"skaBlocksDisplay":{"v":{"$":{"@":"grid"}}},"skaBlocksGridTemplateColumns":{"v":{"$":{"@":"1"},"sm":{"@":"2"}}},"skaBlocksGap":{"v":{"$":{"@":"4"}}}}}}