Different Layout for multipage Forms « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

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
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
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