Tags: Horizontal
Contact Form 7 Code
CSS (style.css)
PHP (how to add)
add_filter( 'wpcf7_autop_or_not', '__return_false' );
JavaScript (how to add)
Contact Form 7 Code
CSS (style.css)
PHP (how to add)
add_filter( 'wpcf7_autop_or_not', '__return_false' );
JavaScript (how to add)
Contact Form 7 Code
CSS (style.css)
PHP (how to add)
add_filter( 'wpcf7_autop_or_not', '__return_false' );
JavaScript (how to add)
Contact Form 7 Code
<div class="cu-form cu-md-form"> <div class="cu-grid cu-grid-9"> <div class="cu-col-span-2"> <label class="cu-label"> <span class="cu-label-text">Name</span> [text* full-name] </label> </div> <div class="cu-col-span-2"> <label class="cu-label"> <span class="cu-label-text">Email</span> [text* email] </label> </div> <div class="cu-col-span-2"> <label class="cu-label"> <span class="cu-label-text">Phone</span> [tel* phone] </label> </div> <div class="cu-col-span-2"> <label class="cu-label"> <span class="cu-label-text">Message</span> [text* message] </label> </div> <div class="cu-col-span-1"> [submit class:c6-submit placeholder "Submit"] </div> </div> </div>
CSS (style.css)
/* Start: cf7ui general form css */ .cu-form, .cu-form * { box-sizing: border-box; } .cu-grid { display: grid; grid-gap: 24px; } .cu-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cu-grid-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .cu-col-span-full { grid-column: 1/-1; } .cu-form label { display: block; font-size: 14px; font-weight: 500; position: relative; } .cu-form .wpcf7-form-control-wrap { display: inline-block; } .cu-form .wpcf7-form-control-wrap, .cu-form .wpcf7-form-control:not(.wpcf7-submit) { width: 100%; } .cu-form input[type="text"], .cu-form input[type="email"], .cu-form input[type="tel"], .cu-form textarea, .cu-form select { background-color: #f5f5f5; border: none; border-bottom: 1px solid #898989; border-radius: 4px 4px 0 0; padding: 20px 16px 6px; } .cu-form input[type="text"]:focus, .cu-form input[type="email"]:focus, .cu-form input[type="tel"]:focus, .cu-form textarea:focus, .cu-form select:focus { outline: none; border-color: #6200ee; } .cu-form .wpcf7-not-valid-tip { margin-top: 2px; } .cu-form .wpcf7-spinner { display: none; } .cu-form input[type="submit"] { background-color: #1d2fd8; order: 2; padding: 6px 16px; width: 100%; } .cu-form input[type="submit"]:hover, .cu-form input[type="submit"]:focus { background-color: #1928ba; } .cu-form .submitting input.c6-submit { display: none; } .cu-form .submitting .wpcf7-spinner { display: inline-block; } .cu-form ~ div.wpcf7-response-output { border-radius: 8px; margin: 20px 0 0; } @media (min-width: 768px) { .cu-col-span-1 { grid-column: span 1/span 1; } .cu-col-span-2 { grid-column: span 2/span 2; } } /* End: cf7ui general form css */ /* Start: cf7ui material design filled form css */ .cu-md-form .cu-label-text { color: #626262; font-size: 18px; font-weight: 400; position: absolute; left: 15px; top: 14px; z-index: 2; transition: all 150ms ease-in-out; will-change: transform; } .cu-md-form input[type="text"], .cu-md-form input[type="email"], .cu-md-form input[type="tel"], .cu-md-form textarea { font-size: 16px; } .cu-md-form input[type="text"]:hover, .cu-md-form input[type="email"]:hover, .cu-md-form input[type="tel"]:hover, .cu-md-form textarea:hover { background-color: #ececec; } .cu-md-form .cu-label.is-active .cu-label-text, .cu-md-form .cu-label:focus-within .cu-label-text { color: rgba(0, 0, 0, 0.6); font-size: 13px; top: 3px; } .cu-md-form .cu-label:focus-within .cu-label-text { color: #6200ee; } .cu-md-form .cu-label:focus-within input[type="text"], .cu-md-form .cu-label:focus-within input[type="email"], .cu-md-form .cu-label:focus-within input[type="tel"], .cu-md-form .cu-label:focus-within textarea { background-color: #dcdcdc; border-bottom-width: 2px; } .cu-md-form input[type="submit"] { border-radius: 4px; box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%); background-color: #6200ee; font-size: 15px; font-weight: 600; letter-spacing: 1px; padding: 13px 15px; text-transform: uppercase; } .cu-md-form .wpcf7-not-valid-tip { margin-left: 15px; }
PHP (how to add)
add_filter( 'wpcf7_autop_or_not', '__return_false' );
JavaScript (how to add)
Contact Form 7 Code
<div class="cu-form cu-md-outline"> <div class="cu-grid cu-grid-9"> <div class="cu-col-span-2"> <label class="cu-label"> <span class="cu-label-text">Name</span> [text* name] </label> </div> <div class="cu-col-span-2"> <label class="cu-label"> <span class="cu-label-text">Email</span> [text* email] </label> </div> <div class="cu-col-span-2"> <label class="cu-label"> <span class="cu-label-text">Phone</span> [text* phone] </label> </div> <div class="cu-col-span-2"> <label class="cu-label"> <span class="cu-label-text">Message</span> [textarea* message x1] </label> </div> <div class="cu-col-span-1 cu-footer"> [submit "Submit"] </div> </div> </div>
CSS (style.css)
.cu-form, .cu-form * { box-sizing: border-box; } .cu-grid { display: grid; grid-gap: 24px; } .cu-grid-9 { display: grid; grid-gap: 24px; grid-template-columns: repeat(9, minmax(0, 1fr)); } [class*="cu-col-span-"] { grid-column: 1 / -1; } .cu-form label { display: block; font-size: 14px; font-weight: 500; position: relative; } .cu-form .wpcf7-form-control-wrap { display: inline-block; } .cu-form .wpcf7-form-control-wrap, .cu-form .wpcf7-form-control:not(.wpcf7-submit) { width: 100%; } .cu-form .wpcf7-not-valid-tip { margin-top: 2px; } .cu-form .wpcf7-spinner { display: none; } .cu-form input[type="submit"] { background-color: #1d2fd8; color: #fff; order: 2; padding: 6px 16px; width: 100%; } .cu-form input[type="submit"]:hover, .cu-form input[type="submit"]:focus { background-color: #1928ba; } .cu-form .submitting input.c6-submit { display: none; } .cu-form .submitting .wpcf7-spinner { display: inline-block; } .cu-form ~ div.wpcf7-response-output { margin: 20px 0 0; } @media (min-width: 768px) { .cu-col-span-1 { grid-column: span 1/span 1; } .cu-col-span-2 { grid-column: span 2/span 2; } } .cu-md-outline .cu-label-text { color: #626262; font-size: 18px; font-weight: 400; left: 15px; position: absolute; pointer-events: none; top: 14px; transition: all 150ms ease-in-out; will-change: transform; z-index: 2; } .cu-md-outline .cu-label-text.position-static { position: static; } .cu-md-outline input[type="text"], .cu-md-outline input[type="email"], .cu-md-outline input[type="tel"], .cu-md-outline textarea { background-color: #fff; border: 1px solid #9e9e9e; border-radius: 4px; font-size: 16px; padding: 14px 16px; } .cu-md-outline input[type="text"]:hover, .cu-md-outline input[type="email"]:hover, .cu-md-outline input[type="tel"]:hover, .cu-md-outline textarea:hover { border-color: #212121; } .cu-md-outline input[type="text"]:focus, .cu-md-outline input[type="email"]:focus, .cu-md-outline input[type="tel"]:focus, .cu-md-outline textarea:focus { border-color: #6200ee; border-width: 2px; margin-top: -2px; outline: none; } .cu-md-outline .cu-label.is-active .cu-label-text, .cu-md-outline .cu-label:focus-within .cu-label-text { background-color: #fff; color: rgba(0, 0, 0, 0.6); font-size: 13px; line-height: 1.2; padding: 0 5px; left: 10px; top: -10px; } .cu-md-outline .cu-label:focus-within .cu-label-text { color: #6200ee; } .cu-md-outline input[type="submit"] { background-color: #6200ee; border-radius: 4px; box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%); font-size: 15px; font-weight: 600; letter-spacing: 1px; padding: 13px 15px; text-transform: uppercase; } .cu-md-outline .wpcf7-not-valid-tip, .cu-md-outline .cu-form-hint { margin-left: 14px; } .cu-md-outline .wpcf7-not-valid-tip { font-weight: 600; }
PHP (how to add)
add_filter( 'wpcf7_autop_or_not', '__return_false' );