I recently had to implement a newsletter subscription for a client using Infomaniak. It’s a decent service, especially for Switzerland, but the default embedding isn’t great visually.

TLDR: You can skip to the end to see the result and the code.

I had a few goals in mind to improve the user experience:

• Integrate the design so that it matches the website’s style.
• Simplify the layout by placing the submit button next to the email input.
• Hide the captcha until it’s needed

While I was developing, I found a few (undocumented) quirks with the javascript embed method:

• The script cannot be deferred, negatively impacting page load and making it incompatible with tools like React due to its use of document.write.
• The captcha section is inside a separate iframe, preventing custom styling.
• Only one form can exist per page because it relies on unique element IDs.

The alternatives seemed worse:

• The HTML-only embed redirects users to a separate page for captcha validation, which gives the impression that they left the site. I didn’t find a way to customize that experience.
• The Infomaniak Newsletter API allows users to be added directly, but this approach bypasses the necessary email validation step. I would need to handle email verification independently, making it easier to develop a custom solution.

Implementation

I’m using Tailwind v4 and TypeScript, but the general approach is the same.

1. Stripped unnecessary text: Removed Infomaniak’s default descriptions and RGPD notice, and activated the Afficher le message dans le formulaire option.
2. Adjusted layout with CSS Grid: A 4-column grid positioned the submit button next to the email input. The captcha sits on a new row, spanning all columns, with a border to separate it visually.

   @layer components {
     /* Infomaniak Newsletter styling – Some styles left out for brevity */
     .inf-form {
       .inf-content {
         @apply grid grid-cols-4 gap-1;
   
         & > .inf-input-text {
           @apply order-1 col-span-3;
           & > input {
             @apply w-full;
           }
         }
   
         & > .inf-submit {
           @apply order-2 col-span-1;
           & > input {
             @apply !m-0 text-center cursor-pointer w-full;
           }
         }
   
         /* Captcha Container does not have class */
         div:not([class]) {
           @apply order-3 col-span-4;
           #mcaptcha__widget-container {
             @apply border-black border;
           }
         }
       }
     }
   }

3. Hid the captcha initially: A small script reveals it only when the user starts typing an email, keeping the layout clean.

   const captchaContainer = document.querySelector(
     "#mcaptcha__widget-container",
   ) as HTMLElement;
   const emailInput = document.querySelector(
     "div.inf-content > div.inf-input.inf-input-text > input[type=email]",
   ) as HTMLElement;
   
   if (captchaContainer && emailInput) {
     captchaContainer.style.display = "none";
     emailInput.addEventListener("input", () => {
       captchaContainer.style.display = "block";
     });
   }

4. Styled errors with Tailwind: Added basic error feedback for the email field.

This approach isn’t perfect, but it works. I might explore a more customized version later. Still, this should help anyone looking to style Infomaniak’s default newsletter embed without too much hassle.