1
votes

Aligner les champs CF7 en ligne

Je travaille sur le formulaire CF7, mais j'ai un problème que j'ai besoin d'aide pour résoudre. Je veux que l'étiquette et le champ soient dans la même ligne. J'ai déjà essayé de mettre display: inline dans la classe CSS mais je n'apporte aucun changement:

<div class="register-form">
  <label> Name*
        [text* name-418] </label>

  <label> Last name*
        [text* lastname-418] </label>

  <label> Address*
        [text* address-418] </label>

  <label> Postal Code*
        [text* postalcode-418] </label>

  <label> City*
        [text* city-418] </label>

  <label> Country*
        [select* country-736 "United Kingdom" "Austria" "Belgium" "Bulgaria" "Canada" "Croatia" "Cyprus" "Czech Republic" "Denmark" "Estonia" "Finland" "France" "Germany" "Greece" "Hungary" "Ireland" "Italy" "Latvia" "Lithuania" "Luxembourg" "Malta" "Mexico" "Netherlands" "Poland" "Portugal" "Romania" "Slovakia" "Slovenia" "Spain" "Sweden" "United Arab Emirates" "United Kingdom" "United States of America"] </label>

  <label> Email*
        [email* email-638] </label>

  <label> Phone*
        [tel* telephone-531] </label>

  <label> Phone*
        [tel* telephone-531] </label>

  <label> Batch Number*
        [number* batchnumber1-616] </label>

  <label> Batch Number 2*
        [number* batchnumber2-616] </label>

  <label> Batch Number 3*
        [number* batchnumber3-616] </label>

  <h3>Workshop Information</h3>

  <label> Id/Name*
        [text* idname-418] </label>

  <label> City*
        [text* workshopcity-418] </label>

  <label> Postal Code*
        [text* workshoppostalcode-418] </label>

  <label> Phone*
        [tel* telephone2-531] </label> [acceptance acceptance1-220] Yes, I agree to the terms and conditions of the Warranty and Data Protection Policy.* [/acceptance] [acceptance acceptance2-220] I give my consent to my personal data being processed
  for the execution of commercial, promotional and/or advertising shipments, including communications by email. [/acceptance]

  <small>* Mandatory Fields</small> [submit "Register"]
</div>

et c'est tout le code de mon formulaire CF7: p >

div.register-form {
  display: inline;
  width: 50%;
}

Je veux ressembler à celui-ci un Avez-vous de l'aide ici?

css wordpress contact-form-7

0 commentaires

3 Réponses :

1
votes

Il vous suffit de suivre le code du site Compac.

.wpcf7-form label {
    text-transform: uppercase;
    font-size: 13px;
    color: #1a1a1a;
    display: block;
    position: relative;
    /* padding-bottom: 15px; */
    /* border-bottom: 2px solid #e5e5e5; */
}

Supprimer le commentaire

.wpcf7 span.wpcf7-form-control-wrap {
    float: right;
    margin-top: -30px;
    position: relative;
    width: 80%;
    border-bottom: 1px solid grey;
}

Sortie:

2 commentaires

Lorsque vous ajoutez vos codes, le formulaire ne fonctionne plus. Voir infinitistone.co.uk/test-form

Je peux voir que ce n'est pas bon sur mobile, vous pouvez ajouter des requêtes multimédias pour les séparer. Sinon, vous pouvez utiliser un système de grille comme la réponse shado. Vous devez ajouter des styles personnalisés en ce qui concerne cette réponse. La réponse a été donnée en fonction du site que vous essayiez de copier / inspirer :)

1
votes

Vous pouvez le faire avec HTML et CSS

Dans la boîte de formulaire Contact Form 7, ajoutez votre HTML. Ensuite, dans votre style CSS pour l'effet produit.

<div class="col-4"><label>Name*</label></div>
<div class="col-8">[text* name-418]</div>

1 commentaires

Comment voulez-vous dire que ça ne marche pas? Lorsque vous inspectez le formulaire, pouvez-vous voir les divs? Lorsque vous attribuez un style, sont-ils en vigueur? Avez-vous vidé votre cache?

0
votes

Utilisez les extensions Smart Grid-Layout Responsive Design pour Contact Form 7.

Il dispose d'un éditeur d'interface utilisateur qui vous permet de concevoir un formulaire sous la forme d'un ensemble de colonnes dans une ligne, chaque cellule contenant un champ.

0 commentaires