Partage

Formulaire responsive

12 juin 2019 à 10:09:46

Bonjour,

Petit problème que je n'arrive pas à régler après des heures...

Voici mon formulaire avec la fenetre en plein écran et quand je diminue la fenetre voici ce que ca donne:

Voici le css concerné :

/*PARTIE DROITE-BAS */
/**/
.souscontainer2{
  color:white;
  background:#2b4156;
  flex-direction: row;
  width: 100%;
  height: 45%;
  z-index: 2;
}

input[type="text"]{
  border : 0px #fff;
  background : #2b4156;
  color:#fff;
  width: 100%;
  height: 67%;
}

fieldset{
  border:1px solid #fff;
  height: 30px;
}

.formulaire{
  margin-top: -3%;
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
}

.societe{
  width:50%;
  margin-left: 25%;
}
.nom{
  width:23%;
  margin-left: 25%;
}
.prenom{
  width: 23%;
  margin-left: 1%;
  
}
.email{
  width: 23%;
  margin-left: 25%;
}
.telephone{
  width:23%;
  margin-left:1%;
}

.message{
  width: 50%;
  height: 50px;
  margin-left: 25%;
}

.conditions{
  font-size: 0.7vw;
  margin-left: 25%;
  margin-right: 30%;
  margin-top: 1%;
}

.envoyer{
  font-family: 'Muli', sans-serif;
  color: #fff;
  font-size: 1vw;
  background:#829fbd;
  padding-top:1%;
  padding-bottom:1%;
  padding-right:1%;
  padding-left:1%;
  width: 15%;
  height: 7%;
  text-decoration: none;
  text-align: center;
  margin-top: 5%;
  margin-left: 61%;
  margin-right: 22%;
}

.envoyer:hover{
  background:#A7C0DA;
}

