Switch newsletter forms from Mailchimp to Brevo (static HTML form approach)

Co-authored-by: bobbyiliev <21223421+bobbyiliev@users.noreply.github.com>

Author: Copilot

.env.example

@@ -17,3 +17,7 @@ WATCHPACK_POLLING=true
 
 # Optional: API Keys (if needed)
 # OPENAI_API_KEY=your_api_key_here
+
+# Brevo (newsletter) — set to your Brevo subscription form URL
+# e.g. https://sibforms.com/serve/MUIFAAAA...
+# NEXT_PUBLIC_BREVO_FORM_URL=https://sibforms.com/serve/YOUR_FORM_ID_HERE

app/books/devops-survival-guide/client-content.tsx

@@ -525,7 +525,7 @@ export function ClientContent() {
             <div className="max-w-md mx-auto">
               <div className="p-8 bg-linear-to-br from-primary/5 to-purple-500/5 border-2 border-primary/20 rounded-2xl shadow-2xl backdrop-blur-sm">
                 <form
-                  action="https://devops-daily.us2.list-manage.com/subscribe/post?u=d1128776b290ad8d08c02094f&amp;id=fd76a4e93f&amp;f_id=0022c6e1f0"
+                  action={process.env.NEXT_PUBLIC_BREVO_FORM_URL ?? '#'}
                   method="post"
                   target="_blank"
                   noValidate
@@ -534,25 +534,19 @@ export function ClientContent() {
                   <input
                     type="email"
                     name="EMAIL"
-                    id="mce-EMAIL-final"
                     required
                     placeholder="your@email.com"
                     className="w-full px-5 py-4 border-2 border-border/50 bg-background/50 backdrop-blur-sm rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300"
                   />
 
-                  {/* Honeypot bot field */}
+                  {/* Brevo bot-protection fields */}
                   <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
-                    <input
-                      type="text"
-                      name="b_d1128776b290ad8d08c02094f_fd76a4e93f"
-                      tabIndex={-1}
-                      defaultValue=""
-                    />
+                    <input type="text" name="email_address_check" defaultValue="" tabIndex={-1} />
+                    <input type="hidden" name="locale" value="en" />
                   </div>
 
                   <button
                     type="submit"
-                    name="subscribe"
                     className="group inline-flex items-center justify-center w-full px-6 py-4 bg-linear-to-r from-blue-600 to-purple-600 text-white rounded-xl text-lg font-bold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 shadow-2xl hover:shadow-blue-500/50 hover:scale-105"
                   >
                     <Mail className="mr-2 h-5 w-5" />

components/book-promotion-popup.tsx

@@ -60,19 +60,14 @@ export function BookPromotionPopup() {
     }, 300)
   }
 
