TruFormsVue contact form
In Vue, a contact form is a <form> with a @submit handler that prevents the default reload, posts the fields, and resets on success — all client-side, no backend. Build a FormData from the event target, append your access_key, and send it to TruForms with fetch.
Unlike React, Vue keeps e.target valid through the await, so you can call e.target.reset() directly after a successful response — no need to capture a ref first. The same single-file component drops into Nuxt unchanged; if you would rather hide the call, proxy it through a Nuxt server route at server/api/contact.post.ts.
Copy-paste snippet
<script setup>
async function submit(e) {
e.preventDefault();
const form = e.target;
const body = new FormData(form);
body.append('access_key', 'YOUR_ACCESS_KEY');
const res = await fetch('https://truforms.truenotech.com/api/submit', { method: 'POST', body });
const result = await res.json();
if (result.success) form.reset();
}
</script>
<template>
<form @submit="submit">
<input name="name" required />
<input name="email" type="email" required />
<textarea name="message" required />
<input name="botcheck" type="text" style="display:none" />
<button>Send</button>
</form>
</template>Replace YOUR_ACCESS_KEY with your form's access key from the dashboard. The access key is public — it only identifies the form.
How it works
- 1
Create a form in the TruForms dashboard and copy its access key.
- 2
Add the component and replace YOUR_ACCESS_KEY.
- 3
Read result.success to show a confirmation, then reset the form.
Notes for Vue
- In a plain `@submit` handler, `e.target` is the form element — no need to capture a ref the way React requires.
- Call `e.preventDefault()` first to stop a full-page reload, then `form.reset()` once `result.success` is true.
- The same component works inside Nuxt; keep the call client-side or proxy it through a Nuxt server route.