parent
f66d5e9e25
commit
a5543e0099
BIN
.doit.db.db
BIN
.doit.db.db
Binary file not shown.
|
|
@ -0,0 +1,14 @@
|
|||
<!--
|
||||
.. title: Formulario de inscripción
|
||||
.. slug: inscription
|
||||
.. date: 2025-08-15 11:55:30 UTC+01:00
|
||||
.. tags:
|
||||
.. category:
|
||||
.. link:
|
||||
.. description: Formulario de inscripción en EDUCATIC
|
||||
.. type: text
|
||||
-->
|
||||
|
||||
{{% nextcloud_forms link="https://nube.txs.es/apps/forms/s/BPYqzqF44bFCXb3H7eFe8888" %}}
|
||||
¡Muchas gracias! En breve nos pondremos en contacto contigo
|
||||
{{% /nextcloud_forms %}}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
This plugin embeds a Nextcloud Forms formular in a static site.
|
||||
It provides a mechanism for the static HTML site to embed a form and to collect
|
||||
and store the user data.
|
||||
|
||||
The form specification is loaded at build time from the Nextcloud using the
|
||||
public form link. The HTML form is then build according to the extracted JSON
|
||||
form specification.
|
||||
|
||||
When the submit button is pressed a simple JS function collects the form data
|
||||
and sends it to the Nextcloud server using the public API.
|
||||
|
||||
## Requirements and setup
|
||||
|
||||
For this plugin to work a Nextcloud with the Forms App is needed.
|
||||
|
||||
Create a form and make it public. Copy the public link and pass it as the
|
||||
`link` parameter to the nextcloud_forms shortcut:
|
||||
|
||||
```
|
||||
{{% nextcloud_forms link="https://nextcloud_url/index.php/apps/forms/..." %}}
|
||||
Success Text
|
||||
{{% /nextcloud_forms %}}
|
||||
```
|
||||
|
||||
The `Success Text` is shown after the form is successfully sent to the server.
|
||||
|
||||
## Heads up
|
||||
|
||||
Nextcloud Forms public API is not handling CORS requests correctly, especially
|
||||
the preflight checks. This leads to the XmlHTTPRequest failing with a CORS
|
||||
error and the browser not submitting the data.
|
||||
|
||||
At the moment there are two open feature requests at Nextcloud Server and
|
||||
Nextcloud Forms that should fix these issues:
|
||||
|
||||
- https://github.com/nextcloud/server/pull/31698
|
||||
- https://github.com/nextcloud/forms/pull/1139
|
||||
|
||||
Until these are merged into upstream, at least the changes to Nextcloud Forms
|
||||
have to be applied manually to the Nextcloud installation.
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
[Core]
|
||||
name = nextcloud_forms
|
||||
module = nextcloud_forms
|
||||
|
||||
[Nikola]
|
||||
PluginCategory = Shortcode
|
||||
|
||||
[Documentation]
|
||||
author = Andreas Brinner
|
||||
version = 0.1
|
||||
website = https://getnikola.com/
|
||||
description = Embed Nextcloud Forms
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
|
||||
# Copyright © 2022, Andreas Brinner.
|
||||
|
||||
# Permission is hereby granted, free of charge, to any
|
||||
# person obtaining a copy of this software and associated
|
||||
# documentation files (the "Software"), to deal in the
|
||||
# Software without restriction, including without limitation
|
||||
# the rights to use, copy, modify, merge, publish,
|
||||
# distribute, sublicense, and/or sell copies of the
|
||||
# Software, and to permit persons to whom the Software is
|
||||
# furnished to do so, subject to the following conditions:
|
||||
#
|
||||
# The above copyright notice and this permission notice
|
||||
# shall be included in all copies or substantial portions of
|
||||
# the Software.
|
||||
#
|
||||
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
|
||||
# KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
|
||||
# WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
||||
# PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
|
||||
# OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
|
||||
# OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
|
||||
# OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
# SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
|
||||
import os
|
||||
import json
|
||||
import base64
|
||||
import requests
|
||||
|
||||
from html.parser import HTMLParser
|
||||
from urllib.parse import urlparse
|
||||
|
||||
from nikola.plugin_categories import ShortcodePlugin
|
||||
|
||||
|
||||
SUBMIT_FORM_JS_PATH = os.path.join(os.path.dirname(__file__), 'submit_form.js')
|
||||
|
||||
|
||||
class FormDataParser(HTMLParser):
|
||||
def __init__(self, *args, **argv):
|
||||
self.data = {}
|
||||
HTMLParser.__init__(self, *args, **argv)
|
||||
|
||||
def handle_starttag(self, tag, attrs):
|
||||
if tag == "input":
|
||||
data = dict(attrs)
|
||||
if "id" in data and "value" in data:
|
||||
self.data[data["id"]] = json.loads(base64.b64decode(data["value"]))
|
||||
|
||||
|
||||
class Plugin(ShortcodePlugin):
|
||||
"""Plugin for nextcloud_forms directive."""
|
||||
|
||||
name = "nextcloud_forms"
|
||||
|
||||
def get_public_form_data(self, link):
|
||||
try:
|
||||
data = requests.get(link).text
|
||||
except requests.exceptions.RequestException:
|
||||
self.logger.error('Cannot get form data from url={0}', link)
|
||||
|
||||
parser = FormDataParser()
|
||||
parser.feed(data)
|
||||
|
||||
return parser.data
|
||||
|
||||
def generate_ocs_url(self, link):
|
||||
"""Generate the OCS API base url from the given link.
|
||||
|
||||
see also:
|
||||
https://github.com/nextcloud/nextcloud-router/blob/master/lib/index.ts#L29"
|
||||
"""
|
||||
url = urlparse(link)
|
||||
return "{}://{}/ocs/v2.php/apps/forms".format(url.scheme, url.netloc)
|
||||
|
||||
def set_site(self, site):
|
||||
super(type(self), self).set_site(site)
|
||||
with open(SUBMIT_FORM_JS_PATH, "r") as fd:
|
||||
submit_form_js = "<script>{}</script>".format(fd.read())
|
||||
site.template_hooks['body_end'].append(submit_form_js)
|
||||
|
||||
def handler(self, link, template="nextcloud_forms.tmpl",
|
||||
site=None, data=None, lang=None, post=None, **argv):
|
||||
"""Create HTML for Nextcloud Forms formular."""
|
||||
|
||||
form_data = self.get_public_form_data(link)
|
||||
|
||||
endpoint = self.generate_ocs_url(link)
|
||||
endpoint += "/api/v1.1/submission/insert"
|
||||
|
||||
form = form_data.get("initial-state-forms-form")
|
||||
if not form:
|
||||
self.logger.error('No form defintion fond in url={}'.format(link))
|
||||
|
||||
template_deps = site.template_system.template_deps(template, site.GLOBAL_CONTEXT)
|
||||
template_data = site.GLOBAL_CONTEXT.copy()
|
||||
template_data.update({
|
||||
'lang': lang,
|
||||
'form': form,
|
||||
'endpoint': endpoint,
|
||||
'initial_state': form_data,
|
||||
'success_data': data,
|
||||
})
|
||||
output = site.template_system.render_template(
|
||||
template, None, template_data)
|
||||
return output, template_deps + [__file__, SUBMIT_FORM_JS_PATH]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
Nextcloud::https://nextcloud.com/install
|
||||
Nextcloud Forms App::https://apps.nextcloud.com/apps/forms
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
(function () {
|
||||
function submit(ev) {
|
||||
const form = ev.target;
|
||||
|
||||
ev.preventDefault();
|
||||
|
||||
const answers = {};
|
||||
const [,formId] = form.id.split("-");
|
||||
|
||||
for (let i = 0; i < form.length; i++) {
|
||||
var input = form[i];
|
||||
|
||||
// extract question id (qid) and answer id (aid)
|
||||
var [,,qid,,aid] = input.id.split("-");
|
||||
|
||||
if ( qid && !(qid in answers) )
|
||||
answers[qid] = [];
|
||||
|
||||
switch (input.type) {
|
||||
case "checkbox":
|
||||
case "radio":
|
||||
if (input.checked)
|
||||
answers[qid].push(aid);
|
||||
console.log(input.type, input.id, qid, aid, input.checked);
|
||||
break;
|
||||
|
||||
case "select-one":
|
||||
case "text":
|
||||
case "textarea":
|
||||
case "date":
|
||||
case "datetime-local":
|
||||
if (input.value)
|
||||
answers[qid].push(input.value);
|
||||
console.log(input.type, input.id, qid, input.value);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log("unknown form element type:", input.type);
|
||||
}
|
||||
}
|
||||
|
||||
const request = new XMLHttpRequest();
|
||||
request.open("POST", form.action, true);
|
||||
request.setRequestHeader("OCS-APIRequest", "true");
|
||||
request.setRequestHeader("Accept", "application/json");
|
||||
request.setRequestHeader("Content-Type", "application/json");
|
||||
request.onload = function () {
|
||||
const message = document.getElementById("form-" + formId + "-messages");
|
||||
const form = document.getElementById("form-" + formId);
|
||||
const success = document.getElementById("form-" + formId + "-success");
|
||||
const response = JSON.parse(this.response);
|
||||
|
||||
if (this.status == 200) {
|
||||
// success
|
||||
form.style.display = "none";
|
||||
success.style.display = "block";
|
||||
} else {
|
||||
message.innerHTML = '<div class="alert alert-danger" role="alert">' +
|
||||
this.statusText + "(" + this.status + "): " +
|
||||
response['ocs']['meta']['message'] +
|
||||
'</div>';
|
||||
}
|
||||
};
|
||||
request.send(JSON.stringify({'formId': formId, 'answers': answers}));
|
||||
}
|
||||
|
||||
for (let i = 0; i < document.forms.length; i++)
|
||||
document.forms[i].onsubmit = submit;
|
||||
})();
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<form action="{{ endpoint }}" id="form-{{ form.id }}">
|
||||
<div id="form-{{ form.id }}-messages"></div>
|
||||
|
||||
{% for question in form.questions %}
|
||||
<div class="mb-3">
|
||||
<label for="{{ question.formId }}-question-{{question.id}}"
|
||||
class="form-label">{{ question.text }}{{ " *" if question.isRequired }}</label>
|
||||
{% if question.type == "short" %}
|
||||
<input type="text" class="form-control"
|
||||
id="{{ question.formId }}-question-{{question.id}}"
|
||||
aria-label="Eine kurze Antwort zu Frage „{{ question.text }}“"
|
||||
placeholder="Kurze Antwort eingeben"
|
||||
maxlength="4096" minlength="1" {{ "required" if question.isRequired }}>
|
||||
{% elif question.type == "long" %}
|
||||
<textarea class="form-control"
|
||||
id="{{ question.formId }}-question-{{question.id}}"
|
||||
aria-label="Eine lange Antwort zu Frage „{{ question.text }}“"
|
||||
placeholder="Einen langen Text eingeben"
|
||||
maxlength="4096" minlength="1" {{ "required" if question.isRequired }}
|
||||
rows="3">
|
||||
</textarea>
|
||||
{% elif question.type == "multiple" %}
|
||||
{% for option in question.options %}
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="{{ question.formId }}-question-{{ question.id }}-answer-{{ option.id }}">
|
||||
<label class="form-check-label"
|
||||
for="{{ question.formId }}-question-{{ question.id }}-answer-{{ option.id }}">
|
||||
{{ option.text }}
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% elif question.type == "multiple_unique" %}
|
||||
{% for option in question.options %}
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" {{ "required" if question.isRequired }}
|
||||
name="{{ question.formId }}-question-{{ question.id }}"
|
||||
id="{{ question.formId }}-question-{{ question.id }}-answer-{{ option.id }}">
|
||||
<label class="form-check-label"
|
||||
for="{{ question.formId }}-question-{{ question.id }}-answer-{{ option.id }}">
|
||||
{{ option.text }}
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% elif question.type == "dropdown" %}
|
||||
<select class="form-select" {{ "required" if question.isRequired }}
|
||||
name="{{ question.text }}"
|
||||
id="{{ question.formId }}-question-{{ question.id }}">
|
||||
<option value=""> Wählen Sie eine Option </option>
|
||||
{% for option in question.options %}
|
||||
<option value="{{ option.id }}"
|
||||
id="{{ question.formId }}-question-{{ question.id }}-answer-{{ option.id }}">
|
||||
{{ option.text }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% elif question.type == "date" %}
|
||||
<input class="form-control" type="date" placeholder="Datum auswählen"
|
||||
{{ "required" if question.isRequired }}
|
||||
id="{{ question.formId }}-question-{{ question.id }}">
|
||||
{% elif question.type == "datetime" %}
|
||||
<input class="form-control" type="datetime-local"
|
||||
{{ "required" if question.isRequired }}
|
||||
placeholder="Datum und Uhrzeit auswählen"
|
||||
id="{{ question.formId }}-question-{{ question.id }}">
|
||||
{% else %}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
Unbekannter Frage Typ (question.type: {{ question.type }})
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<button type="submit" aria-label="Formular übermitteln"
|
||||
class="btn btn-primary">Übermitteln
|
||||
</button>
|
||||
</form>
|
||||
<div style="display: none;" id="form-{{ form.id }}-success">
|
||||
{{ success_data if success_data else "Success" }}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<form action="${endpoint}" id="form-${form['id']}">
|
||||
<div id="form-${form['id']}-messages"></div>
|
||||
|
||||
% for question in form['questions']:
|
||||
<div class="mb-3">
|
||||
<label for="${question['formId'] }-question-${question['id']}"
|
||||
class="form-label">${question['text']}
|
||||
% if question['isRequired']:
|
||||
*
|
||||
% endif
|
||||
</label>
|
||||
% if question['type'] == "short":
|
||||
<input type="text" class="form-control"
|
||||
id="${question['formId'] }-question-${question['id']}"
|
||||
aria-label="A short answer to question '${question['text']}'"
|
||||
placeholder="Enter a short answer"
|
||||
maxlength="4096" minlength="1"
|
||||
% if question['isRequired']:
|
||||
required
|
||||
% endif
|
||||
% elif question['type'] == "long":
|
||||
<textarea class="form-control"
|
||||
id="${question['formId']}-question-${question['id']}"
|
||||
aria-label="A long answer to the question '${question['text']}'"
|
||||
placeholder="Enter a long text"
|
||||
maxlength="4096" minlength="1"
|
||||
% if question['isRequired']:
|
||||
required
|
||||
% endif
|
||||
rows="3">
|
||||
</textarea>
|
||||
% elif question['type'] == "multiple":
|
||||
% for option in question['options']:
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="${question['formId']}-question-${question['id']}-answer-${option['id']}">
|
||||
<label class="form-check-label"
|
||||
for="${question['formId']}-question-${question['id']}-answer-${option['id']}">
|
||||
${option['text']}
|
||||
</label>
|
||||
</div>
|
||||
% endfor
|
||||
% elif question['type'] == "multiple_unique":
|
||||
% for option in question['options']:
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio"
|
||||
% if question['isRequired']:
|
||||
required
|
||||
% endif
|
||||
name="${question['formId']}-question-${question['id']}"
|
||||
id="${question['formId']}-question-${question['id']}-answer-${option['id']}">
|
||||
<label class="form-check-label"
|
||||
for="${question['formId']}-question-${question['id']}-answer-${option['id']}">
|
||||
${option['text']}
|
||||
</label>
|
||||
</div>
|
||||
% endfor
|
||||
% elif question['type'] == "dropdown":
|
||||
<select class="form-select"
|
||||
% if question['isRequired']:
|
||||
required
|
||||
% endif
|
||||
name="${question['text']}"
|
||||
id="${question['formId']}-question-${question['id']}">
|
||||
<option value=""> Select an option</option>
|
||||
% for option in question['options']:
|
||||
<option value="${option['id']}"
|
||||
id="${question['formId']}-question-${question['id']}-answer-${option['id']}">
|
||||
${option['text']}</option>
|
||||
% endfor
|
||||
</select>
|
||||
% elif question['type'] == "date":
|
||||
<input class="form-control" type="date" placeholder="Select a date"
|
||||
% if question['isRequired']:
|
||||
required
|
||||
% endif
|
||||
id="${question['formId']}-question-${question['id']}">
|
||||
% elif question['type'] == "datetime":
|
||||
<input class="form-control" type="datetime-local"
|
||||
% if question['isRequired']:
|
||||
required
|
||||
% endif
|
||||
placeholder="Select a date and time"
|
||||
id="${question['formId']}-question-${question['id']}">
|
||||
% else:
|
||||
<div class="alert alert-danger" role="alert">
|
||||
Unknown question type (question.type: ${question['type']})
|
||||
</div>
|
||||
% endif
|
||||
</div>
|
||||
% endfor
|
||||
|
||||
<button type="submit" aria-label="Submit the form"
|
||||
class="btn btn-primary">Submit
|
||||
</button>
|
||||
</form>
|
||||
<div style="display: none;" id="form-${form['id']}-success">
|
||||
% if success_data:
|
||||
${success_data}
|
||||
% else:
|
||||
Success
|
||||
% endif
|
||||
</div>
|
||||
Loading…
Reference in New Issue