Please help me adding a Drop Down to my multiple fields form

  • digimarketingcolombia
    Asked on January 23, 2017 at 1:22 PM
     
    Hi,  I need to add this Drop Down to the form I already have published at  https://form.jotformz.com/70015321264644 but it doesn´t appear and fit. Please, help me.
     
    The Drop Down needs to go after the third field and will have six options.
     
    1. Nombre: text 
    2. Apellidos: text
    3. Documento: text
    New drop down field: Rango de edad: Menor de 20, de 21 a 30, de 31 a 40, de 41 a 50, de 51 a 60, mayor de 60.
    4. e-mail: text
    5. Empresa u organización: text
    6. Cargo: text
    7. Ciudad: text 
    8. Teléfono: text
     
    Here´s the actual CSS code:
     
    #list > tbody > tr:first-child {
     
        display: none;
     
    }
     
    td.col1:before {
     
         content: "Nombre:*";
     
         display: block;
     
    }
     
    td.col2:before {
     
         content: "Apellidos:*";
     
         display: block;
     
    }
     
    td.col3:before {
     
         content: "No. de documento:*";
     
         display: block;
     
    }
     
    td.col4:before {
     
         content: "E-mail*";
     
         display: block;
     
    }
     
    td.col5:before {
     
         content: "Empresa u organización";
     
         display: block;
     
    }
     
    td.col6:before {
     
         content: "Cargo";
     
         display: block;
     
    }
     
    td.col7:before {
     
         content: "Ciudad";
     
         display: block;
     
    }
     
    td.col8:before {
     
         content: "Teléfono";
     
         display: block;
     
    }
     
    td.col5 {
     
         float: left;
     
         left: -500px;
     
         position: relative;
     
         top: 70px;
     
    }
     
    tr {
     
         height: 150px;
     
    }
     
    td.col1 {
     
         position: relative;
     
         top: 17px;
     
    }
     
    td.col2 {
     
         position: relative;
     
         top: 17px;
     
    }
     
    td.col3 {
     
         position: relative;
     
         top: 17px;
     
    }
     
    td.col4 {
     
         position: relative;
     
         top: 17px;
     
    }
     
    td.col6 {
     
         float: left;
     
         left: -365px;
     
         position: relative;
     
        top: 32px;
     
    }
     
    td.col7 {
     
         float: left;
     
         left: -230px;
     
         position: relative;
     
         top: -7px;
     
    }
     
    td.col8 {
     
         float: left;
     
        right: 100px;
     
         position: relative;
     
         top: -45px;
     
    }
     
    Page URL: https://form.jotformz.com/70015321264644
  • David JotForm Support
    Replied on January 23, 2017 at 3:06 PM

    I am looking into CSS to clean this up.  I will get back to you as soon as I have it.

  • digimarketingcolombia
    Replied on January 23, 2017 at 3:16 PM

    Thank You very much. I appreciate your help ASAP!

  • David JotForm Support
    Replied on January 23, 2017 at 3:52 PM

    I had to shorten a couple of the title but here is the code for the widget:

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8, td.col9 {
    display:inline-block;
    float: left;
    padding: 20px 5px 1px 1px;
    }

    td.col1:before { content: "Nombre:"; width: 20%; }
    td.col2:before { content: "Apellidos:"; width: 20%; }
    td.col3:before { content: "Documento:"; width: 20%; }
    td.col4:before { content: "Rango:"; width: 20%; }
    td.col5:before { content: "e-mail:"; width: 20%; }
    td.col6:before { content: "organización:"; width: 20%; }
    td.col7:before { content: "Cargo:"; width: 20%; }
    td.col8:before { content: "Ciudad:"; width: 20%; }
    td.col9:before { content: "Teléfono:"; width: 20%; }

    td.col1 { width: 20%; }
    td.col2 { width: 20%; }
    td.col3 { width: 20%; }
    td.col4 { width: 20%; }
    td.col5 { width: 20%; }
    td.col6 { width: 20%; }
    td.col7 { width: 20%; }
    td.col8 { width: 20%; }
    td.col9 { width: 20%; }

    th { display: none; }

    With this as the file configuration:

    Nombre: text
    Apellidos: text
    Documento: text
    Rango de edad : dropdown : Menor de 20, de 21 a 30, de 31 a 40, de 41 a 50, de 51 a 60, mayor de 60
    e-mail: text
    Empresa u organización: text
    Cargo: text
    Ciudad: text
    Teléfono: text

    It should look like this:

    Please help me adding a Drop Down to my multiple fields form Image 1 Screenshot 20

    But I seem to be having some trouble getting the labels to appear correctly.  I will look for a solution when I have more time.

  • digimarketingcolombia
    Replied on January 24, 2017 at 10:03 AM

    Thank you very much for your help, I will replace the code in order to check the form.