Linked Forms on different pages

I want to create 2 forms that are linked together. On the home page, the prospect would enter 2 fields of information, on submit they would go to a second page where they enter in a few more fields of information - on submit on that page - the information is submitted to webmaster. Is this possible with gravity forms?

Hi Alyson. Yes, you can do that in Gravity Forms. This is the method you would use:

Please let us know if you need assistance making that happen.

Thanks Chris for the info. Will go ahead with purchase. Fingers crossed I can work it out. But I may need your help.

ok - I must be going crazy as this is not entirely easy. I want to add form to a revolution slider…I want three fields on the first form…email and two date fields. I want the email field to be on top and the two date fields on the bottom - the email field should be the same length as the two email fields. I want to be able to change the color of the label font.

I have tried all options for the lay out fields on the form but nothing seems to do what I am tryin to do. Cannot find font color change option anywhere. I cannot find any help on adding to a revolution slider. What am i missing?

Hi Alyson. Why don’t you just use Gravity Forms’ built-in pages? Or does it have to be two different WordPress pages?

As for having the email field on top and the two date fields below etc. - you can control that with Gravity Forms CSS Ready Classes.

The label text color you could change using custom CSS as well, if you have some CSS knowledge. If not, I could try to help.

I tried using the css sizes but the email field comes out bigger than the two date fields. I was kinda hoping that changing font color would be a setting not css. Here is a link to the page. I have embedded one form at the bottom of the page under the We are ready to Serve You section. You will see what I mean and font color.

I actually want the two forms to be on the same page but too be separate forms – you hit submit on first form and it then comes up with second form. Once they hit submit again all information will be emailed in. In fact want them to be on the rev slider at the top.

Just watched a some videos on a a page and it seems like I am missing a lot of features…such as resizing fields and drop zones. https://docs.gravityforms.com/working-with-columns/ I cannot do this.

Looks like there is something wrong with my install. So I reinstalled and same thing. Please help!

Let me know if you need an admin login.

Sorry here is the link to the page https://universalautoshipping.com/home-with-form/

Hi Alyson.

If it’s a development site please go ahead and provide me an admin login. If I do anything I’ll explain what I did. You can PM me the details.

There are a lot of features that I myself would have liked to be standard in Gravity Forms, but apparently the next major version will be a big improvement (or so I’m led to believe).

By the way, those features you say you’re missing are from version 2.5 Beta. Version 2.5 is the upcoming major version of Gravity Forms, that I mentioned above.

1 Like

Hi Alyson,

I attempted logging in but was greeted by this:

It could indicate an issue with one or more theme(s) or plugin(s). You can read this page on how to fix it:

Please try again – it let me login fine from a incognito window and from a different browser. thanks

Ok so I was able to login from an incognito browser. Strange…

To illustrate what could be done I added Form 2 at the bottom of that page (didn’t want to fool around with Form 1 which seems to be on the current home page.

I used the form’s field Appearance settings, the Gravity Forms CSS Ready Classes and some custom CSS on the page to make the form look like this:

The custom CSS I used can be found in the Page Settings, opened by clicking the little “gear” icon at the top right of the editor area (backend or frontend):

Ignore the little warning triangles - those aren’t always right. Editing the CSS the way suggested by them will break it.

Now I have a couple of serious reservations:

  1. Adding a form to an auto-scrolling slider is a bad idea. The user might not complete and submit the form fast enough to beat the scroll, and the first time his form’s swiped from under his nose he’s back to Google to find a different site. Personally I would just put a good, strong call to action in there that causes the page to scroll down to the form at the bottom - but that’s just me. :wink:

  2. It is possible, but may I ask why you would want to use two forms in tandem, and not use Gravity Forms’ built-in pages? Do you want to capture the first submit? It is possible to send notifications when the Next button is clicked on a two-page form, just so you know, in case that might be what you’re after. If you use two different forms you’re going to have two sets of entries, which might not be ideal.

Anyway, please let me know what you think.

BTW - I don’t work for Gravity Forms :slight_smile:

Is there a reason I cannot drag and drop and drag to resize?

That function is not available in Gravity Forms. It might be available in v2.5, I don’t know - haven’t really been bothered to check it out yet.

Hi Phil – so sorry I thought you were a gravity forms guy responding to my ticket – I really really appreciate your help.

Good point about the auto slider! Might change it to just have one.

We want to have two linked forms so that the client is not hit with a lot of fields to complete and to also take them to a second page with more information when they are filling in the final fields…drip feed option so to speak. When they say two pages, does it split the form onto two different web pages?

Thanks again!

Alyson

Hi Alyson,

You can split the Gravity Forms process into several pages if you wanted - but two would suffice in your case.

You simply drag the “Page” field into your form where you want to split it:

That will then create three “page control sections” - the main page control at the top of the form where you’ll set the type of progress bar you want (or none, if you don’t want one), the end of the new page at the bottom (which is also the end of the form if you only have two pages) and the section where your first page ends and your second page starts. There you can tell it what you want the buttons to be called - by default they’re “Back” and “Next”. It works really well and if your form is Ajax-enabled the transition is nice and smooth.

If you want to try go ahead and I could take a look again to help out later if you want.

Phil

1 Like

Hi Phil – tried to follow what you did for the second page of the form but with no luck…suggestions?

Thanks

Alyson

Please do not share login information in a post in this public forum. Alyson, I recommend changing any password you may have shared, or deleting the login. Thank you.

Hi Chris – are you able to help me finish off the multi page gravity form…I am not sure I follow the css code that pete put in…

Hi Alyson - what do you need help with? Can you summarize here so I can be sure to address the correct issue? Thank you.

Sure – so I have a 2 page form…but formatting is has been hard – columns are not lining up and it looks un professional. My css is lacking I admit. I did not realize that gravity forms was so dependent on css programming.

I want the fields on page 2 to fill the full width of the form like the first page does.

Below is the code that was placed in the settings of the page – I need to extend these to page 2 but cannot see how the code applies to the fields I created on the form.

Form at the moment is at the bottom of the page

https://universalautoshipping.com/home-with-form/

Thanks for your help.

/* BEGIN GRAVITY FORMS CSS CODE */
.gform_wrapper .gf_progressbar_wrapper {
	display: none;
}
.gform_wrapper ul.gform_fields li.gfield {
	padding-right: 0px;
}
.gform_wrapper .top_label li.gfield.gf_left_half {
	padding-right: 8px;
	margin-top: 0px;
}
.gform_wrapper .top_label li.gfield.gf_right_half {
	padding-right: 0px;
	padding-left: 8px;
	margin-top: 0px;
}
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
	font-size: 14px;
	padding: 10px;
}
.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type="submit"], .gform_wrapper .gform_page_footer .button.gform_next_button {
	width: 100%;
	font-size: 1.5em;
	padding: 20px 0 15px;
}
.gform_wrapper .gform_page_footer .button.gform_previous_button {
	width: 49%;
	margin-right: 1.5%;
	font-size: 1.5em;
	padding: 20px 0 15px;
}
.gform_wrapper .gform_page_footer .button.gform_button {
	width: 49%;
	margin-right: 0;
	font-size: 1.5em;
	padding: 20px 0 15px;
}
.gform_wrapper .gform_footer {
	margin: 6px 0 0 0;
}