Rental application

Collect applicant details for a rental property.

Why these fields

Full name: Full name captures a short, searchable answer and is required to complete the request.
Email: Email provides a validated reply address and is required to complete the request.
Phone: Phone provides a direct callback option and is required to complete the request.
Property address: Property address captures a short, searchable answer and is required to complete the request.
Desired move-in date: Desired move-in date collects an unambiguous date but remains optional.
Monthly income: Monthly income collects a value that can be validated and compared but remains optional.
Do you have pets?: Do you have pets? records a clear acknowledgement or preference but remains optional.
Additional notes: Additional notes leaves room for context and detail but remains optional.

Fields

Full nametextrequiredEmailemailrequiredPhonetelrequiredProperty addresstextrequiredDesired move-in datedateMonthly incomenumberDo you have pets?checkboxAdditional notestextarea

Preview

Code

<!-- components/RentalApplicationForm.vue — auto-imported by Nuxt. -->
<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">Full name</label>
    <input type="text" name="name" id="name" required />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required />
    <label for="phone">Phone</label>
    <input type="tel" name="phone" id="phone" required />
    <label for="property">Property address</label>
    <input type="text" name="property" id="property" required />
    <label for="move_in">Desired move-in date</label>
    <input type="date" name="move_in" id="move_in" />
    <label for="income">Monthly income</label>
    <input type="number" name="income" id="income" />
    <label>
      <input type="checkbox" name="pets" id="pets" /> Do you have pets?
    </label>
    <label for="notes">Additional notes</label>
    <textarea name="notes" id="notes"></textarea>
    <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 →