Modifying position of elements of my form

  • Profile Image
    Asked on January 20, 2014 at 04:15 PM

    Hello, here's my form

    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: 

  • Profile Image
    Answered on January 20, 2014 at 05:28 PM


    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 {



    .form-all {

    margin: 0 auto !important;



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


  • Profile Image
    Answered 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)


  • Profile Image
    Answered on January 21, 2014 at 09:11 AM

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

    {display: none !important;}

    This is my example form:

    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 on January 21, 2014 at 10:37 AM

    Thanks, worked!