This is a sign up form widget for Vue3 using vee-validate and yup. Add "vee-validate": "^4.5.6","yup": "^0.32.11", to your package.json in the root of the project. Now run npm install in the package.json folder. The formatting used was from Bulma 0.9.3, so just add <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.m…

SignUp.vue

<template>
  <form name="requestForm" @submit.prevent="onSubmit">
    <span class="has-text-grey-dark">Sign up today!</span>
    <h3 class="mb-5 is-size-4 has-text-weight-bold">
      Join Us For A <br />
      Free Taster Session
    </h3>
    <div class="field">
      <div class="control">
        <input class="input" type="text" name="name" v-model="name" placeholder="Your name" />
        <span>{{ errors["name"] }}</span>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input" type="text" name="phone" v-model="phone" placeholder="Phone" />
        <span>{{ errors["phone"] }}</span>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="input" type="email" name="email" v-model="email" placeholder="Email Address" />
        <span>{{ errors["email"] }}</span>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <input class="textarea" type="text" name="message" v-model="message" placeholder="Your message" />
        <span>{{ errors["message"] }}</span>
      </div>
    </div>
    <div class="field">
      <label class="checkbox mb-4">
        <input id="terms" v-model="terms" class="checkbox mr-2" type="checkbox" name="terms" value="1" /><small class="has-text-grey-dark">By signing up, you agree to our <a href="#">Terms, Data Policy</a> and <a href="#">Cookies Policy</a>.</small>
      </label>
    </div>
    <button class="button is-primary py-2 is-fullwidth" :disabled="isDisabled">Send Request</button>
  </form>
</template>

<script>
import { ref, computed } from "vue";
import { useForm, useField, useResetForm } from "vee-validate";
import * as yup from "yup";

export default {
  name: "SignUp",
  setup() {
    const { handleSubmit, errors } = useForm({
      validationSchema: yup.object({
        name: yup.string().required("Please enter a contact name."),
        phone: yup.number().required("Can I get your number?").typeError("This doesn't look like a number."),
        email: yup.string().email().required("Please enter an email address."),
        message: yup.string().required("Please send us a message."),
      }),
    });
    const onSubmit = handleSubmit((values) => {
      alert(JSON.stringify(values, null, 2));
      console.log(values);
      resetForm();
    });
    const resetForm = useResetForm();
    const { value: name } = useField("name");
    const { value: phone } = useField("phone");
    const { value: email } = useField("email");
    const { value: message } = useField("message");
    const terms = ref(false);
    const isDisabled = computed(() => {
      return !terms.value;
    });

    return { onSubmit, isDisabled, name, phone, email, message, terms, errors };
  },
};
</script>

<style scoped></style>