How do I create a Unique Title for each Page in a Multi-Page Form?

Get Help
,
1

Background:
I’ve created a multi-page form with a total of 3 pages.

Objective:
I want each page to have a unique title. When the user clicks “next” a new page title should populate. Overall, I want to be able to give my users step-by-step instructions as they complete each page. How do I do this?

Problem:
Currently, the Form Title and Form Description (in Form Settings) occupies every page in the multi-page form. I don’t like this, I want to change it.

2

The actual WordPress page title is outside of Gravity Forms, so you won’t be able to change that title from within the form.

On the form itself, on the first page field, select “none” for the progress indicator. That will turn off the step numbers or a progress indicator.

Then, as the first field after each page break, add an HTML field, and in that HTML field add your Title (with a Heading tag) and also your description (with paragraph tags and other markup if you like. That way, on each Page of the form, you can show a unique title and instructions. Then, elect NOT to show the form title and form description, when you embed the form.

If you have any other questions about the configuration, please let us know.

3

Wonderful, thank you Chris!

  1. Is it possible to make the “Submit” and “Next” buttons 100% width? It seems to be responsive on mobile view. However, on desktop view it appears to be a fixed width. Overall, I wish the buttons were the same width as my fields.
    See here: https://imgur.com/a/CgLlGIA

  2. Is it possible to make my form field (Single Line Text) larger height wise? (not width wise)

4

Can you please share a link to the page on your site where we can see the form?

5

How do I do that privately? Thank you

6

You can send an email to chris@rocketgenius.com. Be sure to reference this post. Thank you.

7

Thanks Chris – I emailed you. If you didn’t get it, please check your spam folder.

8

I received your email. To make the buttons the same width as the fields above, you can add this CSS:

@media only screen and (min-width: 641px) {
	body .gform_wrapper .gform_next_button, 
	body .gform_wrapper .gform_button{
		width: calc(50% - 8px)!important;
	}
}

That can be added to your theme stylesheet or via the Appearance Customizer (Appearance > Customize > Additional CSS).

To make the inputs taller, you can add this CSS:

@media only screen and (min-width: 641px) {
	body .gform_wrapper .gform_next_button, 
	body .gform_wrapper .gform_button{
		width: calc(50% - 8px)!important;
	}
	body .gform_wrapper input[type="text"] {
		height: 60px;
	}
}

I combined them both into one snippet so you can just use this version.

9

Awesome! Thanks so much Chris! Have a great weekend!

1 Like