Klaviyo signup

Newsletter signup for a Klaviyo list.

Why these fields

First name: First name captures a short, searchable answer but remains optional.
Email: Email provides a validated reply address and is required to complete the request.
Phone (optional): Phone (optional) provides a direct callback option but remains optional.
Subscribe me to SMS and email updates: Subscribe me to SMS and email updates records a clear acknowledgement or preference but remains optional.

Fields

First nametextEmailemailrequiredPhone (optional)telSubscribe me to SMS and email updatescheckbox

Preview

Code

<script setup lang="ts">
import { ref } from "vue";

const sent = ref(false);

async function onSubmit(e: Event) {
  const form = e.target as HTMLFormElement;
  const res = await fetch("https://forms.formward.eu/f/your-form-id", {
    method: "POST",
    headers: { Accept: "application/json" },
    body: new FormData(form),
  });
  if (res.ok) {
    sent.value = true;
    form.reset();
  }
}
</script>

<template>
  <p v-if="sent">Thanks! Your message has been sent.</p>
  <form v-else @submit.prevent="onSubmit">
    <label for="name">First name</label>
    <input type="text" name="name" id="name" />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required />
    <label for="phone">Phone (optional)</label>
    <input type="tel" name="phone" id="phone" />
    <label>
      <input type="checkbox" name="consent" id="consent" /> Subscribe me to SMS and email updates
    </label>
    <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
    <button type="submit">Send</button>
  </form>
</template>

Customize before publishing

Remove fields you do not need and mark only essential answers as required.
Replace placeholder wording with terms your audience already understands.
Add your privacy notice, retention details and expected response time.
Test keyboard focus, validation errors and the confirmation state on mobile.

Use this with Formward

Create a form, copy your endpoint, and replace https://forms.formward.eu/f/your-form-id in the code above.

Get started free →