What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by digimarketingcolombia on January 23, 2017 at 01: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

  • Profile Image
    JotForm Support

    Answered by david on January 23, 2017 at 03:06 PM

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

  • Profile Image

    Answered by digimarketingcolombia on January 23, 2017 at 03:16 PM

    Thank You very much. I appreciate your help ASAP!

  • Profile Image
    JotForm Support

    Answered by david on January 23, 2017 at 03: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:

    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.

  • Profile Image

    Answered by digimarketingcolombia 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.