Formulaire contact css
Résolu
moon136
Messages postés
71
Date d'inscription
Statut
Membre
Dernière intervention
-
moon136 Messages postés 71 Date d'inscription Statut Membre Dernière intervention -
moon136 Messages postés 71 Date d'inscription Statut Membre Dernière intervention -
bonjour
je suis en train de realiser un formulaire contact et je n'arrive pas a positionner les labels à cotés des champs à remplir... J'ai le "nom" puis en dessous le champ a remplir il n'est pas sur la meme ligne.
du coup le contact est dessous du formulaire alors qu'il était en haut à droite et la map a disparu
merci de votre aide
je suis en train de realiser un formulaire contact et je n'arrive pas a positionner les labels à cotés des champs à remplir... J'ai le "nom" puis en dessous le champ a remplir il n'est pas sur la meme ligne.
du coup le contact est dessous du formulaire alors qu'il était en haut à droite et la map a disparu
<section> <p>Contactez-nous à l'aide du formulaire ci-dessous:</p> <form name="formulaireContact" action="" method="POST" enctype="multipart/form-data"> <ul> <li><label for="nom">Nom* :</label><input id="nom" name="nom" type="text" autofocus placeholder="Votre nom"/><span class="error">Champ invalide</span></li> <li><label for="prenom">Prénom :</label><input id="prenom" name="prenom" type="text" placeholder="Votre prénom" /><span class="error">Champ invalide</span></li> <li><label>Sexe :</label><input type="radio" id="homme" name="sexe" value="homme" class="radio" /><label for="homme" class="radioLabel">Homme</label><input type="radio" id="femme" value="femme" name="sexe" class="radio" /><label class="radioLabel" for="femme">Femme</label><input id="et" value="et" type="radio" name="sexe" class="radio" /><label class="radioLabel" for="et">Extra-terrestre</label></li> <li><label for="tel">Tél:</label><input id="tel" name="tel" type="text" placeholder="0123456789" maxlength="10" /><span class="error">Champ invalide</span></li> <li><label for="mail">E-mail* :</label><input id="mail" name="mail" type="mail" placeholder="truc@machin.fr" /><span class="error">Champ invalide</span></li> <li><label for="date">Date :</label><input id="date" name="date" type="date" /></li> <li id="pj"><label for="piece">Pièce jointe :</label><input id="piece" name="pj" type="file" /></li> <li><label for="mess">Votre message :</label><textarea id="mess" name="mess" rows="10" cols="30"></textarea></li> <li><label></label><input type="reset" /> <input type="submit" id="envoi" /></li> </ul> </form> </section> <div class="dv-5 top40"> <h1>Contactez-nous:</h1> <h2>Tél: 01 02 03 04 05</h2> <h2>Rue du cosmos 44049 Triton</h2> </div> <div class="frame"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d167998.10803373056!2d2.2069770643680573!3d48.85877410312378!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C+France!5e0!3m2!1sfr!2sdz!4v1516099772287" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </main> </div>
/*contact*/ .error { color:red; font-size: 0.8em; display: none; } .aside{ padding-top:2em; cursor:pointer; position:relative; overflow:hidden; text-align:center; height:400px; -webkit-animation: apparition 1s; animation: apparition 1s; } .frame{ width:100%; height:200px; position:absolute; left:105%; -webkit-transition: left 0.8s; transition: left 0.8s; } @-webkit-keyframes apparition{ from{ -webkit-transform:rotate(0) scale(0); transform:rotate(0) scale(0); } to{ -webkit-transform:rotate(360deg) scale(1); transform:rotate(360deg) scale(1); } } @keyframes apparition{ from{ -ms-transform:rotate(0) scale(0); -webkit-transform:rotate(0) scale(0); transform:rotate(0) scale(0); } to{ -ms-transform:rotate(360deg) scale(1); -webkit-transform:rotate(360deg) scale(1); transform:rotate(360deg) scale(1); } } .aside:hover .frame{ left:50; } .frame { width:100%; height:150px; margin:40%; } .frame2 { width:100%; height:250px; } .top30{ margin-top:30px; } .top40{ margin-top:40px; } section{ padding-top:5em; box-shadow:0 0 0; float:left; border:none; padding-top:2em; padding-left:0; width: 100%; } form{ width:25%; /* largeur */ height:50px; /* hauteur */ margin-left:170px; /* -largeur/2 */ margin-top:80px text-align:left; padding: 15px; } ul{ list-style-type:none; } label:not(.radioLabel){ display:inline-block; width:30%; padding: -15px; } input{ outline:0; -webkit-transition:all 1s; transition: all 1s; border:none; border-radius:5px; } input:focus, textarea:focus{ background:grey; color:#fff; } textarea{ border-radius:5px; outline:0; transition: all 1s; -webkit-transition:all 1s; } @media screen and (max-width: 600px){ form{ width:96%; font-size:0.7em; float:none; } label{ display:block; width:150px; vertical-align:top; } #pj{ display:none; } input[type="text"], input[type="tel"], input[type="email"], textarea{ width:100%; margin-bottom:0.5em; } #asideContact{ width:96%; float:none; } #frame{left:0;} }
merci de votre aide
A voir également:
- Formulaire contact css
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook - Guide
- Formulaire de reclamation instagram - Guide
- Recuperer contact carte sim - Guide
- Retrouver contact supprimé - Accueil - Android