WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Contact form 7: How to style "choose file" button? (20 posts)

  1. mm
    Member
    Posted 11 months ago #

    Hello,

    I have previously restyled the contact button which worked fine.
    But I am not sure how to style the "choose file button".

    I suppose it should look like something like this:

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

    But I am not sure how to name it...

    An idea?

    Thank you for having a look

    http://wordpress.org/extend/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 11 months ago #

    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.

  3. mm
    Member
    Posted 11 months ago #

    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!

  4. buzztone
    Member
    Posted 11 months ago #

    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.

  5. buzztone
    Member
    Posted 11 months ago #

    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;
    }
  6. mm
    Member
    Posted 11 months ago #

    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.

  7. buzztone
    Member
    Posted 11 months ago #

    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/
    http://www.evotech.net/blog/2007/06/introduction-to-firebug/
    http://www.youtube.com/watch?v=sHbYpl1XFiM
    http://www.tipsandtricks-hq.com/debugging-javascript-code-with-firebug-1899
    https://developers.google.com/chrome-developer-tools/

  8. mm
    Member
    Posted 11 months ago #

    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)...

  9. avipr
    Member
    Posted 11 months ago #

    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.

  10. mm
    Member
    Posted 11 months ago #

    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!

  11. avipr
    Member
    Posted 11 months ago #

    Hello @MM

    I can show you one example and you can check it here http://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

  12. mm
    Member
    Posted 11 months ago #

    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?

  13. avipr
    Member
    Posted 11 months ago #

    Hi @MM
    you can also post screenshots or code here

  14. mm
    Member
    Posted 11 months ago #

    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.

  15. avipr
    Member
    Posted 11 months ago #

    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

  16. mm
    Member
    Posted 11 months ago #

    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;
    }
  17. avipr
    Member
    Posted 11 months ago #

    Hello

    It doesn;t matter where you are on page or what is your html path or what is your class or id hierarchy, you can simply use .wpcf7 or .wpcf7 .wpcf7-submit it means the contact form 7 button and it can be any where.

    thanks

  18. mm
    Member
    Posted 11 months ago #

    I am not very good at this stuff but apparently it does matter,that's why I have been using an ID for my second form, otherwise it would change the design of both my forms.

    I tried adding the code that I pasted above following your suggestion and it didn't work.

    Did I miss something?

  19. avipr
    Member
    Posted 11 months ago #

    Hello

    I need to check for this.

    Can you share your screen on team viewer, if yes, send the id and pass

    thanks

  20. mm
    Member
    Posted 11 months ago #

    I'm sorry I don't have team viewer. I don't see a way to share a print screen here. But there isn't much to see. My button looks like a default button.
    Thanks

Reply

You must log in to post.

About this Plugin

About this Topic