Image Separator In Form

  • Profile Image
    Asked on February 26, 2011 at 07:40 AM

    Hi. I have a one page form which I want to create the illusion that it is in 3 parts by using background graphics (simple boxes with curved corners). This works great until the form complains of any fields that haven't been correctly filled in, and the warning notices for each field makes the form expand sending everything out of alignment with the background graphics.

    The temporary solution is to have one big box (background graphic) that is big enough to allow for warning messages on all the fields. I would still very much like to create the illusion of 3 seperate sections to the form on the page, so I have created a white 'spacer' graphic that I have inserted into the form.

    I have now discovered that in order to make this work I must find a way of 'Indenting' everything on the form (fields, titles etc) except for the graphic. Take a look at the bottom of section 1 on my form to see the graphic. The blue background is on my website.

    Can this be done. I would really appreciate any help you can offer




  • Profile Image
    Answered on February 26, 2011 at 09:44 AM

    Hi Ian

    I just took at look at the form and would sugget that you split the form into a number of pages as it looks like a long form


  • Profile Image
    Answered on February 26, 2011 at 11:14 AM

    Hi. One of the features on my site is that I emphasize the fact that the process only takes 3 stages. I really would like this to be one form on one page. Are there any negative effects from having a form with 6 field sections?

    If I could indent the fields and titles then It would solve my problem.

    Any pointers on what CSS command to use would be appreciated.



  • Profile Image
    Answered on March 01, 2011 at 07:02 AM


    I suggest you to use "Form Collapse" under "Servey Tools". This is an example:


    Or can change them by injecting css like this:

    .form-header {
    1. font-size30px;