Ondersteuning » Plugin vragen » Contact form 7 layout aanpassen

  • Ik krijg maar niet alles in de moderne layout…
    Probleem zit volgens mij in de checkbox en de teksten die ik achter de nummervelden wil hebben.
    De code die ik heb is als volgt:

    <div class="aux-modern-form">
    <div class="aux-row aux-de-col3 aux-tb-col1 aux-mb-col1">
        <div class="aux-input-group aux-col">
            [text* your-name id:name]
            <label for="name">Uw naam</label>
            <div class="aux-modern-form-border"></div>
        </div>
     
        <div class="aux-input-group aux-col">
            [email* your-email id:email]
            <label for="email">E-mail</label>
            <div class="aux-modern-form-border"></div>
        </div>
       <div class="aux-input-group aux-col">
            [tel your-tel id:phone]
            <label for="phone">Telefoonnummer</label>
            <div class="aux-modern-form-border"></div>
        </div>
    </div>
    <div class="aux-row aux-de-col1 aux-tb-col1 aux-mb-col1">
        <div class="aux-input-group aux-col">
            [text text-240 id:bedrijfsnaam]
            <label for="bedrijfsnaam">Bedrijfsnaam</label>
            <div class="aux-modern-form-border"></div>
        </div>
    </div>
    <div class="aux-modern-form">
    <div class="aux-row aux-de-col3 aux-tb-col1 aux-mb-col1">
        <div class="aux-input-group aux-col">
            [text* your-name id:adres]
            <label for="adres">Adres</label>
            <div class="aux-modern-form-border"></div>
        </div>
     
        <div class="aux-input-group aux-col">
            [text* postcode id:postcode]
            <label for="postcode">Postcode</label>
            <div class="aux-modern-form-border"></div>
        </div>
       <div class="aux-input-group aux-col">
            [text* plaats id:plaats]
            <label for="plaats">Plaats</label>
            <div class="aux-modern-form-border"></div>
        </div>
    </div>
    
    <div class="aux-row aux-de-col1 aux-tb-col1 aux-mb-col1">
        <div class="aux-input-group aux-col">
            [checkbox checkbox-761 use_label_element "NEN1010" "NEN3410" "NTA8220" "Thermografie" "Inspectieplan" id:inspectietype]
            <label for="inspectietype">Type inspectie</label>
            <div class="aux-modern-form-border"></div>
        </div>
    </div>
    
    <div class="aux-modern-form">
    <div class="aux-row aux-de-col4 aux-tb-col1 aux-mb-col1">
        <div class="aux-input-group aux-col">
            [number m2kantoor id:m2kantoor]
            <label for="m2kantoor">Kantoor</label> M2
            <div class="aux-modern-form-border"></div>
        </div>
     
        <div class="aux-input-group aux-col">
            [email* your-email id:email]
            <label for="email">E-mail</label>
            <div class="aux-modern-form-border"></div>
        </div>
       <div class="aux-input-group aux-col">
            [tel your-tel id:phone]
            <label for="phone">Telefoonnummer</label>
            <div class="aux-modern-form-border"></div>
        </div>
    </div>
    <label> [number number-556] M2 Kantoor </label> <Label> [number number-556] M2 Werkplaats </label> <label> [number number-556] M2 Magezijn </label>
    Aantal eenheden (bij benadering)
    <label> [number number-556] Verdeelinrichtingen </label> <label> [number number-556] Eindgroepen </label> <label> [number number-556] Aardlekbeveiligingen </label> <label> [number number-556] Schakel-/Besturingskasten </label>
    
    <label> Aanvullende opmerkingen (optioneel)
        [textarea your-message] </label>
    
    <label> Bijlagen zoals foto's en plattegronden
         [file file-935][file file-935][file file-935][file file-90][file file-90][file file-90]</label>
    
    [submit "Verzenden"]

    Kan iemand mij helpen met de juiste code

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

1 reactie aan het bekijken (van in totaal 1)
  • Hoi,

    Duurde even om dit uit te zoeken.. Het gaat fout bij het nummerveld van “Kantoor M2”. Dat type veld (number) heeft een andere hoogte dan de 2 tekst/e-mail velden die ernaast staan.
    Dus deze moet je wijzigen in ander type of verplaatsen:

    
    [number m2kantoor id:m2kantoor]
    

    Ook zie ik meer kleine foutjes in je code:

    1) Alleen bovenaan container <div class="aux-modern-form"> en dit helemaal onderaan afsluiten met </div>.

    2) Niet dit: <label for="m2kantoor">Kantoor</label> M2
    Maar dit: <label for="m2kantoor">Kantoor M2</label>

    3) Boven rij Kantoor M2 / E-mail / Telefoonnummer heb je de shortcode van 4 kolommen staan, ipv 3 kolommen.

    Guido

1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘Contact form 7 layout aanpassen’ is gesloten voor nieuwe reacties.