Contact Form 7 Red Border Error Fix (1 post)

  1. xmatter
    Posted 3 years ago #

    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 {
    	border:2px solid red!important;
    	z-index: 100;
    	background: inherit;
    	font-size: 10pt;
    	display: block;
    	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.

Topic Closed

This topic has been closed to new replies.

About this Topic