Search code examples
cssformsemailsendcontacts

Center allign Contact Form 7 fields

I working on customizing Contact Form 7, but have a issue with allign then centered into place.

Only message label is ok positioned, others are left, and its not the same size.

I inserted this CSS:

.no-touchevents a:hover{text-decoration:none;}
a:active{background-color:transparent;}
input,
textarea,
select{
width: 80%;
display: block;
margin: auto;
}

This CSS only increase width for dropdown label, but not make centered. How to make all fields from contact form centered, and with same width? Site where i work on contact form is link.

Solution

  • You should add max-width and margin: 0 auto properties to the inputs with class .wpcf7-form-control.

    Here is the screenshot of how I handled it in the Chrome inspector: http://www.screencast.com/t/ygBP3eQn9jQu