PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Different Layout for multipage Forms

  1. heimo
    Member

    Hi. I want to create a multipage form where I have 3 input fields on the first section. I want that first section to be a bit more visually appealing. In sections 2 and 3 i want a more traditional design.

    Since the sections are loaded via jQuery and are not really on different sections I run into the problem that i cannot apply different styles.

    Particularly i want to style the .main class which will contain the multipage form. Does any of you know how to solve it?

    My theme uses different body classes for different pages. So maybe I should create 3 different forms which are connected with redirects.

    Or am I leading in a completely wrong direction?

    Posted 11 years ago on Monday April 22, 2013 | Permalink
  2. Richard Vav
    Administrator

    You can style the inputs on each page of a multi-page form differently because each page is wrapped in it's own div which is assigned a unique id.

    For example to target just text inputs on page 1 you can target them by specifying the page number in the css selector like so, the first number is your form number and the second number is the page number.

    .gform_wrapper #gform_page_1_1 input[type=text] {
        border: 1px solid red;
    }

    So the following example is how you would just target the text inputs on page two of the multi-page form

    .gform_wrapper #gform_page_1_2 input[type=text] {
        border: 1px solid blue;
    }

    Regards,
    Richard
    --
    Just another member of the community helping out where I can

    Posted 11 years ago on Monday April 22, 2013 | Permalink
  3. heimo
    Member

    Thanks a lot for your reply. That is something I already figured out. Maybe I was not clear enough on what to design :) My problem is, that I want to style the <div class="main"> differently for the different sections/pages. Is it possible to somehow implement a class to the body tag according to the ID of the form section.

    Like:

    ID: #gform_page_1_1
    >>> <body class="main-gform-page-1-1"> or similar

    That would be awesome since it's not possible to style parent tags with CSS.

    Posted 11 years ago on Monday April 22, 2013 | Permalink