165 lines
10 KiB
HTML
165 lines
10 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="https://docs.librepages.org/main.css">
|
|
<link rel="icon" href="https://docs.librepages.org/favicon/favicon.ico">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
|
|
<title> LibrePages Docs | Add to Website </title>
|
|
<!-- Matomo -->
|
|
<script>
|
|
var _paq = window._paq = window._paq || [];
|
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
|
|
_paq.push(["setCookieDomain", "*.docs.librepages.org"]);
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//matomo.librepages.org/";
|
|
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
|
_paq.push(['setSiteId', '5']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
<noscript><p><img src="//matomo.librepages.org/matomo.php?idsite=5&rec=1" style="border:0;" alt="" /></p></noscript>
|
|
<!-- End Matomo Code -->
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<script>
|
|
fetch('https://git.batsense.net/LibrePages/forms/releases')
|
|
.then((response) => {
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
let release_name = data.name;
|
|
let html_url = data.html_url;
|
|
release.innerHTML = `<a href='${html_url}'>${release_name}</a>`;
|
|
});
|
|
</script>
|
|
<main>
|
|
|
|
<nav>
|
|
<a href="https://docs.librepages.org">
|
|
<img src="https://docs.librepages.org/logo.png" alt="logo"/>
|
|
</a>
|
|
<div id="release"></div>
|
|
<a href="javascript:void(0);" onclick="burger()" id="mobile" class="ms-Icon--GlobalNavButton"></a>
|
|
<div id="trees">
|
|
<input class="tree-toggle" type="checkbox" id="forms"
|
|
checked/>
|
|
<label class="tree-toggle-label"
|
|
for="forms">Forms</label>
|
|
|
|
<ul class="subtree">
|
|
<li class="active">
|
|
<a href="https://docs.librepages.org/forms/add/">Add to Website</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<article>
|
|
|
|
<div id="on_right">
|
|
<span id="search-ico" class="ms-Icon--Search"></span>
|
|
</div>
|
|
<div class="search-container">
|
|
<input id="search" type="search" placeholder="Search as you type...">
|
|
<div class="search-results">
|
|
<div class="search-results__header"></div>
|
|
<ul class="search-results__items"></ul>
|
|
</div>
|
|
</div>
|
|
<div id="wrap">
|
|
|
|
<p>LibrePages accepts form submissions from all webpages served by it. We
|
|
support form submissions in two formats:</p>
|
|
<ol>
|
|
<li>Default encoding for HTTP forms(<code>application/x-www-form-urlencoded</code>)</li>
|
|
<li>JSON</li>
|
|
</ol>
|
|
<h2 id="1-enable-forms">1. Enable forms <a class="anchor" href="#1-enable-forms"></a></h2>
|
|
<p>To enable forms on LibrePages go to <code>dashboard > submissions</code> and click
|
|
on enable forms.</p>
|
|
<h2 id="2-integration-on-your-website">2. Integration on your website <a class="anchor" href="#2-integration-on-your-website"></a></h2>
|
|
<h3 id="html-forms">HTML Forms <a class="anchor" href="#html-forms"></a></h3>
|
|
<p>Forms can be added to websites with just the HTML code for it. For
|
|
instance:</p>
|
|
<pre data-lang="html" style="background-color:#eff1f5;color:#4f5b66;" class="language-html "><code class="language-html" data-lang="html"><span><</span><span style="color:#bf616a;">form
|
|
</span><span> </span><span style="color:#8fa1b3;">id</span><span>="</span><span style="color:#a3be8c;">newsletter-form</span><span>"
|
|
</span><span> </span><span style="color:#d08770;">method</span><span>="</span><span style="color:#a3be8c;">POST</span><span>"
|
|
</span><span> </span><span style="color:#d08770;">action</span><span>="</span><span style="color:#a3be8c;">https://<librepages-endpoint>/?path=<current-path>&host=<current-host></span><span>"
|
|
</span><span>>
|
|
</span><span> <</span><span style="color:#bf616a;">p</span><span>>
|
|
</span><span> Interested in receiving latest news about our cool product? Sign
|
|
</span><span> up for you fantastic newsletter!
|
|
</span><span> </</span><span style="color:#bf616a;">p</span><span>>
|
|
</span><span> <</span><span style="color:#bf616a;">label
|
|
</span><span> >Email Address:<</span><span style="color:#bf616a;">input </span><span style="color:#d08770;">type</span><span>="</span><span style="color:#a3be8c;">email</span><span>" </span><span style="color:#8fa1b3;">id</span><span>="</span><span style="color:#a3be8c;">email</span><span>" </span><span style="color:#d08770;">name</span><span>="</span><span style="color:#a3be8c;">email</span><span>"
|
|
</span><span> /></</span><span style="color:#bf616a;">label</span><span>>
|
|
</span><span> <</span><span style="color:#bf616a;">button </span><span style="color:#d08770;">type</span><span>="</span><span style="color:#a3be8c;">submit</span><span>">Send</</span><span style="color:#bf616a;">button</span><span>>
|
|
</span><span></</span><span style="color:#bf616a;">form</span><span>>
|
|
</span></code></pre>
|
|
<h3 id="javascript-forms-with-fetch-api">JavaScript forms with Fetch API <a class="anchor" href="#javascript-forms-with-fetch-api"></a></h3>
|
|
<p>Optionally, the submission can also be customized with frontend
|
|
JavaScript code:</p>
|
|
<blockquote>
|
|
<p>You can you use any HTTP request API you like but for this guide, we
|
|
will be using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a></p>
|
|
</blockquote>
|
|
<pre data-lang="html" style="background-color:#eff1f5;color:#4f5b66;" class="language-html "><code class="language-html" data-lang="html"><span><</span><span style="color:#bf616a;">form </span><span style="color:#8fa1b3;">id</span><span>="</span><span style="color:#a3be8c;">newsletter-form</span><span>" </span><span style="color:#d08770;">method</span><span>="</span><span style="color:#a3be8c;">POST</span><span>">
|
|
</span><span> <</span><span style="color:#bf616a;">p</span><span>>
|
|
</span><span> Interested in receiving latest news about our cool product? Sign
|
|
</span><span> up for you fantastic newsletter!
|
|
</span><span> </</span><span style="color:#bf616a;">p</span><span>>
|
|
</span><span> <</span><span style="color:#bf616a;">label
|
|
</span><span> >Email Address:<</span><span style="color:#bf616a;">input </span><span style="color:#d08770;">type</span><span>="</span><span style="color:#a3be8c;">email</span><span>" </span><span style="color:#8fa1b3;">id</span><span>="</span><span style="color:#a3be8c;">email</span><span>" </span><span style="color:#d08770;">name</span><span>="</span><span style="color:#a3be8c;">email</span><span>"
|
|
</span><span> /></</span><span style="color:#bf616a;">label</span><span>>
|
|
</span><span> <</span><span style="color:#bf616a;">button </span><span style="color:#d08770;">type</span><span>="</span><span style="color:#a3be8c;">submit</span><span>">Send</</span><span style="color:#bf616a;">button</span><span>>
|
|
</span><span></</span><span style="color:#bf616a;">form</span><span>>
|
|
</span><span>
|
|
</span><span><</span><span style="color:#bf616a;">script</span><span>>
|
|
</span><span> </span><span style="color:#b48ead;">const </span><span style="color:#bf616a;">form </span><span>= document.</span><span style="color:#bf616a;">getElementById</span><span>("</span><span style="color:#a3be8c;">newsletter-form</span><span>");
|
|
</span><span>
|
|
</span><span> </span><span style="color:#b48ead;">async function </span><span style="color:#8fa1b3;">handleSubmit</span><span>() {
|
|
</span><span> </span><span style="color:#b48ead;">const </span><span style="color:#bf616a;">url </span><span>=
|
|
</span><span> "</span><span style="color:#a3be8c;">https://<librepages-endpoint>/api/v1/forms/submit?host=<current-host>&path=<current-path></span><span>";
|
|
</span><span> </span><span style="color:#b48ead;">const </span><span style="color:#bf616a;">data </span><span>= {
|
|
</span><span> email: document.</span><span style="color:#bf616a;">getElementById</span><span>("</span><span style="color:#a3be8c;">email</span><span>"),
|
|
</span><span> };
|
|
</span><span>
|
|
</span><span> </span><span style="color:#b48ead;">await </span><span style="color:#bf616a;">fetch</span><span>(</span><span style="color:#bf616a;">url</span><span>, {
|
|
</span><span> method: "</span><span style="color:#a3be8c;">POST</span><span>",
|
|
</span><span> headers: {
|
|
</span><span> "</span><span style="color:#a3be8c;">Content-Type</span><span>": "</span><span style="color:#a3be8c;">application/json</span><span>",
|
|
</span><span> },
|
|
</span><span> body: JSON.</span><span style="color:#96b5b4;">stringify</span><span>(</span><span style="color:#bf616a;">data</span><span>),
|
|
</span><span> });
|
|
</span><span> }
|
|
</span><span>
|
|
</span><span> </span><span style="color:#bf616a;">form</span><span>.</span><span style="color:#bf616a;">addEventListener</span><span>("</span><span style="color:#a3be8c;">submit</span><span>", </span><span style="color:#bf616a;">handleSubmit</span><span>);
|
|
</span><span></</span><span style="color:#bf616a;">script</span><span>>
|
|
</span></code></pre>
|
|
<blockquote>
|
|
<p>Note: the following snippet also demonstrates JSON form submission</p>
|
|
</blockquote>
|
|
|
|
|
|
</div>
|
|
|
|
</article>
|
|
</main>
|
|
|
|
|
|
<script type="text/javascript" src="https://docs.librepages.org/elasticlunr.min.js" defer></script>
|
|
<script type="text/javascript" src="https://docs.librepages.org/search_index.en.js" defer></script>
|
|
<script type="text/javascript" src="https://docs.librepages.org/js.js" defer></script>
|
|
</body>
|
|
</html>
|