Page Builder with Contact Form 7

Hi

We have unfortunately seen this hassle with Twenty Fourteen before. The theme’s widget’s all have black backgrounds and all Page Builder content gets inserted via a widget but on a white background, hence the white border form fields you have here.

Head to Jetpack and click the Custom CSS Configure button, then insert the following:

/* Input fields */

#primary .widget input,
#primary .widget textarea {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	color: #2b2b2b;
	padding: 8px 10px 7px;
}

#primary .widget textarea {
	width: 100%;
}

#primary .widget input:focus,
#primary .widget textarea:focus {
	border: 1px solid rgba(0, 0, 0, 0.3);
	outline: 0;
}

That should resolve the Twenty Fourteen Page Builder form field issue.

This CSS snippet isn’t specific to Contact Form 7, it’s just a set of helper styles for any form fields within widgets, within your main content area. If you insert it it in style.css it will be overwritten the next time you update your theme. So you need to either insert it into a Custom CSS module, like the one in Jetpack or use a standalone Custom CSS module like Simple Custom CSS: http://wordpress.org/plugins/simple-custom-css/ OR put these styles in the style.css of a child theme.

Super, glad we were able to help!