The form button is misaligned, can you fix it?

Understanding why the button is shifting

Key points • Yes, the button alignment can be corrected on your hotel website. • The correction is usually done in the Designer, rarely in the Editor. • The form layout (grid, flex, columns) directly impacts the alignment.

A poorly aligned form button quickly gives an impression of sloppiness, especially on a hotel website where design plays a key role in brand perception. Whether the button is too high, too low, too close to the edge, or offset from the email field, this can usually be corrected directly in the site's designer, or through a few style adjustments if the form comes from an external tool.

💡 Tip: When it comes to layout (alignment, margins, position), it's almost always an intervention on the Designer side, not in the Editor.

Identify the type of form before taking action

Before correcting the alignment, first identify: • whether it's a native form created in the Designer • or an embedded form from Mailchimp, Brevo, or another tool

This information determines how far you can go in the correction without going through the technical team or your agency.

Native form on the hotel website

If the form was built directly in the Designer (using “Form block”, “Form field”, “Button”, etc.): • alignment depends on the layout structure (Flex, Grid, columns) • margins, padding, and vertical alignment can be precisely adjusted • a dedicated class can be created for the registration form to maintain a consistent style across the entire site

In this case, yes, we can correct the button alignment without difficulty.

Embed form (Mailchimp, Brevo…)

If the form code comes from a copied and pasted embed: • some of the styling is handled by the external tool • alignment can be corrected by wrapping the embed in a styled container in the Designer • custom classes can be added to regain control over spacing and alignment

💡 Tip Even with an embed, you can almost always "catch up" a misaligned button with a good container and some layout adjustments.

Correcting the alignment of a button in a native form

In the Designer, the correction generally follows this logic:

1. Check the form structure

The most common layout for a hotel newsletter form is: • a horizontal container with the email field on the left • the button on the right

If the button is not aligned with the field, it is often because: • the parent element is not in Flex or Grid layout • the element heights are different • the margins/paddings are not consistent

The goal is to have the field and the button in the same container, with a consistent layout (for example in Flex, align-items: center).

2. Align the button vertically

In a Flex container: • Enable vertical alignment to the center (align-items: center) • Verify that the field and the button have the same height (line-height / padding) • Adjust the margins so that the button doesn't visually move up or down

Result: the top and bottom edges of the field and the button appear aligned.

3. Align horizontally (left, right, center)

Depending on your hotel website design: • Form centered under a text block → button and field centered within the container • Form right-aligned in the footer → container right-aligned • Full-width form → field and button aligned and spaced smoothly

You can adjust: • the width of the email field (e.g., 70%) • the automatic width of the button • the spacing between the two (gap in Flexbox, or margin on the button)

💡 Tip On mobile, it is often preferable to place the field and button one below the other, while maintaining a clean alignment.

Correcting the alignment of a button in an embed

When the form is provided by Mailchimp, Brevo, or another tool, the button may be misaligned because: • the default style doesn't match your site's grid • the tool imposes specific margins or heights

To correct this:

1. Wrap the embed in a clean container

In the Designer: • Place a div or a dedicated section for the form • Apply a consistent width and alignment (centered, right-aligned, etc.) • Adjust the margins so that the block is correctly positioned on the page

This already allows us to "reframe" the entire form.

2. Harmonize the alignment with the rest of the content

By manipulating the container surrounding the embed, you can: • center the entire form block within the section • align the block with other elements (text, visuals, columns) • balance the space above and below the button

If necessary, your team can add specific styles to correct finer misalignments.

💡 Tip: In case of strong design constraints, one solution is to recreate a native form connected to your tool (via API or automation) rather than using the raw embed.

What you can adjust on the marketing team side

Even without touching the Designer, you can already: • check if the button text is too long (which widens or shifts the button) • shorten the labels to maintain a reasonable button width • standardize button text across the site (“Sign up”, “Receive offers”)

A small text modification can sometimes be enough to make the alignment visually more harmonious.

Conclusion

Yes, it's entirely possible to correct a misaligned form button on your hotel website. Most of the time, it's a simple layout adjustment in the Designer (structure, Flexbox, margins, heights). Even for embedded forms, alignment can be corrected with a properly configured container or, if necessary, by creating a native form linked to your marketing tool. The result: a clean, aligned, and reassuring form for your visitors.