CODEWITHSUNDEEP
htmlcsswordpresscontact-form-7
elodpal
elodpal

Reputation: 47

Contact form 7 file input button design

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>

Upvotes: 1

Views: 15088

Answers (3)

Lakhvir Singh
Lakhvir Singh

Reputation: 1

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"]

Upvotes: -1

Adam Azad
Adam Azad

Reputation: 11297

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>

Upvotes: 0

Deepak saini
Deepak saini

Reputation: 4270

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.

Upvotes: 2

Related Questions