81 lines
1.8 KiB
Markdown
81 lines
1.8 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">
|
||
|
|
<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
|