Customizing button to send file from Contact Form 7 wordpress

Navigation
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
    How to load the persistence.xml settings in ComboPooledDataSource? Condition Arrays python