• I was searching for a simple fix to add a red border error for each field within the CF7 plugin, but could not find anything without hacking the js script. So… here is my code that works perfectly for giving the appearance of red borders on each field that does not validate. Add the below code to your theme’s own style.css

    .wpcf7 .wpcf7-not-valid-tip {
    	position:relative;
    	border:2px solid red!important;
    	z-index: 100;
    	background: inherit;
    	font-size: 10pt;
    	padding:2px;
    	display: block;
    	width:352px;
    	float:left;
    	margin:-26px 0 0 -58px;}

    The widths and negative margins are dependent on the size of your fields. My fields have a fixed width of 350px.

    Please let me know if you decide to try this and if it works for you. Again, it works perfectly for me, in test and production sites.

  • The topic ‘Contact Form 7 Red Border Error Fix’ is closed to new replies.