Como dividir un campo en subcampos para la entrada de datos

  • Profile Image
    chemast
    Asked on June 20, 2013 at 10:22 AM

    Como consigo lo indicado en la imagen ejemplo para el campo Cuenta Corriente del formulario adjunto?.

    Muchas gracias

  • Profile Image
    KadeJM
    Answered on June 20, 2013 at 10:59 AM

    Hello, I'm not quite sure I fully understand what you speak of other then it seems to me like you wish to split the " Cuenta Bancaria " field up into 4 different sections perhaps? Please correct me if I am misunderstanding your question and problem. If that's correct though it might be better just to separate it all into 4 actual Textboxes and then shrink them all down so that they are on the same line.

  • Profile Image
    chemast
    Answered on June 20, 2013 at 12:29 PM

    Hola KadeJM,

    Si es eso lo que quiero. Como puedo conseguir que los 4 campos esten juntos como en la imagen, con muy poco espacio entre ellos?.

    Gracias

  • Profile Image
    moonzkie
    Answered on June 20, 2013 at 01:05 PM

    Hi,

    This is possible by injecting CSS codes to your form.

    Here is an example on what you can achieve: http://form.jotform.co/form/31704607759864

    This is what I have added on the CSS field:

    #label_1 { visibility: hidden; margin-left: -200px;}

    #input_1 { margin-left: -70px;}

    You will have to edit the field number and the margins to make it look good on your form. 

    You will also have to use the shrink function to have the side by side.

    Thank you.

  • Profile Image
    chemast
    Answered on June 20, 2013 at 02:40 PM

    Gracias pero no lo consigo.

    Podría enviarme el formulario del ejemplo en modo edicion para ver el código?

  • Profile Image
    jonathan
    Answered on June 20, 2013 at 03:38 PM

    @chemast

    You can clone the sample form of our colleague Moonskie to see the form's code.

    Use this guide (How-to-clone-an-existing-form-from-a-URL) for the form http://form.jotform.co/form/31704607759864

    If you do this, you should be able to see the CSS code

    #label_1 { visibility: hidden; margin-left: -200px;}

    #input_1 { margin-left: -70px;}

    #label_4 { visibility: hidden; margin-left: -200px;}

    #input_4 { margin-left: -75px;}

    #label_5 { visibility: hidden; margin-left: -200px;}

    #input_5 { margin-left: -98px;}

    Hope this help. Inform us if you need further assistance.

    Thanks.

     

  • Profile Image
    jeanettebmz
    Answered on June 20, 2013 at 05:04 PM

    @chemast

    Moonzkie te puso el formulario que ella hizo de ejemplo, lo puedes ver aqui   y tambien lo puedes clonar

  • Profile Image
    chemast
    Answered on June 21, 2013 at 11:16 AM

    Gracias pero NO lo consigo.

    He clonado el formulario que han hecho y al tocar el codigo CSS ya no funciona aunque vuelva a poner los mismos parametros.

    http://form.jotformpro.com/form/31714780423956

    Pueden decirme que esta mal?

  • Profile Image
    jefreylandicho
    Answered on June 21, 2013 at 11:46 AM

    He creado una forma de clon bajo su cuenta para facilitar la referencia del título Form "CLONE FORMULARIO POR JotForm" que se puede encontrar en este enlace o en el interior de sus myForms.

    Si usted todavía tiene problemas, por favor póngase en contacto con nosotros de nuevo.

  • Profile Image
    chemast
    Answered on June 21, 2013 at 12:07 PM

    Thanks but when I play CSS stops working, even without changing anything. Look at the form. What am I doing wrong?

  • Profile Image
    dinesh-it
    Answered on June 21, 2013 at 12:34 PM

    Hi, I have Edited the CSS Code - Just I removed some unwanted spaces in the code and I think it is working fine now.

    See you form "CLONE FORM BY JOTFORM" now.

    Thank you.

  • Profile Image
    chemast
    Answered on June 21, 2013 at 12:58 PM

    When you open "inject custom CSS" in edit mode without touching anything, and close setting, it stops working.

  • Profile Image
    dinesh-it
    Answered on June 21, 2013 at 01:08 PM

    It Seems the code again changed. I think there may be chaching issue. I request you to please clear your browser cache, Login again and check your form.

    This is how your Code looks after I Made change:

     

    Can You please give a try and let us know the result.

    Please provide us some screen shots if still you have the same issue.

    Thank you.

  • Profile Image
    chemast
    Answered on June 22, 2013 at 07:47 AM

    Sorry, it disturbs all the CSS code editing mode and no longer works.

    Open cloned Form and open "configuration / inject Custom CSS" and you can see.

  • Profile Image
    jefreylandicho
    Answered on June 22, 2013 at 10:09 AM

    Please refrain from adding a space between the number sign(#) and the label text  e.g.

    # Label_1 should be #label_1

    I have revert the CSS coding back and it should be fix by now.  Please contact us again if you need further assistance.