Docs

[watue]

I am trying to get a background for my contact 7 form (that’s on my Pay Membership Dues page) to look like the contact form on http://persondems.org/contribute/. How do I get a background with rounded corners and white fields?

Also, how do I line up my checkboxes at the bottom of the form so that all the checkboxes line up vertically (one checkbox exactly under the other)?

Thanks for your help. My login credentials are in a private post below.

[watue]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.page-id-76 form.wpcf7-form {
	background-color: #dddddd;
    padding: 30px;
    border-radius: 20px;
}

.page-id-76 form.wpcf7-form .wpcf7-list-item {
	 text-align: left;
    text-indent: 35%;
}

Hope it helps, Cheers!

[watue]

Thank you. That is exactly what I was wanted. However, how can I change the size of the text area to be smaller, i.e. all the white space on the form is smaller?

[Nabeel A]

Hi again,

You can add the following in your Customizer:

textarea.wpcf7-textarea {
    height: 75px !important;
}

Let us know how this goes!

[watue]

That did not work, so I changed it to the following and that did not work either.

.page-id-76 form.wpcf7-form textarea.wpcf7-textarea {
width: 75px !important;
}

I am actually trying to change the width of the fields.

[watue]

I have it the way I want it now. I changed the left and right padding for the form. Thank you for all your help.

[Prasant Rai]

You are most welcome. 🙂

[Friech]

We’re delighted to assist you with this.

Cheers!

[watue]

Just one other thing….when I added the background color for the form on Pay Membership Dues page, it also changed the form shows when hovering Contact Us on the navigation page. Please point me in the right direction for only changing the form on Pay Membership Dues page.

[Friech]

Hi There,

Sorry I did not notice that you have another form on the menu. Please update my given css code above to this:

.page-id-76 #x-section-4 form.wpcf7-form {
	background-color: #dddddd;
    padding: 30px;
    border-radius: 20px;
}

.page-id-76 #x-section-4 form.wpcf7-form .wpcf7-list-item {
	 text-align: left;
    text-indent: 35%;
}

Hope it helps, Cheers!

[watue]

Thank you.

[Rue Nel]

You are most welcome!

[Author]

Posts