Control elements on contact form 7 via CSS

[jimmillard]

Hi can you help me control elements on my contact form 7 using CSS?

I used to have a bunch of custom CSS visible under the edit page funciton but this is now hidden it seems.

I want to:

turn the text color black
adjust the text size for larger text on mobile view (responsive)
put the check box ‘it’s OK to add me to your contact list’ on a different coloured background box with rounded corners
Center the green ‘SUBMIT’ button and change the font

[marc_a]

Hey @jimmillard,

Thanks for reaching out!

To make the text color to black, you need to add this CSS code

.wpcf7 select, .wpcf7 textarea, .wpcf7 input[type=text], .wpcf7 input[type=password], .wpcf7 input[type=datetime], .wpcf7 input[type=datetime-local], .wpcf7 input[type=date], .wpcf7 input[type=month], .wpcf7 input[type=time], .wpcf7 input[type=week], .wpcf7 input[type=number], .wpcf7 input[type=email], .wpcf7 input[type=url], .wpcf7 input[type=search], .wpcf7 input[type=tel], .wpcf7 input[type=color] {
	color: #000000; 
}

Then if you want to change the font size on the mobile, you need to use this one:

@media(max-width: 767px) {
	.wpcf7 select, .wpcf7 textarea, .wpcf7 input[type=text], .wpcf7 input[type=password], .wpcf7 input[type=datetime], .wpcf7 input[type=datetime-local], .wpcf7 input[type=date], .wpcf7 input[type=month], .wpcf7 input[type=time], .wpcf7 input[type=week], .wpcf7 input[type=number], .wpcf7 input[type=email], .wpcf7 input[type=url], .wpcf7 input[type=search], .wpcf7 input[type=tel], .wpcf7 input[type=color] {
		font-size: 16px; /* just adjust the size to your desired one */
	}
}

Put background color for the checkbox

.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item label {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 5px;
}

Centering the submit button

.submit-wrapper {
	text-align: center;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Also, when I tried to disable and update the X theme it crashed your website, I suspect that it has something to do with your PHP version. Please try to change the PHP version to 7.4 or higher.

Hope that helps.