Newsletter sign up form: where readers see it

A reader reaches the end of a post and finds the newsletter form where the owner put it, at the bottom. On a phone, a cookie bar sits along the lower edge of the screen, a sticky header hides the top of the form, and a pop-up may still be open from the first visit. The reader taps where the button should be and hits Accept all, or the header catches the tap. The owner tested on a laptop with the banner already dismissed, so the form looked fine. The reader sees a form that is hard to use, and leaves.

• The Subscribe button sits clear of the cookie bar, any sticky header and any pop-up on a phone.
• An embedded form shows every field, with no inner scroll bar hiding the button.
• The success line appears next to the button, where the reader is already looking.
• A reader who is already subscribed sees a plain message, not an error that looks like a failure.
• The form appears in the same place on every post, not only on the homepage.

Three layers commonly sit over a newsletter form on a phone: the cookie bar, fixed to the top or bottom of the screen; a sticky header; and a pop-up, which may take the whole screen and close with a small control. An embedded form may sit in a frame with a fixed height, so on a narrow screen it shows the first field and hides the button in a scroll area. The wrong version sets that height once on a laptop and never checks it again. The right version uses a frame that resizes to its content, or a form built into the page, and tests the layers on a phone at the end of a post.

A reader presses Subscribe, and the success message appears above the visible screen, where they are no longer looking. They press again. The second press is a duplicate, and the tool may answer that the address is already subscribed, which reads as a failure to someone who just tried to sign up. The wrong version shows the message in a separate box at the top of the page. The right version places the message directly under the button, says the subscription worked, and names the next step, such as the confirmation email, if the list needs one. A simulated reader's screenshot after the press shows where the message landed, and whether the button still looks active.

The form can also sit too far down to matter. A footer form is seen only by readers who reached the bottom, and a reader who stops earlier never sees it. The wrong version places one form in the footer of every page. The right version places a form once after the first paragraph or two, when the reader knows what the newsletter covers, and once more at the end. The screenshot tells you where a reader stopped. A simulated reader that stops above the form never reached it, so move the form up. A simulated reader that stops on the form, with the button covered or the success line lost, reached it, so the cause is the layers.

A team adds a discount pop-up, a chat widget or a new consent tool, and the Subscribe button goes under it without anyone noticing on a laptop. Run the same visitors to the form on a phone after each addition, and read the screenshot at the step where they try to subscribe. With paid credits, visitors can reach protected previews, so a redesigned post template can be checked before it goes live.