Contact us form


I’m looking to make some tweaks on my contact form 7; to change my form shape to look like the one here:

My website is

Do you know the CSS I should be using to get the submit button to line up with the fields, stretch it full with, and also include round edge on the bottom of “submit” and the top of “your name” field?

Please let me know if this is something I should be posting on the forms of contact us form 7 :slight_smile:

Thanks for all the help so far guys!

Something like this should get you started:

.wpcf7-form input {
	width: 100% !important;
	margin: 0 !important;
	border-radius: 0;
.wpcf7-form p:first-of-type input {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
.wpcf7-form p:last-of-type input {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	top: -6px;

Might need to remove some of the custom code you’ve already added for it.

Thanks a lot Vlad!

I’ve made the css changes you suggested and it’s nearly there :slight_smile:

Do you happen to know how I can get the submit button to follow the same hover rules as per the Sydney Pro button theme options?

Also, last thing is do you know how I can remove the borders in the 3 fields (name, email and message)? I want it to be plain white in the fields as per the box on this page:

Best regards

First you need to remove the !important from your background color declaration. As I said before, removing some of your custom CSS might help.
Then add this:

.wpcf7-submit {
     border: 2px solid #c6007e !important;
.wpcf7-submit:hover {
     color: #c6007e;
.wpcf7-form.cf7skins input[type="text"],
.wpcf7-form.cf7skins input[type="email"],
.wpcf7-form.cf7skins .wpcf7-textarea {
     border: 0 !important;

Note that you have an extra } after your letter-spacing.