docs/content/forms/add.md

+++ 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:

<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

<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