Bonjur a tous, j'ai un probleme sur l'affichage d'un champ chekbox . Ca ne s'aligne pas bien je ne sais pas pourquoi. J'ai passer l'aprem dessus ça me rend fou ahah.
Si quelqu'un peut m'aider ? Je pense que c'est juste une ligne CSS.
Voici le code :
html
<div class="cf7-row">
<div class="cf7-col-full">
<label> Vous êtes
[select* type-client include_blank
"Particulier"
"Entreprise"]
</label>
</div>
</div>
<div class="cf7-row">
<div class="cf7-col">
<label> Votre nom
[text* your-name autocomplete:name]
</label>
</div>
<div class="cf7-col">
<label> Votre prénom
[text* your-surname autocomplete:name]
</label>
</div>
</div>
<div class="cf7-row">
<div class="cf7-col">
<label> Votre e-mail
[email* your-email autocomplete:email]
</label>
</div>
<div class="cf7-col">
<label> Téléphone
[tel* your-phone autocomplete:tel]
</label>
</div>
</div>
<div class="cf7-row">
<div class="cf7-col">
<label> Date de l’événement
[date* date-evenement]
</label>
</div>
<div class="cf7-col">
<label> Adresse de l’événement
[text* lieu-evenement autocomplete placeholder "Adresse complète (ville incluse)"]
</label>
</div>
</div>
<div class="cf7-row">
<div class="cf7-col">
<label> Type d'événement
[select* type-evenement include_blank
"Anniversaire"
"Mariage"
"Baptême"
"Soirée d'entreprise"
"Autre"]
</label>
</div>
<div class="cf7-col">
<label> Type de borne
[select* type-borne include_blank
"Modèle compact (sur table) - Pack 150 photos"
"Modèle compact (sur table) - Pack 300 photos"
"Modèle grande capacité (sur pied) - Pack 250 photos"
"Modèle grande capacité (sur pied) - Pack 400 photos"]
</label>
</div>
</div>
<div class="cf7-row">
<div class="cf7-col-full options-checkbox">
<label> Options souhaitées</label>
[checkbox options use_label_element
"Arrière-plan"
"Design photo personnalisé"
"Aucune"]
</div>
</div>
<div class="cf7-row">
<div class="cf7-col-full">
<label> Message complémentaire (facultatif)
[textarea your-message]
</label>
</div>
</div>
[submit class:btn-devis "Demander un devis"]
CSS
.deux-colonnes {
display:flex;
flex-direction:row;
column-gap:20px;
width:100%;
}
.deux-colonnes input,
.deux-colonnes select,
.deux-colonnes textarea
{
color: #999;
background-color: #eee;
padding: 16px 20px 16px 16px;
font-size: 14px;
box-sizing: border-box;
border-radius: 10px;
border-color: #eee;
}
.une-colonne input,
.une-colonne select,
.une-colonne textarea
{
color: #999;
background-color: #eee;
padding: 16px 20px 16px 16px;
font-size: 14px;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
border-color: #eee;
}
.cf7-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.cf7-col {
width: 50%;
}
.cf7-col input,
.cf7-col select,
.cf7-col textarea {
width: 100%;
color: #999;
background-color: #eee;
padding: 16px 20px 16px 16px;
font-size: 14px;
box-sizing: border-box;
border-radius: 10px;
border-color: #eee;
}
.cf7-col-full {
width: 100%;
}
.cf7-col-full input,
.cf7-col-full select,
.cf7-col-full textarea {
width: 100%;
color: #999;
background-color: #eee;
padding: 16px 20px 16px 16px;
font-size: 14px;
box-sizing: border-box;
border-radius: 10px;
border-color: #eee;
}
.btn-devis {
color: #FFFFFF;
padding: 16px 20px 16px 16px;
font-size: 16px;
font-weight:bold;
box-sizing: border-box;
border-radius: 10px;
border-width: 0px;
background-color: #f2592b;
width:100%;
}
/* Responsive mobile */
@media (max-width: 768px) {
.cf7-row {
flex-direction: column;
}
.cf7-col {
width: 100%;
}
}
Si quelqu'un peut m'aider ? Je pense que c'est juste une ligne CSS.
Voici le code :
html
<div class="cf7-row">
<div class="cf7-col-full">
<label> Vous êtes
[select* type-client include_blank
"Particulier"
"Entreprise"]
</label>
</div>
</div>
<div class="cf7-row">
<div class="cf7-col">
<label> Votre nom
[text* your-name autocomplete:name]
</label>
</div>
<div class="cf7-col">
<label> Votre prénom
[text* your-surname autocomplete:name]
</label>
</div>
</div>
<div class="cf7-row">
<div class="cf7-col">
<label> Votre e-mail
[email* your-email autocomplete:email]
</label>
</div>
<div class="cf7-col">
<label> Téléphone
[tel* your-phone autocomplete:tel]
</label>
</div>
</div>
<div class="cf7-row">
<div class="cf7-col">
<label> Date de l’événement
[date* date-evenement]
</label>
</div>
<div class="cf7-col">
<label> Adresse de l’événement
[text* lieu-evenement autocomplete placeholder "Adresse complète (ville incluse)"]
</label>
</div>
</div>
<div class="cf7-row">
<div class="cf7-col">
<label> Type d'événement
[select* type-evenement include_blank
"Anniversaire"
"Mariage"
"Baptême"
"Soirée d'entreprise"
"Autre"]
</label>
</div>
<div class="cf7-col">
<label> Type de borne
[select* type-borne include_blank
"Modèle compact (sur table) - Pack 150 photos"
"Modèle compact (sur table) - Pack 300 photos"
"Modèle grande capacité (sur pied) - Pack 250 photos"
"Modèle grande capacité (sur pied) - Pack 400 photos"]
</label>
</div>
</div>
<div class="cf7-row">
<div class="cf7-col-full options-checkbox">
<label> Options souhaitées</label>
[checkbox options use_label_element
"Arrière-plan"
"Design photo personnalisé"
"Aucune"]
</div>
</div>
<div class="cf7-row">
<div class="cf7-col-full">
<label> Message complémentaire (facultatif)
[textarea your-message]
</label>
</div>
</div>
[submit class:btn-devis "Demander un devis"]
CSS
.deux-colonnes {
display:flex;
flex-direction:row;
column-gap:20px;
width:100%;
}
.deux-colonnes input,
.deux-colonnes select,
.deux-colonnes textarea
{
color: #999;
background-color: #eee;
padding: 16px 20px 16px 16px;
font-size: 14px;
box-sizing: border-box;
border-radius: 10px;
border-color: #eee;
}
.une-colonne input,
.une-colonne select,
.une-colonne textarea
{
color: #999;
background-color: #eee;
padding: 16px 20px 16px 16px;
font-size: 14px;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
border-color: #eee;
}
.cf7-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.cf7-col {
width: 50%;
}
.cf7-col input,
.cf7-col select,
.cf7-col textarea {
width: 100%;
color: #999;
background-color: #eee;
padding: 16px 20px 16px 16px;
font-size: 14px;
box-sizing: border-box;
border-radius: 10px;
border-color: #eee;
}
.cf7-col-full {
width: 100%;
}
.cf7-col-full input,
.cf7-col-full select,
.cf7-col-full textarea {
width: 100%;
color: #999;
background-color: #eee;
padding: 16px 20px 16px 16px;
font-size: 14px;
box-sizing: border-box;
border-radius: 10px;
border-color: #eee;
}
.btn-devis {
color: #FFFFFF;
padding: 16px 20px 16px 16px;
font-size: 16px;
font-weight:bold;
box-sizing: border-box;
border-radius: 10px;
border-width: 0px;
background-color: #f2592b;
width:100%;
}
/* Responsive mobile */
@media (max-width: 768px) {
.cf7-row {
flex-direction: column;
}
.cf7-col {
width: 100%;
}
}