.envoyer:active{
  background:#829fbd;
}
@media (max-width:768px){
fieldset{
  border:1px solid #fff;
  height: 20px;
}

input[type="text"]{
  border : 0px #fff;
  background : #2b4156;
  color:#fff;
  width: 100%;
  height: 60%;
}

.formulaire{
  font-size: 13px;
}

.nom{
  width: 50%;
}

.prenom{
  width: 50%;
  margin-left: 25%;
}

.email{
  width: 50%;
}

.telephone{
  width: 50%;
  margin-left: 25%;
}

.conditions{
  font-size: 10px;
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 1%;
}

.envoyer{
  margin-left: 60%;
  /*margin-right: 25%;*/
  margin-top: 3%;
}

Ainsi que l'html:

<html>

<head>
	<title>A3WEB</title>

	<link type="text/css" rel="stylesheet" href="style/page.css" >
	<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet"> 
	<link href="https://fonts.googleapis.com/css?family=Yellowtail&display=swap" rel="stylesheet">
	<script src = "https://www.google.com/recaptcha/api.js" async defer> </script> 
</head>

<body>

<div class="container">
	<div class="container1">
		<img src="style/logo_a3web.svg" alt="logo a3web" class="logo"/>	
		<div class="paragraphe">
			<div class="clair">Le service </div><div class="fonce">A3W</div><div class="clair">n'est plus ouvert à la création de nouveaux sites internet</div>
			<div class="fonce">_</div>
			<br>
			<div class="cidessous">Vous pouvez toutefois rechercher les sites existants en utilisant le moteur de recherche ci-dessous.</div>
		</div>
		<button href="#" class="recherche"><img src="style/pictoloupe.svg" alt="" class="loupe"/>&nbsp;RECHERCHER UN SITE CRÉE SUR A3W</button>
		<!-- <img src="style/petitpoint.svg" alt="points" class="point"/> -->
	</div>


<div class="container2">
	<div class="souscontainer1">
		<div class="#">
			<div class="phrase1">Vous avez un projet web ,</div>
			<div class="phrase2">contactez-nous !</div>
		</div>
		
		<br>

		<div class="contact">
			Par téléphone au 02 52 45 00 10 <br> ou vous pouvez remplir le formulaire de contact ci-dessous
		</div>
	</div>


	<div class="souscontainer2">
		<img src="style/pictoAvion.svg" alt="avion" class="avion"/>
		<div class="formulaire">
			<fieldset class="societe"><input type="text"><legend>&nbsp;Société&nbsp;</legend></fieldset>
			<fieldset class="nom"><input type="text"><legend>&nbsp;Nom&nbsp;</legend></fieldset>
			<fieldset class="prenom"><input type="text"><legend>&nbsp;Prénom&nbsp;</legend></fieldset>
			<fieldset class="email"><input type="text"><legend>&nbsp;E-mail&nbsp;</legend></fieldset>
			<fieldset class="telephone"><input type="text"><legend>&nbsp;Téléphone&nbsp;</legend></fieldset>
			<fieldset class="message"><input type="text"><legend>&nbsp;Message&nbsp;</legend></fieldset><br>
			<div class="conditions"><input type="checkbox" class="check">&nbsp;En soumettant ce formulaire, vous acceptez que les informations saisies soient exploitées dans le cadre de votre droit à l'oubli en contactant la société A3Web par téléphone ou par le biais du formulaire de contact.</div><br></br>
			<!-- <form action = "?" method = "POST" class="captcha" > 
				<div class = "g-recaptcha" data-sitekey = "6LfcMKgUAAAAAMuFoX_V3shUhFKeBAQUh4Up-xxg">
				</div>
			</form>	 -->
			<a  href="#" class="envoyer">ENVOYER</a>	
		</div>	
	</div>


</div>

	<div class="container3">
		<div class="fin"><a class="mentions" href="#">Mentions légales</a> • <a class="politique" href="#">Politique de confidentialité</a></div>
	</div>
</div>

</body>

</html>

ThibaudRoussel

12 juin 2019 à 12:30:27

Bonjour,

Pourrais-tu envoyer tout ton code histoire que je puisse reproduire le site pour mieux fouiller, surtout avec un bon petit inspecter l’élément.

Je pense qu'il doit y avoir un problème avec un margin ou un p qui prend un peu de place et augmente la box.

ArthurChaigne2

12 juin 2019 à 13:42:45

Re,

Voici le css:

body{
    background: #fff;
    font-family: 'Muli', sans-serif;
}

.container{
  position: fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}


/*PARTIE GAUCHE*/
/**/
.container1{
  background-image:url(fond_forme.svg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: 100% 50%;
  width:50%;
  height:96%;
  display:flex;
  flex-direction: column;
  
}

.clair{
  color:#829fbd;
  font-size:40px;
}

.fonce{
  color:#2b4156; 
  font-size:40px;
  font-weight:bold;
}

.logo{
  width: 30%;
  margin-left: 15%;
  margin-top: 7%;
}


.clair,.fonce,.cidessous{
  margin-left:15%;
  margin-right: 10%;
}

.paragraphe{
  margin-top:10%;
  font-weight: bold;
}

.recherche{
  background:#2b4156;
  color:#fff;
  text-align: center;
  border-style: none;
  margin-left:15%;
  margin-top: 3%;
  width: 36%;
  height: 8%;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 3%; 
  padding-right: 3%;
  }

.recherche:hover{
  background:#3a5772;
  cursor:pointer;
}

.recherche:active{
  background:#162c3f;
}

.loupe{
  width:7%;
}

.cidessous{
  color:#2b4156; 
  font-size:15px;
  font-weight: bold;
  margin-right: 30%;
}


/*PARTIE DROITE-HAUT*/
/**/
.container2{
  background:#2b4156 ;
  width:50%;
  height:96%;
  display:flex;
  flex-direction: column;
  z-index:1;
  /*background-image:url(pictoAvion.svg);*/
}
.souscontainer1{
  color:white;
  background-image:url(image1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 25%;
  z-index: 2;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  width: 100%;
  height: 55%;
  display:flex;
  flex-direction: column;
  justify-content: center;
}

.contact{
  border-left: 3px solid #fff;
  margin-left: 5px;
  padding-left: 2%;
  line-height: 170%;
  margin-left: 15%;
  margin-top: 10%;
}

.phrase1{
  color:#829fbd;
  background:#fff;
  font-family: 'Yellowtail', cursive;
  font-size: 3vw;
  padding-left: 4%;
  padding-top:1%;
  padding-bottom:5%;
  width: 60%;
  height: 5%;
}

.phrase2{
  font-family: 'Yellowtail', cursive;
  font-size: 50px;
  padding-left: 15%;
}


/*PARTIE DROITE-BAS */
/**/
.souscontainer2{
  color:white;
  background:#2b4156;
  flex-direction: row;
  width: 100%;
  height: 45%;
  z-index: 2;
}

input[type="text"]{
  border : 0px #fff;
  background : #2b4156;
  color:#fff;
  width: 100%;
  height: 67%;
}

fieldset{
  border:1px solid #fff;
  height: 30px;
}

.formulaire{
  margin-top: -3%;
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
}

.societe{
  width:50%;
  margin-left: 25%;
}
.nom{
  width:23%;
  margin-left: 25%;
}
.prenom{
  width: 23%;
  margin-left: 1%;
  
}
.email{
  width: 23%;
  margin-left: 25%;
}
.telephone{
  width:23%;
  margin-left:1%;
}

.message{
  width: 50%;
  height: 50px;
  margin-left: 25%;
}

.conditions{
  font-size: 0.7vw;
  margin-left: 25%;
  margin-right: 30%;
  margin-top: 1%;
}

.envoyer{
  font-family: 'Muli', sans-serif;
  color: #fff;
  font-size: 1vw;
  background:#829fbd;
  padding-top:1%;
  padding-bottom:1%;
  padding-right:1%;
  padding-left:1%;
  width: 15%;
  height: 7%;
  text-decoration: none;
  text-align: center;
  margin-top: 5%;
  margin-left: 61%;
  
}

.envoyer:hover{
  background:#A7C0DA;
}

.envoyer:active{
  background:#829fbd;
}

.avion{
  width: 13%;
  margin-top: -5%;
  margin-left: 5%;
  z-index: 3;
}

/*à introduire plus tard*/
.captcha{
  margin-left: 25%;
  margin-top: 2%;

}

/*PARTIE BAS*/
/**/
.container3{
  background: #2b4156;
  color:white;
  display:flex;
  justify-content: center;
  text-align: center;
  width:100%;
  height:4%;
}

.fin{
  margin-top:0.5%;
}

.mentions{
  text-decoration: none;
  color:white;
}

.politique{
  text-decoration: none;
  color:white;
}


@media (max-width:768px){

/*PARTIE HAUT*/
/**/
.container1{
  width: 100%;
  height: 35%;
  background-image:url(fond_forme.svg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;
}

.logo{
  width: 20%;
  margin-left: 40%;
  margin-top: 2%;
}

.clair{
  color:#829fbd;
  font-size:2.5vw;
}

.fonce{
  color:#2b4156; 
  font-size:2.5vw;
  font-weight:bold;
}

.clair,.fonce,.cidessous{
  margin-left:10%;
  margin-right: 10%;
}

.paragraphe{
  margin-top:4%;
  font-weight: bold;
}

.recherche{
  background:#2b4156;
  color:#fff;
  text-align: center;
  font-size: 10px;
  border-style: none;
  margin-left:10%;
  margin-top: 3%;
  width: 35%;
  height: 10%;
  padding-top: 1%;
  padding-bottom: 3%;
  padding-left: 1%; 
  padding-right: 1%;
  }

.recherche:hover{
  background:#3a5772;
}

.recherche:active{
  background:#162c3f;
}

.loupe{
  width:5%;
}

.cidessous{
  color:#2b4156; 
  font-size:15px;
  font-weight: bold;
  margin-right: 30%;
}

/*PARTIE MILIEU*/
/**/
.container2{
  width:100%;
  height: 62%;
}

.souscontainer1{
  width: 100%;
  height: 35%;
  background-image:url(image1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 25%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
  display:flex;
  flex-direction: column;
  justify-content: center;
}

.phrase1{
  color:#829fbd;
  background:#fff;
  font-size: 5vw;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 1%;
  padding-bottom: 1%;
  margin-bottom: 2%;
  height: 15%;
  width: 60%;
}

.phrase2{
  font-size: 5vw;
  margin-left: 20%;
}

.contact{
  font-size: 2vw;
  border-left: 3px solid #fff;
  margin-left: 5px;
  padding-left: 2%;
  line-height: 170%;
  margin-left: 15%;
  margin-top: -2%;
}

.avion{
  width: 10%;
  margin-top: -3%;
  margin-left: 2%;
}

.souscontainer2{
  color:white;
  background:#2b4156;
  flex-direction: row;
  width: 100%;
  height: 65%;
}

fieldset{
  border:1px solid #fff;
  height: 20px;
}

input[type="text"]{
  border : 0px #fff;
  background : #2b4156;
  color:#fff;
  width: 100%;
  height: 60%;
}

.formulaire{
  font-size: 13px;
}

.nom{
  width: 50%;
}

.prenom{
  width: 50%;
  margin-left: 25%;
}

.email{
  width: 50%;
}

.telephone{
  width: 50%;
  margin-left: 25%;
}

.conditions{
  font-size: 10px;
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 1%;
}

.envoyer{
  margin-left: 60%;
  /*margin-right: 25%;*/
  margin-top: 3%;
}

/*à introduire plus tard*/
.captcha{
  margin-top: -6%;
}

/*à introduire plus tard*/
.g-recaptcha {
 transform:scale(0.77);
 transform-origin:0;
 transform:scale(0.77);
 transform-origin:0 0;
 -webkit-transform:scale(0.77);
 transform:scale(0.77);
 -webkit-transform-origin:0 0;
 transform-origin:0 0;
}


/*PARTIE BAS*/
/**/
.container3{
  width:100%;
  height: 3%;
}

.fin{
  font-size: 2vw;
  margin-top: 1%;
  
}
}

/*à introduire plus tard*/
@media (max-width: 1615px) {

.g-recaptcha {
 transform:scale(0.77);
 transform-origin:0;
 transform:scale(0.77);
 transform-origin:0 0;
 -webkit-transform:scale(0.77);
 transform:scale(0.77);
 -webkit-transform-origin:0 0;
 transform-origin:0 0;
}
}

@media (max-width: 1270px) {

.g-recaptcha {
 transform:scale(0.66);
 transform-origin:0;
 transform:scale(0.66);
 transform-origin:0 0;
 -webkit-transform:scale(0.66);
 transform:scale(0.66);
 -webkit-transform-origin:0 0;
 transform-origin:0 0;
}
}

@media (max-width: 1070px) {

.g-recaptcha {
 transform:scale(0.55);
 transform-origin:0;
 transform:scale(0.55);
 transform-origin:0 0;
 -webkit-transform:scale(0.55);
 transform:scale(0.55);
 -webkit-transform-origin:0 0;
 transform-origin:0 0;
}
}

@media (max-width: 900px) {

.g-recaptcha {
 transform:scale(0.50);
 transform-origin:0;
 transform:scale(0.50);
 transform-origin:0 0;
 -webkit-transform:scale(0.50);
 transform:scale(0.50);
 -webkit-transform-origin:0 0;
 transform-origin:0 0;
}
}

@media (max-width: 810px) {

.g-recaptcha {
 transform:scale(0.45);
 transform-origin:0;
 transform:scale(0.45);
 transform-origin:0 0;
 -webkit-transform:scale(0.45);
 transform:scale(0.45);
 -webkit-transform-origin:0 0;
 transform-origin:0 0;
}

}
/**/

Et l'html:

<html>

<head>

</head>

<body>

<div class="clair">Le service </div><div class="fonce">A3W</div><div class="clair">n'est plus ouvert à la création de nouveaux sites internet</div>

<br>

<div class="cidessous">Vous pouvez toutefois rechercher les sites existants en utilisant le moteur de recherche ci-dessous.</div>

</div>

<button href="#" class="recherche"><img src="style/pictoloupe.svg" alt="" class="loupe"/> RECHERCHER UN SITE CRÉE SUR A3W</button>

</div>

<div class="phrase1">Vous avez un projet web ,</div>

<div class="phrase2">contactez-nous !</div>

</div>

<br>

Par téléphone au 02 52 45 00 10 <br> ou vous pouvez remplir le formulaire de contact ci-dessous

</div>

<fieldset class="societe"><input type="text"><legend> Société </legend></fieldset>

<fieldset class="prenom"><input type="text"><legend> Prénom </legend></fieldset>

<fieldset class="telephone"><input type="text"><legend> Téléphone </legend></fieldset>

<fieldset class="message"><input type="text"><legend> Message </legend></fieldset><br>

<div class="conditions"><input type="checkbox" class="check"> En soumettant ce formulaire, vous acceptez que les informations saisies soient exploitées dans le cadre de votre droit à l'oubli en contactant la société A3Web par téléphone ou par le biais du formulaire de contact.</div><br></br>

<!-- <form action = "?" method = "POST" class="captcha" >

</div>

</form>-->

<a href="#" class="envoyer">ENVOYER</a>

</div>

<div class="fin"><a class="mentions" href="#">Mentions légales</a> • <a class="politique" href="#">Politique de confidentialité</a></div>

</div>

</body>

</html>

ThibaudRoussel

12 juin 2019 à 14:20:43

Première réponse rapide tu devrais faire un container avec la largeur de ta div societe et tu mets tout tes input dedans comme ça tu es certain que prenom ne sera pas plus large que societe car dans un bloc limité en taille

AbcAbc6

12 juin 2019 à 14:41:22

Bonjour, Passer votre code au validateur https://validator.w3.org/#validate_by_input et corriger les erreurs.

Pour <legend> => Parents autorisés: Un élément <fieldset> dont le premier élément fils est cet élément <legend>

Il existe d'autre balise que la balise <div>; vous avez la divite!!! Choisissez vos balise en fonction de leur rôle sémantique, c'est à dire la balise <p> pour un paragraphe, il existe aussi <header>, <footer>, <aside>, <nav> etc... Voici la liste des balises.

Ou ce trouve la balise <form>? Pour un formulaire cela me parait essentiel. A moins de réalisé une vérification en JS Le bouton d’envoi ne peut être un lien!!!

Pour votre problème, 1% en plus pour la propriété width sur les class .societe et .message

ArthurChaigne2

12 juin 2019 à 15:19:02

Merci de vos réponses à tout les deux,

@AbcAbc6 je vais corriger ma mise en forme cependant les 1% sur les width n'ont pas résolus le problème :/

Je pensait à une erreur au niveau du display ou du flex.

ThibaudRoussel

12 juin 2019 à 15:42:38

oui il y a un margin-left à enlever et problème réglé mais ça implique réduire l'espace entre les deux blocs.

ArthurChaigne2

12 juin 2019 à 15:49:46

Je ne sais pas si ca vient de moi mais meme avec le margin left quand je diminue la page les cases de sont toujours pas alignées avec les autres

ThibaudRoussel

12 juin 2019 à 16:50:24

tu as vidé le cache ?

ArthurChaigne2

12 juin 2019 à 17:06:19

Oui j'ai ca en pleine fenetre:

Et ca en fenetre diminuée:

ThibaudRoussel

13 juin 2019 à 14:50:01

as-tu essayé de faire comme dit plus haut avec un container de largeur input message par exemple et la taille des inputs viendraient se fixer au container

ArthurChaigne2

13 juin 2019 à 14:52:04

Il faut que je regle la taille de mes inputs sur celle du container? Mon container a une width de 50%

ThibaudRoussel

13 juin 2019 à 15:13:03

Alors oui un petit problème dans tes blocs quand dans une ligne il doit y avoir deux inputs il faut créer un bloc pour les réunir premier truc je regarde le reste après

ArthurChaigne2

13 juin 2019 à 15:50:11

Ca marche merci en tout cas mais du coup faut que je regroupe Nom et prenom dans un display: inline-block ?

ThibaudRoussel

13 juin 2019 à 16:18:59

oui par exemple

Je te conseille d'utiliser l'inspecteur d’élément il va te permettre de voir les détails que tu ne remarques pas , mais aussi de tester tous les display, justify-content etc... en quelques secondes

ArthurChaigne2

13 juin 2019 à 16:20:21

Ça marche je vais essayer ça merci de ton aide en tout cas !

Bonne journée,