{"id":27,"date":"2025-09-26T08:50:48","date_gmt":"2025-09-26T08:50:48","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/contact-form-7\/"},"modified":"2025-09-27T07:54:29","modified_gmt":"2025-09-27T07:54:29","slug":"contact-form-7","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/contact-form-7\/","title":{"rendered":"Contact Form 7"},"content":{"rendered":"\n<p class=\"lead\">ska-theme includes compatibility with the popular <a href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\" target=\"_blank\" rel=\"noreferrer noopener\">Contact Form 7 plugin<\/a>.<\/p>\n\n\n\n<p>With the theme, the default CF7 contact form will have the following appearance out of the box:<\/p>\n\n\n\n<div class=\"mb-6 wp-block-ska-element\"><ska-cf7-placeholder class=\"wp-block-contact-form-7-contact-form-selector\" aria-hidden=\"true\">\n\t<div class=\"wpcf7\">\n\t\t<form\n\t\t\tclass=\"wpcf7-form\"\n\t\t\tnovalidate=\"novalidate\"\n\t\t\tx-data=\"{submitting: false, submitted: false}\"\n\t\t\t:class=\"{'submitting': submitting, 'unaccepted': submitted}\"\n\t\t>\n\t\t\t<label> Your name\n\t\t\t\t<span class=\"wpcf7-form-control-wrap\">\n\t\t\t\t\t<input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" autocomplete=\"name\" aria-invalid=\"false\" value=\"\" type=\"text\">\n\t\t\t\t<\/span>\n\t\t\t<\/label>\n\t\t\t<label> Your email\n\t\t\t\t<span class=\"wpcf7-form-control-wrap\">\n\t\t\t\t\t<input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-text wpcf7-validates-as-email\" autocomplete=\"email\" aria-invalid=\"false\" value=\"\" type=\"email\">\n\t\t\t\t<\/span>\n\t\t\t<\/label>\n\t\t\t<label> Subject\n\t\t\t\t<span class=\"wpcf7-form-control-wrap\">\n\t\t\t\t\t<input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\">\n\t\t\t\t<\/span>\n\t\t\t<\/label>\n\t\t\t<label> Your message <span class=\"required\" aria-hidden=\"true\">*<\/span>\n\t\t\t\t<span class=\"wpcf7-form-control-wrap\">\n\t\t\t\t\t<textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-required=\"true\" aria-invalid=\"false\"><\/textarea>\n\t\t\t\t\t<span class=\"wpcf7-not-valid-tip\" aria-hidden=\"true\" x-cloak x-show=\"submitted\">Please fill out this field.<\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/label>\n\t\t\t<input\n\t\t\t\tclass=\"wpcf7-form-control wpcf7-submit has-spinner\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tvalue=\"Submit\"\n\t\t\t\tx-on:click.prevent=\"submitting = true; setTimeout(() => { submitting = false; submitted = true }, 2000)\"\n\t\t\t>\n\t\t\t<span class=\"wpcf7-spinner\"><\/span>\n\t\t\t<div class=\"wpcf7-response-output\" x-cloak x-show=\"submitted\">This is a non-functional placeholder form.<\/div>\n\t\t<\/form>\n\t<\/div>\n<\/ska-cf7-placeholder><\/div>\n\n\n\n<p>The styles utilize the Button, Primary button, Form inputs, Label and Loading <a href=\"https:\/\/ska-blocks.com\/docs\/ska-blocks\/presets\/\" data-type=\"post\" data-id=\"327\">presets<\/a>, as well as <a href=\"https:\/\/ska-blocks.com\/docs\/ska-blocks\/configuring-tailwind\/\" data-type=\"post\" data-id=\"317\">Tailwind configuration<\/a> &#8220;warning&#8221;, &#8220;positive&#8221;, &#8220;negative&#8221; and &#8220;info&#8221; Theme palettes for styling notices.<\/p>\n\n\n\n<div class=\"flex flex-row gap-2.5 items-start px-4 py-3 mb-(--spacing-prose) text-sm\/snug text-info-text bg-info-background rounded border border-info-border wp-block-ska-element\">\n<div role=\"figure\" aria-hidden=\"true\" class=\"min-w-6 h-auto text-current wp-block-ska-image image\"><svg   viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M11.25 11.25L11.2915 11.2293C11.8646 10.9427 12.5099 11.4603 12.3545 12.082L11.6455 14.918C11.4901 15.5397 12.1354 16.0573 12.7085 15.7707L12.75 15.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 8.25H12.0075V8.2575H12V8.25Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n<\/svg><\/div>\n\n\n\n<p class=\"mb-0!\">If you haven&#8217;t gotten around to installing the Contact Form 7 plugin yet, the theme will render a <strong>placeholder form<\/strong> for the <code>contact-form-7\/contact-form-selector<\/code> block &#8211; this allows theme demos and patterns to include a visual contact form without needing the plugin installed.<\/p>\n<\/div>\n\n\n\n<p>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:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code\"><code class=\"\">&#91;&amp;_.wpcf7-submit]:mt-4<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">WPAUTOP<\/h2>\n\n\n\n<p>By default Contact Form 7 wraps the form elements in a lot of <code>&lt;p&gt;<\/code> elements and adds many <code>&lt;br&gt;<\/code> elements.<\/p>\n\n\n\n<p>ska-theme adds the following filter to that:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">add_filter('wpcf7_autop_or_not', '__return_false');<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>Without autop you can create very simplistic CF7 forms, such as:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code markup language-markup\"><code class=\"language-markup\">&lt;label class=\"half\"> Name\n    &#91;text* your-name autocomplete:name] &lt;\/label>\n\n&lt;label class=\"half\"> E-mail\n    &#91;email* your-email autocomplete:email] &lt;\/label>\n\n&lt;label> Title\n    &#91;text* your-subject] &lt;\/label>\n\n&lt;label> Message\n    &#91;textarea your-message] &lt;\/label>\n\n&#91;submit \"Send\"]<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>and render the form as a CSS grid:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code\"><code class=\"\">grid grid-cols-1 sm:grid-cols-2 &#91;&amp;>:not(.half)]:col-span-full gap-4<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p class=\"text-xs\">Copy <a href=\"https:\/\/ska-blocks.com\/docs\/ska-blocks\/selectors\/\" data-type=\"post\" data-id=\"341\">selector<\/a>:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code json language-json\"><code class=\"language-json\">ska-blocks:{\"skaBlocksSelectors\":{\"&#91;&amp;_.wpcf7-form]\":{\"skaBlocksGridColumn\":{\"v\":{\"$\":{\"@\":\"\"},\"&#91;&amp;>:not(.half)]\":{\"@\":\"span-full\"}}},\"skaBlocksDisplay\":{\"v\":{\"$\":{\"@\":\"grid\"}}},\"skaBlocksGridTemplateColumns\":{\"v\":{\"$\":{\"@\":\"1\"},\"sm\":{\"@\":\"2\"}}},\"skaBlocksGap\":{\"v\":{\"$\":{\"@\":\"4\"}}}}}}<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>To disable this functionality you can add a filter to your child theme&#8217;s <code>functions.php<\/code> to turn it back on:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">add_filter('wpcf7_autop_or_not', '__return_true', 15);<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>ska-theme includes compatibility with the popular Contact Form 7 plugin. With the theme, the default CF7 contact form will have the following appearance out of the box: The styles utilize the Button, Primary button, Form inputs, Label and Loading presets, as well as Tailwind configuration &#8220;warning&#8221;, &#8220;positive&#8221;, &#8220;negative&#8221; and &#8220;info&#8221; Theme palettes for styling notices.&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":7,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":317,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/27\/revisions\/317"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}