# 3 Proven Steps to Build a MILLION DOLLAR Landing Page For Newsletters Source: https://www.youtube.com/watch?v=NXDeJoWTKBQ Recap page: https://rapidrecap.app/video/NXDeJoWTKBQ Generated: 2025-12-10T15:35:34.738+00:00 --- ## Quick Overview The video demonstrates three proven steps to build a high-converting, free newsletter signup landing page using Zapier for automation, where the main outcome is successfully integrating the form submission to add subscribers to Mailchimp and log data to Google Sheets using a webhook trigger. **Key Points:** - The process involves creating a free landing page, setting up a Zapier webhook trigger ("Catch Hook"), and configuring two actions: adding the subscriber to Mailchimp and creating a new row in Google Sheets. - The webhook URL obtained from Zapier's "Catch Hook" trigger must be securely stored in a local `.env` file using the variable `VITE_ZAPIER_WEBHOOK_URL` to prevent exposure. - The author demonstrates customizing the landing page's appearance by changing the primary accent color to purple and updating the subscriber count badge from "Join 10,000+ subscribers" to "Join 1,000 subscribers" by editing configuration files. - The Zapier workflow successfully passes data from the webhook (email and source) to Mailchimp for adding/updating a subscriber and to Google Sheets for logging the data. - The video highlights Zapier's extensive ecosystem, noting it supports adding subscribers to various providers like Mailchimp and logging data to Google Sheets or Zapier Tables. - The author provides the entire project's open-source code on GitHub, including instructions on deployment to live hosting services like Vercel or Netlify for free. - A CORS issue encountered during testing (related to the `Content-Type` header) was fixed by switching the request body from JSON to `application/x-www-form-urlencoded` data format. ![Screenshot at 0:00: The initial view showcases the dark-themed newsletter signup landing page with large white and yellow text stating "Stay ahead with insights that matter," emphasizing the core value proposition before diving into the technical setup.](https://ss.rapidrecap.app/screens/NXDeJoWTKBQ/00-00-00.png) **Context:** The video serves as a tutorial demonstrating how to create a functional, modern newsletter signup landing page using a frontend framework (implied to be React/Vite based on file structure like `App.tsx`, `vite.config.ts`) and integrate it with automation services, specifically Zapier, to capture leads and manage them across different platforms like Mailchimp and Google Sheets. ## Detailed Analysis The tutorial walks through three main steps to create and automate a newsletter signup landing page. Step 1 covers creating the landing page structure and fetching the Zapier webhook URL via a "Catch Hook" trigger. The author stresses the importance of securing this URL by placing it in a local `.env` file, ensuring it is not accidentally committed to source control. Step 2 focuses on integrating the form submission with Zapier, where the webhook data (email and source) is used to trigger two subsequent actions: adding the user as a subscriber to Mailchimp using the "Add/Update Subscriber" action and logging the entry details (email and source) into a specific Google Sheet named "Newsletter Data" via the "Create Spreadsheet Row" action. The author also demonstrates advanced customization capabilities, instructing viewers on how to change the site's accent color to purple, update the subscriber count text, and change the heading/body fonts using configuration files like `src/config.ts` and `index.css`. A critical technical hurdle encountered was a CORS preflight error when sending JSON data to the Zapier webhook; this was resolved by modifying the frontend submission logic to send data as URL-encoded form data instead of JSON, which Zapier handles as a "simple request." Finally, the author shows how to publish the Zapier workflow and successfully test the end-to-end automation, verifying that both Mailchimp and Google Sheets correctly receive the submission data. ### Landing Page Setup and Code Access - The presenter introduces a free, open-source newsletter signup landing page built with Vite and React, providing the GitHub repository link for users to download and run locally using `npm run dev`. ### Zapier Workflow Creation (Trigger) - The first step in Zapier is setting up the trigger using "Webhooks by Zapier" with the "Catch Hook" event to receive data from the landing page form submission. ### Zapier Workflow Configuration (Actions) - The workflow includes two actions: Step 2 uses Mailchimp's "Add/Update Subscriber" to manage the email list, and Step 3 uses Google Sheets' "Create Spreadsheet Row" to log all incoming data, including the source (e.g., YouTube, Podcast). ### CORS Error Resolution - When testing the webhook submission, a CORS preflight error occurred because the browser defaults to sending a JSON `Content-Type` header, which Zapier's webhook trigger rejects. The fix involved updating the frontend code (`App.tsx`) to send data as URL-encoded form data. ### Landing Page Customization - The author uses AI assistance to modify the landing page's appearance, changing the orange accent color to purple, updating the subscriber count from 10,000+ to 1,000, and changing fonts to 'Orbitron' and 'Rajdhani' by editing configuration files like `src/config.ts` and `index.css`. ![Screenshot at 0:00: The initial signup form displaying the dark theme with bold, yellow-accented headline text: "Stay ahead with insights that matter."](https://ss.rapidrecap.app/screens/NXDeJoWTKBQ/00-00-00.png) ![Screenshot at 0:11: The dropdown menu for the "How did you find us?" field is visible, listing various sources like Google Search, YouTube, and LinkedIn.](https://ss.rapidrecap.app/screens/NXDeJoWTKBQ/00-00-11.png) ![Screenshot at 0:54: The GitHub repository view showing the project structure, including the src folder and configuration files like config.ts and index.html.](https://ss.rapidrecap.app/screens/NXDeJoWTKBQ/00-00-54.png) ![Screenshot at 3:51: The Chrome Developer Tools console open, displaying a CORS error message related to the preflight OPTIONS request when accessing the Zapier webhook URL.](https://ss.rapidrecap.app/screens/NXDeJoWTKBQ/00-03-51.png) ![Screenshot at 7:13: The Google Sheet named "Newsletter Data" successfully populated with the test data: 'apple@gmail.com' in the Email column and 'YouTube' in the Find Us column.](https://ss.rapidrecap.app/screens/NXDeJoWTKBQ/00-07-13.png)