Vev Help Center
Searchโ€ฆ
Creating a simple form
Vev creates static websites, which means data storage/submissions will need to be sent to a third party. In this lesson, we will create a Form that submits data to a Formspree endpoint.
In the example code below we have taken the React sample code from https://formspree.io/forms/{formId}/integration and created the following code from it:
1
import { useState } from 'react';
2
โ€‹
3
/**
4
* Formspree and Vev example form.
5
* code from: https://formspree.io/forms/{yourFormID}/integration
6
* rewritten to functional component since its shorter & prettier.
7
*/
8
export default function ({ }: Props) {
9
const [status, setStatus] = useState<string>('');
10
โ€‹
11
const submitForm = ev => {
12
ev.preventDefault();
13
const form = ev.target;
14
const data = new FormData(form);
15
const xhr = new XMLHttpRequest();
16
xhr.open(form.method, form.action);
17
xhr.setRequestHeader("Accept", "application/json");
18
xhr.onreadystatechange = () => {
19
if (xhr.readyState !== XMLHttpRequest.DONE) return;
20
if (xhr.status === 200) {
21
form.reset();
22
setStatus("SUCCESS");
23
} else {
24
setStatus("ERROR");
25
}
26
};
27
xhr.send(data);
28
}
29
โ€‹
30
return (
31
<form
32
onSubmit={submitForm}
33
action="https://formspree.io/f/mzbkepqr"
34
method="POST"
35
>
36
/** Important: Change the formspree.io/f/{id} with your Formspree URL **/
37
<label>Email:</label>
38
<input type="email" name="email" />
39
<label>Message:</label>
40
<input type="text" name="message" />
41
{status === "SUCCESS" ? <p>Thanks!</p> : <button>Submit</button>}
42
{status === "ERROR" && <p>Ooops! There was an error.</p>}
43
</form>
44
);
45
}
Copied!
What does this code actually do? It writes out a <form> element with a third-party (Formspree) endpoint where the data is stored. When the user fills out this form in Vev and clicks submit, the data will be available in Formspree.
And while it may need some styling, the form is fully functional:
โ€‹
With Formspree adding another field is done by adding <input name=โ€yourExtraField /> to your markup. Other third-party providers may require a different implementation. Please see your third-party form provider's documentation.
Last modified 3mo ago
Copy link