Text

Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Tier I Booking Form</title>

  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&display=swap" rel="stylesheet">

  <style>

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 60px 20px;
      background: #1C1C1C;
      font-family: 'Cormorant Garamond', serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .form-container {
      width: 100%;
      max-width: 760px;
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 30px;
      text-align: center;
    }

    .form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

   label {
  color: #F5F1E9;
  font-size: 1.35rem;
  line-height: 1.5;
  margin-bottom: 12px;
  width: 100%;
  max-width: 700px;
  text-align: left;
}

    input,
    textarea {
      width: 100%;
      max-width: 700px;
      padding: 16px;
      border-radius: 6px;
      border: 1px solid #C6A96B;
      background: #F5F1E9;
      color: #1C1C1C;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      outline: none;
    }

    textarea {
      min-height: 150px;
      resize: vertical;
    }

    input:focus,
    textarea:focus {
      border-color: #C6A96B;
      box-shadow: 0 0 10px rgba(198, 169, 107, 0.4);
    }

    input[type="date"] {
      color-scheme: light;
    }

    .radio-group {
      display: flex;
      gap: 30px;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
    }

    .radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #F5F1E9;
  font-size: 1.2rem;
  cursor: pointer;
  white-space: nowrap;
}

  .radio-group {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 10px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #F5F1E9;
  font-size: 1.2rem;
  cursor: pointer;
}

.radio-option input[type="radio"] {
  appearance: auto;
  -webkit-appearance: radio;
  width: 18px;
  height: 18px;
  accent-color: #C6A96B;
  margin: 0;
}

.consent-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 700px;
  margin: auto;
  text-align: left;
}

.consent-group input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 18px;
  height: 18px;
  accent-color: #C6A96B;
  margin-top: 6px;
  flex-shrink: 0;
}

.consent-group label {
  color: #F5F1E9;
  font-size: 1.1rem;
  line-height: 1.6;
}
    .consent-group {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      max-width: 700px;
      margin: auto;
      text-align: left;
    }

    .consent-group label {
      margin-bottom: 0;
      font-size: 1.1rem;
    }

    button {
      background: #C6A96B;
      color: #1C1C1C;
      border: none;
      padding: 16px 42px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      border-radius: 6px;
      cursor: pointer;
      transition: 0.3s ease;
      margin: 10px auto 0;
    }

    button:hover {
      background: #F5F1E9;
    }

input::placeholder,
textarea::placeholder {
  color: #555555 !important;
  opacity: 1;
}
  </style>
</head>

<script>

window.addEventListener("DOMContentLoaded", () => {

  const button = document.getElementById("pay-button");
  const form = document.getElementById("booking-form");

  button.addEventListener("click", async () => {

    // Check required fields
    if (!form.reportValidity()) {
      return;
    }

    const formData = new FormData(form);

    try {

      const response = await fetch("https://formspree.io/f/maqkqekg", {
        method: "POST",
        body: formData,
        headers: {
          "Accept": "application/json"
        }
      });

      if (response.ok) {

        window.location.href = "https://buy.stripe.com/8x2eVcfUg8kQ6E8gEI0oM0y";

      } else {

        alert("Form submission failed.");

      }

    } catch (error) {

      alert("There was an error submitting the form.");

    }

  });

});

</script>

<body>

  <div class="form-container">

<form id="booking-form">


<div class="form-group">
  <label for="name">Name *</label>

  <input
    type="text"
    id="name"
    name="name"
    required
  >
</div>


<div class="form-group">
  <label for="email">Email address *</label>

  <input
    type="email"
    id="email"
    name="email"
    required
  >
</div>


<div class="form-group">
  <label for="dob">Date of birth</label>

  <input
    type="date"
    id="dob"
    name="date_of_birth"
  >
</div>


<div class="form-group">

  <label for="street-address">
    Address *
  </label>

  <input
    type="text"
    id="street-address"
    name="street_address"
    placeholder="Street Address"
    required
  >

</div>

<div class="form-group">

  <input
    type="text"
    id="address-line-2"
    name="address_line_2"
    placeholder="Apartment, suite, unit, etc. (optional)"
  >

</div>

<div class="form-group">

  <input
    type="text"
    id="city"
    name="city"
    placeholder="City"
    required
  >

</div>

<div class="form-group">

  <input
    type="text"
    id="state"
    name="state_region"
    placeholder="State / Region"
    required
  >

</div>

<div class="form-group">

  <input
    type="text"
    id="postal-code"
    name="postal_code"
    placeholder="Postal / ZIP Code"
    required
  >

</div>

<div class="form-group">

  <input
    type="text"
    id="country"
    name="country"
    placeholder="Country"
    required
  >

</div>


<div class="form-group">
  <label for="situation">
    Please describe your situation in as much detail as you feel comfortable sharing. *
  </label>

  <textarea
    id="situation"
    name="situation"
    required
  ></textarea>
</div>


<div class="form-group">
  <label for="focus">
    What would you like this spellwork to focus on? *
  </label>

  <textarea
    id="focus"
    name="spellwork_focus"
    required
  ></textarea>
</div>


<div class="form-group">
  <label for="outcome">
    What outcome are you hoping to achieve? *
  </label>

  <textarea
    id="outcome"
    name="desired_outcome"
    required
  ></textarea>
</div>


<div class="form-group">
  <label for="others">
    Are there other people connected to this situation? If yes, please include their name(s), date(s) of birth (if you know), and their relationship to you.
  </label>

  <textarea
    id="others"
    name="other_people"
  ></textarea>
</div>


<div class="form-group">

  <label>
    Have you had spellwork performed for this situation before?
  </label>

  <div class="radio-group">

    <label class="radio-option">
      <input
        type="radio"
        name="previous_spellwork"
        value="Yes"
      >
      Yes
    </label>

    <label class="radio-option">
      <input
        type="radio"
        name="previous_spellwork"
        value="No"
      >
      No
    </label>

  </div>

</div>


<div class="form-group">
  <label for="limits">
    Is there anything you specifically do or do not want included in the work?
  </label>

  <textarea
    id="limits"
    name="preferences"
  ></textarea>
</div>


<div class="form-group">
  <label for="materials">
    Are there any herbs, scents, or materials you cannot have in your home?
  </label>

  <textarea
    id="materials"
    name="material_restrictions"
  ></textarea>
</div>


<div class="consent-group">

  <input
    type="checkbox"
    id="consent"
    name="consent"
    required
  >

  <label for="consent">
    I understand that spiritual work and energetic practices are deeply personal experiences and results may vary depending on circumstances, resistance, timing, and individual situations.
  </label>

</div>


<button type="button" id="pay-button">
  Pay Now
</button>

</body>
</html>

Spells4me

I sell spells to improve your life or someone else's life, or to make someone else's life worse. I re-balance energies and redirect the flow for your benefit.
I run a spiritual wellness business offering ritual work and spell casting to help clients with love, protection, prosperity, and personal growth.
I am a mystical service provider specializing in personalized spell-casting and spiritual solutions. Spells4me offers a variety of magical services, including love spells, prosperity charms, protection rituals, and spiritual consultations. I offer custom spell-casting to help clients manifest their desires and enhance their lives.
My customers are people seeking spiritual guidance, empowerment, and magical solutions for love, success, protection, and personal growth. Clients value discretion, positive energy, and ethical practices.
People seeking spiritual guidance or emotional support
Individuals interested in manifestation and energy work
Clients exploring alternative wellness practices
Mystical, trustworthy, and empowering
Warm, inviting, with an air of mystery
Use of symbols like candles, crystals, herbs, and mystical motifs
Colors: Deep purple, gold, black, and other rich, spiritual tones
Elegant, mystical aesthetic with a mystical, spiritual vibe.
Visuals that evoke magic, mysticism, and positive transformation.


Poppins

Inter

Cormorant Garamond

Roboto

<p>This website uses cookies to improve functionality and user experience. By continuing to use this site, you consent to the use of cookies in accordance with our Privacy Policy.</p>

Tier II Booking Form