Contact form 7: How to style "choose file" button?

Use .wpcf7-file input

.wpcf7-file input {
   width: 100px;
   height: 30px;
}

Use Firebug or Chrome Dev Tools to first understand and then change the CSS used for your CF7 form elements.

Thank you busstone for your kind answer.
Unfortunately I tried that and it didn’t work. No change.
I’m noticing that I didn’t use the “.wpcf7” for the change on the “submit button”. I wonder if that means anything to you.
I am clueless myself.

Cheers!

RE: I’m noticing that I didn’t use the “.wpcf7” for the change on the “submit button”. I wonder if that means anything to you.

Yes it does. Sorry from your question I assumed you would be familiar with using Firebug or Chrome Dev Tools. That will answer all your questions – well worth learning.

Alternatively include a link to your CF7 form – others here may be able and willing to offer a possible solution.

Each CF7 form has a unique ID like wpcf7-f8-p275-o2. Use Firebug or Chrome Dev Tools to find the ID of each form and then target your CSS changes to each individual form e.g.

#wpcf7-f8-p275-o2 .wpcf7-form {
    background:#dcc8a5;
    padding:20px;
    border:2px solid #f6efdf;
    margin-bottom:30px;
}

Thank you very much Buzztone for your interesting answer.

It worked! Now the only things is that I’d want to change 3 things:

– the button color

I tried with the following code unsuccessfully:

#wpcf7-f482-t1-o1 .wpcf7-form
.contact-submit input {
	width: 100px;
	height: 30px;
	background-color: #999999;
	font-size: 13px;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 7px;
}

I am probably missing something because the ID of the form is correct and the change button code is correct as well but the mix of both didn’t work.

– the length of the fields

(No slight idea how to do that…)

– the inside color of the fields

If you have the patience to explain that to me I’ll do my best to try to understand.

Thank you!

ps: And I am sorry not to be able to post a link to my form as it is currently under maintenance mode.

RE: If you have the patience to explain that to me I’ll do my best to try to understand.

Sorry I don’t offer that level of support in this forum – but I can point you in the right direction where you can learn how to do it yourself.

Key is using Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

You can learn about these extremely useful developer tools at the following links.

https://getfirebug.com/wiki/
https://www.evotech.net/blog/2007/06/introduction-to-firebug/
https://www.youtube.com/watch?v=sHbYpl1XFiM
https://www.tipsandtricks-hq.com/debugging-javascript-code-with-firebug-1899
https://developers.google.com/chrome-developer-tools/

ok thank you. i will try to figure it out then (unless someone has an idea which would be really helpful, especially regarding the submit button design)…

Hi
you can definitely design style “choose file button” but as we know it uses default css so most of the time the styling works on FF and not in Chrome and IE.
I have worked on the same but at last I used an image for this.

Hello Arvind.

Could I then use a roll-over image as well? That would work if I could do that.
Did you do that in the CSS page?

Cheers!

Hello @mm

I can show you one example and you can check it here https://simone-group.com/submit-resume/
this form was showing different on FF, IE and Chrome, and even I also try browser specific code (wekit, moz etc) still it doesn;t work.

For more can I check your form that you are using, because my work is on older version of CF7.

Thank you

Hello Arvind,

Thank you for your answer.

To me your button looks different.
But my form isn’t online…so I am not sure how to show you.
Basically I have been changing the CSS for one of my forms, and so it changed the submit button perfectly.
Now for some reason it didn’t work for my second form.
I can show you what I put in the CSS maybe? Would that help?

Hi @mm
you can also post screenshots or code here

Hello Arvind,

here is some code:

this is how i modified the look of the submit button in my contact form number 1

.contact-submit input {
	width: 100px;
	height: 30px;
	background-color: #999999;
	font-size: 13px;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 7px;
}

this is how i changed the size of the contact form 2

#wpcf7-f482-t1-o1 .wpcf7-form
input.wpcf7-text {
	height: 20px;
	width: 200px!important;
}

I don’t manage to modify the submit button by doing something like:

#wpcf7-f482-t1-o1 .wpcf7-form
input.wpcf7-file{
	width: 100px;
	height: 30px;
	background-color: #999999;
	font-size: 13px;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 7px;
}

Any help would be greatly appreciated. Thank you.

Hello

If your first form is completed fine and you also need the second form same as first, its very simple just use the same classes or ids for it.

For example, if you want to style Submit button use this

.wpcf7-submit
Its default class for contact form 7 submit button, you can use any style here or you can also use it in this type

.wpcf7 .wpcf7-submit

Thank you

I need to specify a special path for form 2 as they don’t have the same styles.

that’s why i am supposed to add somewhere:

#wpcf7-f482-t1-o1 .wpcf7-form

not sure how to continue from there
the following didn’t work:

#wpcf7-f482-t1-o1 .wpcf7-form
.wpcf7 .wpcf7-submit{
	width: 100px;
	height: 30px;
	background-color: #999999;
	font-size: 13px;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 7px;
}