• Hello !

    I have a little tiny problem, I made a contact form and I want the input fields to be justified.
    Here is the current look:

    http://s28.postimg.org/ihnai5yel/Capture_d_e_cran_2015_12_11_a_13_13_19.png

    How could I do that in CSS without having to manually set the size of the input fields (it won’t be justified anyway). I tried many things, I’ve looked for other threads/replies but none of them applies to my problem since I have 2 or more fields by line.

    Here are my current codes:

    .wpcf7-submit {
      margin-top: 0px;
      padding: 30px 180px !important;
      font-size: 22px !important;
      font-weight: bold !important;
      line-height: 1.3333333;
      border-radius: 6px;
      background-color: #0092d7 !important;
      color: #FFFFFF !important;
      border: 0px !important;
    }
    
    .wpcf7 select {
        background-color: #FFFFFF;
        border: 1px solid #ccc;
        border-radius: 0px !important;
        margin-right: 5px !important;
        width: 90px;
        height: 32px;
    
    }
    
    #tirage{
        font-family: 'Open Sans';
        background-image: url("img/bg_tirage.jpg");
        background-repeat: no-repeat;
    
    }
    
    #tirage-header{
        padding-left: 68px;
        padding-top: 45px;
        padding-bottom: 25px;
        width: 89%;
    }
    
    #tirage-form{
        font-family: 'Open Sans';
        padding-left: 20px;
        padding-bottom: 100px;
        font-weight: bolder;
    }

    in the CF7 style.css

    And in the CF7 form :

    <div id="tirage">
    <div id="tirage-header">
    
    <img src="../img/header.png">
    </div>
    <div id="tirage-form">
    [select* intitule "M." "Mme"][text* nom size:35 placeholder "Votre nom"][text* prenom size:35 watermark "Votre prénom"]
    Date de naissance : [date* date-de-naissance "JJ/MM/AAAA"][email* email watermark "Adresse mail"]
    [text* adresse watermark "Adresse"]
    [tel* code-postal maxlength:5 watermark "Code postal"][text* ville watermark "Ville"]
    [text* pays watermark "Pays"][tel* telephone maxlength:12 watermark "Numéro de téléphone"]
    [submit "Envoyer"]
    </div>
    </div>

    Thank you 🙂

The topic ‘[Contact Form 7] Align the input fields properly’ is closed to new replies.