Bootstrap for CF7 – Alternative CSS Fix

Hi Everyone,

If like me you have an older Bootstrap 3.x WordPress site and were still using the plugin ‘Bootstrap for Contact Form 7 v1.4.8’ (no longer apparently updated), this plugin now no longer works with the latest release of Contact Form 7 v5.2.

The last previous version it worked with was Contact Form 7 v5.1.9

Simply because I had to, I manually recreated the CSS needed and thought to share it for anyone else in my situation. Granted this CSS is highly customized to my site and implementation of Bootstrap but you can take the code as a basis and modify as you need.

Disabling the ‘Bootstrap for CF7’ plugin and adding the CSS code to your WordPress style.css should give you back your bootstrap styling applied to CF7 v5.2.

I chose to limit the colors of the validation responses supported by CF7 just to any time of failure showing as red, rather than the variation of yellow, orange, red. Green is used for successful form submission. Obviously you can keep and use all the colors if you wish.

Hoping this helps someone.
Aly

span.wpcf7-not-valid-tip { /* Validation error under field text */
	color: #d94a26 !important;
	font-weight: bold;
	font-size: 120%;
}
.has-error .form-control { /* Validation error around form fields */
	border-color: #d94a26;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.wpcf7-form-control { /* Rounded corners for form input boxes */
	width: 100%;
	-webkit-border-radius: 4px !important;
	-moz-border-radius: 4px !important;
	border-radius: 4px !important;
	border: 1px solid #ccc;
	height: 34px;
	padding: 6px 12px !important;
	font-size: 14px;
	color: #555;
	background-color: #fff;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.wpcf7-form input { /* Remove drop shadow */
	outline: none;
	padding: 2px;
}
textarea.wpcf7-form-control { /* Increase height of text area input box */
    height: auto;
}
.wpcf7-checkbox, /* Remove border around checkbox input */
.wpcf7-radio {   /* Remove border around radio button input */
	border: none; 
}
span.wpcf7-list-item { /* Display checkboxes in vertical alignment */
	display: block !important;  
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #a3a3a3; /* Gray placeholder text in input fields */
  opacity: 1; /* Firefox */
}

.wpcf7 form .wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
	border: 2px solid #00a0d2; /* Blue */
}

.wpcf7 form.init .wpcf7-response-output {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	/*border-color: #46b450; /* Green */
	background-color: #669e00;
	border-color: #669e00;
	color: #ffffff;
	font-size: 125%;
	text-align: center;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	/* border-color: #dc3232; /* Red */
	background: #d94a26;
	border: 1px solid #d94a26;
	color: #ffffff;
	font-size: 125%;
	padding: 0.75em 1.25em;
	text-align: center;
}

.wpcf7 form.spam .wpcf7-response-output {
	/* border-color: #f56e28; /* Orange */
	background: #f56e28;
	border: 1px solid #f56e28;
	color: #ffffff;
	font-size: 125%;
	padding: 0.75em 1.25em;
	text-align: center;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	/* border-color: #ffb900; /* Yellow */
	background: #d94a26;
	border: 1px solid #d94a26;
	color: #ffffff;
	font-size: 125%;
	padding: 0.75em 1.25em;
	text-align: center;
}

• This topic was modified 4 years, 4 months ago by agreenstreet.