Contact form 7 file input button design

1 Views

I have installed Contact form 7 on my WordPress site, and have styled the rest of the fields successfully, but unfortunately I can’t find a solution how to style the File Attach button. I have inserted the code that I have written in contact form 7 module in admin panel. Besides that, I have the CSS for it in style.css;

Can anyone help me?

<div class="container">

<div class="row">

<div class="col-md-4">
<p>Your Name (required)<br />
    [text* your-name] </p>
</div>

<div class="col-md-4">
<p>Your Email (required)<br />
    [email* your-email] </p>
</div>

<div class="col-md-4">
<p>Subject<br />
    [text your-subject] </p>
</div>
</div>

<div class="row">

<div class="col-md-8">
<p>Your Message<br />
    [textarea your-message] </p>
</div>

<div class="col-md-4">

[file* uploadcv limit:50000000 class:cv-upload]

</div>
</div>

<div class="row">
<div class="col-md-4 ">
[recaptcha id:recapcha class:recapcha]
</div>

<p>[submit "Send"]</p>
</div>

</div>
Post Views: 1

Related posts

3 comments

  1. Use HTml like this 

    <div id="upload-file">
   <input type="file" name="photo" />
</div>

    and css

    #upload-file {
   background: url(images/custom-file-input.png) no-repeat;
}

#upload-file input {
    opacity: 0;
    display:inherit;
}

    I think it will work.

  2. I like the idea of using a recognized button for file input (since the framework is Bootstrap), so I use .btn-file

        .btn-file {
        position: relative;
        overflow: hidden;
    }
    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>


<span class="btn btn-success btn-file">
                        Browse <input name="file" type="file">
</span>

  3. This is what i use

    in contact form

    *Name
    [text* your-name]

    *Email
    [email* your-email]

    Subject
    [text your-subject]

    input[type=submit]
    {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 7px 27px; } textarea {height:100px;}

    Your Message
    [textarea your-message]

    [submit “Send”]

Comments are closed.