CF7 Customizations

Support
#1

Hi,
I have been working on customizing some of my CF7 forms to make them fit the column space better. All fields are cooperating with the exception of the “textarea” field. I cannot get it to reduce the width. The form is used on multiple pages and is working on most, but on the Get in Touch Page it’s not cooperating… I have pulled the form ID as shown in other posts. Here’s my code:

#wpcf7-f283-p106-o1 input[type="text"],
#wpcf7-f283-p106-o1 input[type="email"], 
#wpcf7-f283-p106-o1 input[type="textarea"]{
width:300px;
margin-bottom:2px;
font-size:12px;
}

Additionally, on a separate form on my Employment page, the Submit button seems to be overlapping the File Attachment button. I would like more space between those two items. That page is not live yet, but here is the URL: https://tricountyaustinac.com/about/employment/

Please help!
Dawn

#2

Hi there,

The Textarea is a separate tag and not an attribute of an input tag. So you need to change your CSS code to:

#wpcf7-f283-p106-o1 input[type="text"],
#wpcf7-f283-p106-o1 input[type="email"], 
#wpcf7-f283-p106-o1 textarea {
width:300px;
margin-bottom:2px;
font-size:12px;
}

For the second question I suggest that you add the CSS code below:

#wpcf7-f1793-p1790-o1 .wpcf7-submit {
    margin-top: 30px;
}

Play with the 30px to find the correct size for your case.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#3

Thanks, this is exactly what I was looking for! One last question for this thread… the “Browse” button looks cut off on the bottom. I thought it was from the overlap of the Submit button, but after moving that down, the Browse button is still cut off. How can I fix this?

Appreciate your help!
Dawn

#4

Hi Dawn,

Regretfully, we cant find the “Browse” button that you’re referring to. Please provide us the direct page URL and screenshot of the button.

Thanks,

#5

Sorry, the client had me change around the nav at the last minute. Here is the page you are looking for:

#6

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

body input[type="file"] {
    padding: 0;
}

Hope it helps :slight_smile:

#7

That did the trick! Thanks so much!

#8

You’re more than welcome, glad we could help.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.