-  const handleSubscribe = (e: React.FormEvent) => {
+  const handleSubscribe = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
 
     if (!email) return
 
-    // Submit to Mailchimp
-    const form = e.target as HTMLFormElement
-    const formData = new FormData(form)
-
-    // Open in new window (Mailchimp requirement)
-    const mailchimpUrl = 'https://devops-daily.us2.list-manage.com/subscribe/post?u=d1128776b290ad8d08c02094f&id=fd76a4e93f&f_id=0022c6e1f0'
-    const params = new URLSearchParams(formData as any).toString()
-    window.open(`${mailchimpUrl}&${params}`, '_blank')
+    // Submit form to Brevo in a new tab
+    const form = e.currentTarget
+    form.submit()
 
     // Show thank you message
     setShowThankYou(true)
@@ -160,21 +155,27 @@ export function BookPromotionPopup() {
                         Subscribe for exclusive content & launch updates! ✨
                       </p>
 
-                      <form onSubmit={handleSubscribe} className="space-y-2">
+                      <form
+                        onSubmit={handleSubscribe}
+                        action={process.env.NEXT_PUBLIC_BREVO_FORM_URL ?? '#'}
+                        method="post"
+                        target="_blank"
+                        className="space-y-2"
+                      >
                         <input
                           type="email"
                           name="EMAIL"
-                          id="mce-EMAIL"
                           value={email}
                           onChange={(e) => setEmail(e.target.value)}
                           placeholder="your@email.com"
                           required
                           className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
                         />
 
-                        {/* Honeypot */}
+                        {/* Brevo bot-protection fields */}
                         <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
-                          <input type="text" name="b_d1128776b290ad8d08c02094f_fd76a4e93f" tabIndex={-1} defaultValue="" />
+                          <input type="text" name="email_address_check" defaultValue="" tabIndex={-1} />
+                          <input type="hidden" name="locale" value="en" />
                         </div>
 
                         <Button

components/footer/newsletter-form.tsx

@@ -1,6 +1,8 @@
 import { Mail, ArrowRight } from 'lucide-react';
 
 export function NewsletterForm() {
+  const brevoFormUrl = process.env.NEXT_PUBLIC_BREVO_FORM_URL ?? '#';
+
   return (
     <div className="p-6 bg-linear-to-br from-primary/5 to-purple-500/5 border border-primary/20 rounded-2xl shadow-lg">
       <div className="flex items-center gap-2 mb-3">
@@ -11,7 +13,7 @@ export function NewsletterForm() {
         Get the latest DevOps insights delivered to your inbox weekly.
       </p>
       <form
-        action="https://devops-daily.us2.list-manage.com/subscribe/post?u=d1128776b290ad8d08c02094f&amp;id=fd76a4e93f&amp;f_id=0022c6e1f0"
+        action={brevoFormUrl}
         method="post"
         target="_blank"
         noValidate
@@ -20,25 +22,19 @@ export function NewsletterForm() {
         <input
           type="email"
           name="EMAIL"
-          id="mce-EMAIL"
           required
           placeholder="your@email.com"
           className="w-full px-4 py-3 border border-border/50 bg-background/50 backdrop-blur-sm rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300"
         />
 
-        {/* Honeypot bot field */}
+        {/* Brevo bot-protection fields */}
         <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
-          <input
-            type="text"
-            name="b_d1128776b290ad8d08c02094f_fd76a4e93f"
-            tabIndex={-1}
-            defaultValue=""
-          />
+          <input type="text" name="email_address_check" defaultValue="" tabIndex={-1} />
+          <input type="hidden" name="locale" value="en" />
         </div>
 
         <button
           type="submit"
-          name="subscribe"
           className="group inline-flex items-center justify-center w-full px-4 py-3 bg-linear-to-r from-primary to-purple-600 text-white rounded-xl text-sm font-bold hover:from-primary/90 hover:to-purple-600/90 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105"
         >
           Subscribe Now

components/sponsor-sidebar.tsx

@@ -98,7 +98,7 @@ export function SponsorSidebar({ className, relatedPosts = [] }: SponsorSidebarP
           Get the latest DevOps tips and tutorials delivered to your inbox.
         </p>
         <form
-          action="https://devops-daily.us2.list-manage.com/subscribe/post?u=d1128776b290ad8d08c02094f&amp;id=fd76a4e93f&amp;f_id=0022c6e1f0"
+          action={process.env.NEXT_PUBLIC_BREVO_FORM_URL ?? '#'}
           method="post"
           target="_blank"
           noValidate
@@ -107,25 +107,19 @@ export function SponsorSidebar({ className, relatedPosts = [] }: SponsorSidebarP
           <input
             type="email"
             name="EMAIL"
-            id="mce-EMAIL"
             required
             placeholder="you@example.com"
             className="w-full px-3 py-2 border border-border bg-background rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
           />
 
-          {/* Honeypot bot field */}
+          {/* Brevo bot-protection fields */}
           <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
-            <input
-              type="text"
-              name="b_d1128776b290ad8d08c02094f_fd76a4e93f"
-              tabIndex={-1}
-              defaultValue=""
-            />
+            <input type="text" name="email_address_check" defaultValue="" tabIndex={-1} />
+            <input type="hidden" name="locale" value="en" />
           </div>
 
           <button
             type="submit"
-            name="subscribe"
             className="inline-flex items-center justify-center w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors"
           >
             Subscribe to Newsletter