+++
title = "Add to Website"
weight = 2
sort_by = "weight"
insert_anchor_links = "right"
+++

LibrePages accepts form submissions from all webpages served by it. We
support form submissions in two formats:

1. Default encoding for HTTP forms(`application/x-www-form-urlencoded`)
2. JSON

## 1. Enable forms

To enable forms on LibrePages go to `dashboard > submissions` and click
on enable forms.

## 2. Integration on your website

### HTML Forms

Forms can be added to websites with just the HTML code for it. For
instance:

```html
<form id="newsletter-form" method="POST">
	<p>
		Interested in receiving latest news about our cool product? Sign
		up for you fantastic newsletter!
	</p>
	<label
		>Email Address:<input type="email" id="email" name="email"
	/></label>
	<button type="submit">Send</button>
</form>
```

### JavaScript forms with Fetch API

Optionally, the submission can also be customized with frontend
JavaScript code:

> You can you use any HTTP request API you like but for this guide, we
> will be using [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)

```html
<form id="newsletter-form" method="POST">
	<p>
		Interested in receiving latest news about our cool product? Sign
		up for you fantastic newsletter!
	</p>
	<label
		>Email Address:<input type="email" id="email" name="email"
	/></label>
	<button type="submit">Send</button>
</form>

<script>
	const form = document.getElementById("newsletter-form");

	async function handleSubmit() {
		const url = window.location;
		const data = {
			email: document.getElementById("email"),
		};

		await fetch(url, {
			method: "POST",
			headers: {
				"Content-Type": "application/json",
			},
			body: JSON.stringify(data),
		});
	}

	form.addEventListener("submit", handleSubmit);
</script>
```
> Note: the following snippet also demonstrates JSON form submission