Customizing button to send file from Contact Form 7 wordpress

0

I have a form in contact form 7, of wordpress, that I need to change the button to attach files, today it looks like this:

Ineedthebuttonstolooklikethis:

Ihavetriedeverythingandnothing!!!Ifanyoneneedstoaccessthetestpageisthis here !

    
asked by anonymous 28.02.2017 / 22:54

2 answers

2

You can solve this problem in two steps.

  • Create CSS from inputs A simple technique that uses HTML and CSS is to point the for attribute of a label to the input of file selection (which will be hidden). When the user clicks the label , it will be like clicking the input of file. An example:

    input[type='file'] {
        display: none
    }
    
    label {
        background-color: #fdd31d;
        color: #000;
        cursor: pointer;
        margin: 10px;
        padding: 6px 20px;
        display: table;
    }
    
    <label for='anexo-1'>Anexo 1</label>
    <input id='anexo-1' type='file'>
    <label for='anexo-2'>Anexo 2</label>
    <input id='anexo-2' type='file'>
    <label for='anexo-3'>Anexo 3</label>
    <input id='anexo-3' type='file'>    
    
  • link

  • Assign the ids and classes in the Contact Form Form 7:

    <label for='anexo1'>Anexo 1</label>
    [file file-1 id:anexo1]
    <label for='anexo2'>Anexo 2</label>
    [file file-2 id:anexo2]
    <label for='anexo3'>Anexo 3</label>
    [file file-3 id:anexo3]
    
  • 01.03.2017 / 00:59
    0

    Based on Darlei's help, I managed to do it! Here's the solution:

     .styled-select #sexo{
    
            background: url(icone-seta-premio.png) no-repeat;
            height: 45px;
            position: relative;
            z-index: 999;
            background-position: center center;
            background-position-x: 110px;
            background-color: #f7f7f7;
            border: 1px solid #eee;
            width: 100%;
            font-size: 16px;
            height: 37px;
    
        }
    
        .styled-select {
            height: 45px;
    
    
        }
    

    Thanks for the attention and help !!!

        
    04.03.2017 / 19:15