Skip to content

Instantly share code, notes, and snippets.

@cfxd
Last active December 3, 2020 00:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save cfxd/738ccbfe05b32db3593f to your computer and use it in GitHub Desktop.
Save cfxd/738ccbfe05b32db3593f to your computer and use it in GitHub Desktop.
Bootstrap 3 input group for Contact Form 7 (only tested with 1 input field and 1 submit button)
/*
*
* Bootstrap 3 input group form for Contact Form 7
*
* In the shortcode, you must use html_id="my-id"
* or html_class="my-class" to target a specific form
*
* Actual form sample:
* <label for="your-email">Email:</label>
* [email* your-email 0/ placeholder "enter your email"]
* <span><button type="submit" class="wpcf7-form-control">Submit</button></span>
*
* Example 1 (affects targeted form class only): .my-form-class { &:extend(.cf7_input_group all); }
*
* Example 2 (affects all Contact Form 7 forms): .wpcf7-form { &:extend(.cf7_input_group all); }
*
*/
.cf7_input_group {
& {
&:extend(.input-group);
}
.wpcf7-form-control-wrap {
> input {
&:extend(.input-group .form-control, .input-group .form-control:first-child);
}
+ span {
&:extend(.input-group-btn);
vertical-align: bottom;
> button {
&:extend(.input-group-btn:last-child > .btn, .input-group-btn > .btn);
}
}
}
label {
&:extend(.hidden);
@media (min-width: @grid-float-breakpoint) {
display: inline-block !important;
visibility: visible !important;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment