mistymountains/src/routes/contact/index.svelte

<script context="module">
  import { browser } from '$app/env';
  import { toast } from '@zerodevx/svelte-toast'
  import HCaptcha from 'svelte-hcaptcha';

  let submission = {
    name: '',
    email: '',
    message: '',
    phone: '',
    captchaToken: '',
  };

  let captcha;

  function handleSubmit (e) {
    e.preventDefault();

    if (browser) {
      const sendToast = toast.push('Sending...', {
        duration: 300,
        initial: 0,
        next: 0.2,
        dismissable: false
      });
      fetch('/contact/submit', {
        method: "POST",
        body: JSON.stringify(submission)
      })
        .then((x) => x.json())
        .then((x) => {
          toast.set(sendToast, { next: 1 });

          if (x.success) {
            toast.push('Success! Reloading...', {
              theme: {
                '--toastBackground': '#48BB78',
                '--toastBarBackground': '#2F855A'
              },
              duration: 1000,
              onpop: () => { window.location.reload(); },
            });
          } else if (x.error) {
            toast.push(x.error, {
              theme: {
                '--toastBackground': '#F56565',
                '--toastBarBackground': '#C53030'
              }
            });
          }
        })
        .catch((err) => console.log(err));
    }
  }

  function onCaptchaError () {
    toast.push('Failed to verify captcha, try again.', {
      theme: {
        '--toastBackground': '#F56565',
        '--toastBarBackground': '#C53030'
      }
    });
    captcha.reset();
  }

  function onCaptchaSuccess ({ detail: { token } }) {
    submission.captchaToken = token;
  }
</script>

<main>
  <h1 class="text-center">Get in touch.</h1>
  <div class="d-flex justify-content-center flex-row row">
    <div class="border shadow bg-light py-2 col-lg-3 d-flex align-items-center flex-column m-2">
      <h1><i class="bi bi-map-fill"></i></h1>
      <p style="hyphens: auto;">
        <a href="https://maps.app.goo.gl/s1AFqfKvUKgXDCrq5">534 Trejo Street
        <br>
        Suite 200F
        <br>
        Rexburg, ID
        <br>
        83440
        </a>
      </p>
    </div>
    <div class="border shadow bg-light py-2 col-lg-3 d-flex align-items-center flex-column m-2">
      <div><h1><i class="bi bi-phone-fill"></i></h1></div>
      <p style="hyphens: auto;">
        Scheduling and Other
        <br>
        <a href="tel:12084994517">(208) 499 - 4517</a>
      </p>
    </div>
    <div class="border shadow bg-light py-2 col-lg-3 d-flex align-items-center flex-column m-2" style="word-break: break-all;">
      <h1><i class="bi bi-envelope-fill"></i></h1>
      <div>
        <p style="hyphens: auto;">
          Billing
          <br>
          <a href="mailto:billing@mistymountainstherapy.com">billing@mistymountainstherapy.com</a>
        </p>
        <p style="hyphens: auto;">
          Inqueries
          <br>
          <a href="mailto:contact@mistymountainsthreapy.com">contact@mistymountainstherapy.com</a>
        </p>
        <div><em>note: please watch spam for replies</em></div>
      </div>
    </div>
  </div>
  <br>
  <hr>
  <form class="bg-light border shadow p-4" on:submit|preventDefault={handleSubmit}>
    <h2>Or send us a message.</h2>
    <div class="row mb-2">
      <div class="form-group col-md-6">
        <label for="email">Email *</label>
        <input id="email" type="email" class="form-control" bind:value={submission.email} placeholder="johnnyappleseed@example.com" required>
      </div>
      <div class="form-group col-md-6">
        <label for="name">Name *</label>
        <input id="name" type="text" class="form-control" bind:value={submission.name} placeholder="Johnny Appleseed" required>
      </div>
    </div>
    <div class="form-group">
      <label for="phone">Phone</label>
      <input id="phone" type="text" class="form-control" bind:value={submission.phone} placeholder="(208) 123-4567">
    </div>
    <div class="form-group">
      <label for="message">Message *</label>
      <textarea id="message" class="form-control" bind:value={submission.message} rows="3" placeholder="Hello! I would like to schedule a free 15-minute consultation..." required></textarea>
    </div>
    <div class="pt-2">
      <HCaptcha 
        sitekey={import.meta.env.VITE_HCAPTCHA_KEY} 
        bind:this={captcha}
        on:success={onCaptchaSuccess}
        on:error={onCaptchaError}
      />
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <div class="my-2"><em>note: please watch spam for any replies</em></div>
  </form>
  <br>

  <div class="bg-light border shadow p-4">
	<div class="d-flex justify-content-center">
		<div class="col-md-8 mt-2">
			<div>
				We do not have a crisis line. If you or someone you know is in danger please call 911, visit
				your nearest emergency room, call the National Suicide Prevention Lifeline for free crisis
				counseling at <a href="tel:18002738255">(800)273-TALK</a> (8255), or text HELLO to 741-741.
			</div>
		</div>
	</div>
  </div>
</main>