Form width & submit button color issue

Hello @keywon ,

You can try adding the following CSS rule in your Dashboard > Appearance > Customize > Additional CSS, don’t forget to click on Publish button:

/* CF7 text, email, and textarea*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%;
}

/* CF7 submit button */
input.wpcf7-submit {
    background-color: green;
}

Please read Styling contact form to learn more about this subject.

Best regards,
Yordan.

It just changed the color of the button and not the width.

If you want to change the width of the submit button too, you need to add it as a CSS selector withing the first rule:

/* CF7 text, email, button and textarea*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="submit"],
.wpcf7 textarea {
    width: 100%;
}

Best regards,
Yordan.

I don’t want to change the width of the submit button but only the field areas.

The css you provided before change the button color and did nothing to the fields width.

I got it. Sorry for the confusion.

Maybe your theme is overriding this CSS loading its styles later. Please try adding the !important rule to force the application of these styles:

/* CF7 text, email, and textarea*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100% !important;
}

Best regards,
Yordan.

Still nothing happened.

Wow, this is weird, can you provide the URL of your site to see what’s happening?

Please check the contact form below the one.

https://bit.ly/2LxF4BU

Thanks @keywon,

Please try with this other CSS rule:

/* CF7 label, text, email, and textarea*/
.wpcf7 label,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100% !important;
}

Let me know if it works.

Great! It worked. Thanks!

Also please let me know how to change the size, main color, hover color and text color of the button (I want to use hex color code).

• This reply was modified 3 years, 10 months ago by keywon.

You can add styles to the submit button using the input.wpcf7-submit and input.wpcf7-submit:hover selectors, this way:

/* CF7 submit button */
input.wpcf7-submit {
    background-color: #ff6633;
    color: #fff;
    width: 100%;
}
/* CF7 submit button : hover */
input.wpcf7-submit:hover {
    background-color: #d03400;
}

Best regards,
Yordan.

Thanks again Yordan,

I would also like to know if I can minimize the margin/padding between the fields.

And also how to change the color of the notification messages below send button.

Also if you can provide me with the complete css codes that are required in designing the front end of this form, it will solve all my problems.

• This reply was modified 3 years, 10 months ago by keywon.

You’re welcome @keywon,

As you could see, sometimes you have to adapt the selectors to your site, depending on whether your current theme is overwriting the styles or selectors of Contact Form 7.

Please read Styling contact form to learn more.

Best regards,
Yordan.

I just tried to fill this form and send so many times, but I don’t know why it’s not submitting.

It always gives the message [There was an error trying to send your message. Please try again later.]

Please guide me on this issue.

Hello @keywon,

Please create a new topic for this issue providing the name of your current theme and other active plugins, besides CF7.

Best regards,
Yordan.