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:

<form
	id="newsletter-form"
	method="POST"
	action="https://<librepages-endpoint>/?path=<current-path>&host=<current-host>"
>
	<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

<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 =
			"https://<librepages-endpoint>/api/v1/forms/submit?host=<current-host>&path=<current-path>";
		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