Interactive Astrology Quiz Bridge Page

This is a self-contained, easy-to-deploy interactive quiz designed as a bridge page for affiliate marketing in the astrology and spirituality niche. It is built with vanilla HTML, CSS, and JavaScript, requiring no backend or database.

The user journey is designed to be engaging, capture their email, and then seamlessly redirect them to your main affiliate offer.

✨ Features

• Aesthetic Design: Soft, dark, celestial theme that is easy on the eyes.
• Fully Responsive: Looks great on mobile, tablet, and desktop.
• Interactive Flow: Multi-step quiz to increase user investment.
• Email Capture: Built-in form to collect leads before the redirect.
• Easy to Deploy: No frameworks or complex setup. Just upload the files to any web host.
• Simple Configuration: Key settings (like your affiliate link) are in one easy-to-find spot.

---

🚀 Getting Started: How to Deploy

Follow these instructions to get your quiz page live on your server. This guide uses CloudPanel as an example, but the steps are similar for cPanel, Plesk, or direct server management.

Prerequisites

• A web server (e.g., a Hivelocity VPS with CloudPanel).
• A domain name pointed to your server's IP address.
• An account with an email marketing service (like Mailchimp, ConvertKit, etc.).

---

🛠️ Configuration Steps

Step 1: Get Your Email Form Endpoint

Your quiz needs a place to send the captured emails.

1. Log in to your email marketing service (e.g., Mailchimp).
2. Create a new Audience/List for your quiz leads.
3. Find the "Signup Forms" section and create a new form. Choose the option for an "Embedded Form" or "HTML Form".
4. They will provide a block of HTML code. Look inside for the <form> tag and find the action attribute. Copy the URL from this attribute.
5. This URL is your Form Endpoint. It will look something like this: https://youraccount.us10.list-manage.com/subscribe/post?u=...

Step 2: Configure the script.js File

1. Open the script.js file in a text editor.

2. At the top of the file, you will see two variables that you must change:

   // --- IMPORTANT: CONFIGURE THESE TWO VARIABLES ---
   const EMAIL_FORM_ENDPOINT = 'YOUR_EMAIL_MARKETING_SERVICE_FORM_ENDPOINT_HERE';
   const AFFILIATE_REDIRECT_URL = 'https://YOUR_CLICKBANK_AFFILIATE_LINK_HERE';
   // ------------------------------------------------

3. Replace 'YOUR_EMAIL_MARKETING_SERVICE_FORM_ENDPOINT_HERE' with the URL you copied in Step 1.

4. Replace 'https://YOUR_CLICKBANK_AFFILIATE_LINK_HERE' with your actual ClickBank (or other) affiliate link.

5. Save the file.

Step 3: Upload the Files to Your Server

1. Log into your CloudPanel dashboard.
2. Go to Sites -> + Add Site.
3. Choose "Create a PHP Site" (this is a flexible static file host). Enter your domain name and create the site.
4. Go to the site's dashboard and click on "File Manager".
5. Navigate into the htdocs directory. (This is your public web root).
6. Delete the default index.php file if it exists.
7. Upload the three configured project files:
   • index.html
   • style.css
   • script.js

Step 4: Test Your Quiz!

Your quiz is now live! Open your domain in a browser.

• Go through the entire quiz flow.
• Enter a test email and name at the form step.
• Verify that you are correctly redirected to your affiliate link.
• Check your email marketing service to confirm that the test email was captured in your list.

---

📁 File Structure