Responsive Two Columns CONTACT FORM 7

Hi,

here is a sample of a contact form with two columns for the name, last name, email and phone and a large field for your message.

This is an responsive code :

HTML :
to insert into Contact Form 7 when you create your form :

<div id=”form”>

<div id=”contentleft”>
<p>Nom
[text* Nom]</p>
<p>E-mail
[email* your-email] </p>
</div>

<div id=”contentright”>
<p>Prénom
[text* prenom] </p>
<p>Téléphone
[tel tel-147] </p>
</div>

<div id=”bottom”>
<p>Votre message
[textarea your-message]</p>
<p>[recaptcha* recaptcha-860 theme:dark]</p>
<p>[submit “Envoyer”]</p>
</div>
</div>

And CSS :
Add this into your custom CSS :

/* FORM */
#form {
padding: 5px;
width: auto;
margin: 20px auto;
}

#contentleft {
width: 50%;
float: left;
padding: 5px 15px;
}

#contentright {
width: 50%;
padding: 5px 15px;
float: left;
}

#bottom {
clear: both;
padding: 0 15px;
}

/*MEDIA QUERIES*/

/* for 980px or less */
@media screen and (max-width: 980px) {

#form {
width: 94%;
}
#contentleft {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}

#contentright {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}

#bottom {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}

/* for 700px or less */
@media screen and (max-width: 600px) {

#contentleft {
width: auto;
float: none;
}

#contentright {
width: auto;
float: none;
}
#bottom {
width: auto;
float: none;
}
}

/* for 480px or less */
@media screen and (max-width: 480px) {

#contentleft {
background: #f8f8f8;
}
#contentright {
background: #f0efef;
}
#contentleft, #contentright, #bottom {
margin-bottom: 5px;
}

#contentleft, #contentright, #bottom {
border: solid 1px #ccc;
}

I hope this will help you.

My website for people interested in my work : https://www.web-premiere.fr/

Cheers.