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

    Modifying position of elements of my form

    Asked by Nedda on January 20, 2014 at 04:15 PM

    Hello, here's my form http://form.jotformeu.com/form/40195716779366?

    I would like to:

    1. Place the title at the centre of the form

    2. I've set the button alignment to 'centre' but still seems to stay on the left. How to fix? [SOLVED: Apparently it's a problem of translation: 'centro' doesn't work inside the code, while 'center' does.]

    3. I've disabled the yellow highlighting feature, but it still seems to be here. How to remove? [SOLVED: same as n.2, the code doesn't work with translations] Moreover, when the 'this field is required' warning text appears, everything moves away, which is pretty annoying.

    4. Stretch the 'name' and 'surname' textbox to fill with the form (aka it ends where the form ends, and maybe making both of them same size)

    5. Move the dropdown menus relatively near to their text ('classe' and 'sezione') and place them both at the middle

    6. Move Lunedì, Martedì and Mercoledì at the centre of the form (i've tried resizing the width of the whole form, but after like 550px it moves my 'sezione' dropdown menu down... sigh)

    7. Instead of the 'this field is required' text, simply highlight the area in red (as it does, but without text). If i set the warning text to none, it still shows the yellow button. Is it even possible?

     

    If you could only answer a few of this (i guess with css injection) it would be highly appreciated, thanks!

    [UPDATE] Played a bit with Firebug, here's what it should look like: 

    Page URL:
    http://form.jotformeu.com/form/40195716779366?

    elements size alignment name textbox
  • Profile Image
    JotForm Support

    Answered by jonathan on January 20, 2014 at 05:28 PM

    Hi,

    I could see that you had already injected CSS codes to your form

     /* Injected CSS Code */

    @media only screen and (max-device-width: 550px){

    .form-textbox, .form-textarea {

    width: 250px;

    }

    }

    /* Injected CSS Code */

     

    From what I can see, you are intending to use the form on mobile browser.

    I suggest you review this thread also -Making-the-Form-Display-Properly-on-Mobile-Devices as they have discussed the proper codes to use to make the form mobile responsive.

    You can also center align the fields on the form using this CSS code

    body {

    text-align:center;

    }

    .form-all {

    margin: 0 auto !important;

    }

     

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

    Thanks.

  • Profile Image

    Answered by Nedda on January 21, 2014 at 08:51 AM

    Hi, thanks for the answer. 

    The code to align the title worked well!

    I managed to understand and solve all the problems, except for n.7.

    Is there any way to remove the warning text and just let it highlight in red the section?

    Also, how can I avoid this happening? (Sections moving from the original position as seen in the pic)

    Thanks

  • Profile Image

    Answered by Cesar on January 21, 2014 at 09:11 AM

    To temove the error message. Kindly inject the following CSS Code:

    .form-error-message
    {display: none !important;}

    This is my example form:

    http://form.jotformpro.com/form/40203549963961?

    In regards to the second question? Is this happening without resizing the window?

     

    Do let us know if you need further assistance. Thank you.

  • Profile Image

    Answered by Nedda on January 21, 2014 at 10:37 AM

    Thanks, worked!