Contact form style alignment looking wired

Hello! I wanted to see if you can help me out to center all the fields in my form. I tried adding:

.wpcf7-form {
text-align: center!important;
}

and

.wpcf7-form-control {

align-content: center!important;

}

And for the text it worked, kind of, but the lines are still align to the right and also, and in some fields the text is next to the line, have different sizes (I add a screenshot). Could you help me to align the text and lines centered, with the text up and line down and finally all of the lines to have the same width?


Thanks, I’ll wait for your response!

Hello Thomas,

When you add the custom contact form, please follow the format below:

This is not caused by Map but rather the labels are not formatted with the required design. Please find the code example below for your contact form:

First Name [text* your-name id:fname]

Last Name [text* lname id:lname]

Email [email* your-email id:email]

Phone Number [text phone id:phone]

Country [text country id:country]

Message [textarea* your-message id:message]

[submit id:btn_sent class:btn class:btn-white "Send Enquiry"]

This will align all your items as in our demo. And then, copy the CSS below and add it to your appearance >> customize >> custom css and js >> custom css box:

.wpcf7-form .form-title {
float: none;
}

Which will remove the left alignment. There after you can customize the CSS above to place it to your own specific styling further if required.

Thank you