Quantcast
Channel: responsive – WordPress.org Forums
Viewing all articles
Browse latest Browse all 16569

guirone on "[Plugin: Contact Form 7] Making a two column form responsive??"

$
0
0

Hi all,

I'm very new with this plug in and css also and I need to generate a contact form with three rows where in the first one there are a dropbox,the input box for name,email and subject,in second one there's the subject input box and in third one the send button.Also it must be responsive...

Belove there's the code I used for the contact form(copied from above posts and for colums while I need rows) and CSS.But result is not the one I'm looking for.PLease,could you help me to modify the contact form as I want?

Thank you so much in advance.

<!-- TWO COLUMN FORM -->
<div class="clearfix">
    <div id="left">
        [select* Tour "Barrio Gotico" "Modernismo" "Barcellona su due ruote" "Itinerario Gourmet"] <br/>
    </div>
    <div id="right">
        [text* your-name watermark "Il tuo nome"]<br/>
        [email* your-email watermark "La tua email"]<br/>
        [text* your-subject watermark "Subject "] <br/>
    </div>
</div>
        [textarea* your-message watermark "Il tuo messaggio "]
[submit "Send"]
<!-- /TWO COLUMN FORM -->

and this CSS:

#left {
    width: 35%;
    float: left;
}  

#right {
    width: 35%;
    float: left;
}  

.clearfix:after {
    content:"020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
} 

.clearfix {
    display:block;
}  

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 30%;
}

Viewing all articles
Browse latest Browse all 16569

Trending Articles