docs/content/forms/add.md
Aravinth Manivannan e2a97f1059
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
feat: update forms instructions
closes: #1
2022-12-31 01:41:18 +05:30

86 lines
2 KiB
Markdown

+++
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"
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](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 =
"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