Help with responsive height

Change “next” class position from absolute to auto.
“cover the form content” - why? Read her about “normal flow”(Or google it)

  • didn’t see any scroll problem

Okay, now I see the issue.

  1. First Section:
    Remove that styling, move to “Block”. Typically, you won’t need any styles on Sections they’re just holding content in DOM, document model. Just like a Word document, the page is the “section” that holds the words you type, but you may center the title, then left align the paragraph, then indent the bullet points. You never style the word document page, unless it’s an index page with roman numerals for a book or proposal. If that makes sense.

  2. Form Wrapper layer:
    This can be flex, again remove all the sizing, just horizontal justify center, align center

  3. Form Content layer:
    Click “Expand” on the Flex settings. Challenge is, you have to do this to each panel in all steps.

So you’re using a slider for the form? If so, I would suggest moving the pagination outside of all the form content, and control the navigation with “Previous & Next” buttons. It’s the same as using arrows or dots. This prevents the form content from dictating styles to the navigation. And you won’t overlap.

That’s my feel for it, because I know you don’t want to recreate at this point probably :wink:

How do I move the pagination outside of the form content? I assume that is what I need to prevent the overlapping. I did your steps 1-3 and it still happens.

Did you want the previous button shown? Why is it hidden? Can you say what’s going on with it.

I want the previous button shown on all slides except for the first slide. It was working before I am not sure why it isn’t now. Also the things you listed didn’t fix the vertical responsiveness issue where the next button is overlapping the form content.

Hey contact,

@SidneyOttelohe, @twhitt14, @AlexN. They all have created this exact same form interaction. I believe they’ll be able to “Replicate” what you’re experiencing.

Hey guys I am still having the same issue with the next button overlapping the form content. Please help!

Send a message to those individiuals I listed - to their profile.

And please republish your read-only link for them.

Thanks Gary. I have fixed the issue but have created another. The form is remaining the height of whichever slide is longest. I want it to adapt so that it fits whichever slide it is on and not leaving a bunch of space between the form content and the form button. Here is the share link: https://preview.webflow.com/preview/luxer-questionnaire-2-0?preview=6fa4b272df602e0b4cb572f47752b818

Corrected share link: https://preview.webflow.com/preview/luxer-questionnaire-2-0?preview=fd0154de7eec0472375e576ea68c53f5

Oh so you need the pagination button to move up with auto-height when there’s white space from minimal content?

Yes that is correct! I want the button to appear just below the end of the form content.

Hey there!

Okay you really have 2 options as ‘tweaks’, so you don’t have to build things again, just adjusting to the layout :smiley: I’m sure that’s the goal, right?

  1. Create auto-height divs that scale based on the content size.
  2. Add the next button to each “Step”.

Now, I’d favor the 2nd. Simply because it gaurantees the proper spacing and layout. And it’s just adding button and linking it to the next section. Yes, you’d need to copy it, but you can add combo class to avoid problems if one breaks for some reason.

The 1st will definitely take the most time, because you’ll need to go through each “Step” and adjust the “Block” settings. Deal with margins, padding, div size for consistency. Honestly, this concept needed consideration in the planning phase :blush:

To keep you up and running smoothly, and not stopping to make this involved adjustment, just add a button to each step, then reduce the size the button div to match the section - it’s the fastest move in my opinion.

What are you’re thoughts on this?

That took all of 2 seconds to add - chose the same class - and centered… :grin:

Ok I feel like this is a dumb question but how do I simply add a button to each step? When I try to copy and paste the next button it copies the whole slider. When I create a new button I don’t see how I can link it to the next slide.

Ha, no not a dumb question, there’s no such thing :grin: There isn’t a developer on earth that can look at a site and tell you exactly what’s going on instantly. It always takes some troubleshooting through trial and error, that’s ALL it is. So we’ll figure it out eventually. :mage:

So you didn’t create this yourself right? Because this is a Webflow form inside of a Webflow slider. It’s a little confusing when investigating the structure. Are you locked into this entire form and setup?

Hey @blackrivercreative,

Check this out https://webflow.com/website/Multi-Step-Form - Clone it and see how it’s built :slight_smile:

All the best,
Naweed

This is actually what I based my form from. However it doesn’t address the issue I am having because all slides are the same size in that example.

I am willing to change whatever to make it work!

Well bud, honestly I would recommend using Jotform for this type of paginated step questionnaire form. WF is not built or equipped to handle what you’re trying to accomplish. Besides, after many submissions, you’re going to need:

  1. Reports
  2. Charted data
  3. Client information
  4. Auto responders
  5. Demographic detail

These are just some very important details that forms should present. Forms are really an extension of a company’s marketing strategy. They supply a firm connection between the business and it’s current and potential customer base.

I would take this step form to another level, by implementing a full service. When I take on, or am a part of start-ups, business development, whatever it may be; the first thing I insert is SCALABILITY!

Honestly, that’s the true purpose of Technology. To help a business operate more efficiently with greater volumn. From months of research, I’ve found Jotform to be the best solution for both. They have all the tools to make this process smooth.

The Clincher:
Jotform is one of few services that allow for a multi-column form setup. They have the largest functionality that considers true development. Actually, if you don’t understand css, then they are extremely complicated to understand. It’s built on the truest web technology (of all competitors). They understand how web works and try hard to follow these principles.

I would build this form in Jotform and simply embed in Webflow! Trust me, it will be very smooth. And you’ll never have to touch the form in WF Designer, just login to Jotform, adjust a field, re-publish and done. It’s a nice platform, with tons of integrations.

If you need help, I’ll be more than happy to build it out for you, then insert into your Webflow project. And it’s only 19/month for fully white label form pages, with customized headers and after submission redirect pages, on your own domain.

If you want to see some of my form examples, I’ll be glad to send you links.

Hope this helps.

*And no I don’t work for them :blush:

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.