Customizing Scroll Behavior in Newsletter Forms

Introduction

The newsletter form widget automatically scrolls to the form whenever a new page is rendered (e.g. after submission, on the confirmation page, etc.). This behavior can be customized: you can disable scrolling entirely, adjust the scroll offset, or take full control of scrolling yourself.

JavaScript Snippet in the Form Wizard

The form wizard provides a "JavaScript Snippet" tab where you can add custom JavaScript code that is executed when the form is rendered.

a otten anteca le sforatore, tuctiond-20260213-101016.png

Disable scrolling entirely

To completely disable automatic scrolling for this form:

ctx.formWidget.doNotScroll = true;

Adjust the scroll offset

If the form disappears behind a fixed header, for example, you can adjust the scroll offset (in pixels):

ctx.formWidget.scrollOffset = 200;

Define custom scrolling

If the default scroll behavior is not sufficient, you can take full control of scrolling:

ctx.formWidget.doNotScroll = true;
window.scrollTo(0, 1400);

2. Control Scroll Behavior Based on Workflow Step

The variable ctx.modus provides the current workflow step. This allows you to adjust scroll behavior specifically for certain steps.

Example: Scroll only on a specific step

if (ctx.modus === "rendered") {
    window.scrollTo(0, 1400);
}

Example: Scroll on multiple steps

if (ctx.modus === "rendered-unsubscribe" || ctx.modus === "rendered-confirm-request") {
    window.scrollTo(0, 1400);
}

All `ctx.modus` values in the newsletter widget

`ctx.modus`	Description

`ctx.modus`	Description
`rendered`	The form has been rendered and inserted into the DOM
`rendered-unsubscribe`	The unsubscribe page has been rendered and inserted into the DOM
`rendered-profil`	The profile page has been rendered and inserted into the DOM
`rendered-profil-update`	The profile page has been re-rendered after an update
`rendered-login`	The login page has been rendered and inserted into the DOM
`rendered-pwlink`	The password link page has been rendered and inserted into the DOM
`rendered-confirm`	The simple confirmation page has been rendered and inserted into the DOM
`rendered-confirm-request`	The confirmation page with re-confirmation has been rendered and inserted into the DOM
`formreturn`	The sign-up form has been submitted and the response from UM has arrived
`profilformreturn`	The profile form has been submitted and the response from UM has arrived
`error`	An error page has been rendered and inserted into the DOM

Note: In the contact form, only the two values rendered and formreturn are available.