[Resolved] Page size & Automatically Scroll to Top of “Next”

[Laurie]

Hello, I hope you are well and all keeping busy,
I am hoping to get some help, I have been trying in vain to add things to css without success!
I have added a multi-page webform to my website using “Gutenberg Forms”, all seems to work well except the page is too long (this is mainly relating to when viewed on a mobile), huge white space!
I was trying to find how I can restrict the size or “height” of the page to the height of the form element/ page, (plus “x” padding).
Also when the “next” button is clicked to progress to the next page to automatically scroll to the top of the next form page section.

Many thanks as ever for your help.

Best regards

[David]

Hi there,

the only thing i can off is this CSS to reduce the font size of the form:

.wp-block-cwp-block-gutenberg-forms {
  font-size: .8em;
}

And this CSS to reduce some of the top and bottom margins above and below the field set – they slapped important on their CSS so best to check it doesn’t affect anything like an Error Notice:

.wp-block-cwp-block-gutenberg-forms .cwp-form .cwp-field .cwp-checkbox-set {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

For the scroll to top – i would check with the plugin author they may have a simple solution – little reluctant to offer a JS snippet to do it in case it interferes with the buttons primary function.

[Laurie]

Hello, thank you for the usual quick response!

I have tried contacting the form developer on a couple of occasions but unfortunately don’t get any response.

I tried adding the form to modals, pop-ups and various templates, I get get it to display really well on desktop but on mobile it doe not seem to want to play nice at all, quite often it just crashes.

I may try another webform builder.

Many thanks for your help,

best wishes to all.

[David]

Hope you find a solution that works for you!

[Author]

Posts