diff --git a/assets/css/style.css b/assets/css/style.css index 3104edf..2a6d907 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -31,6 +31,9 @@ --wtf-light-grey: #edefeb; --wtf-lila: #6600ff; + /* misc colors */ + --dark-red: #dc0000; + --column-count: 3; } @@ -882,6 +885,40 @@ hr.-even { flex-direction: column; justify-content: flex-start; } + +.contact_form--required { + color: var(--dark-red) +} + +.content__contact_form { + +} + +.contact_form__textarea, +.contact_form__text_input, +.contact_form__captcha { + display: flex; + flex-direction: column; +} + +.contact_form__message { + height: 12em; +} + +.contact_form__message, +.contact_form__name, +.contact_form__email, +.contact_form__captcha { + font-family: 'Lato', sans-serif; + line-height: 1.3rem; + font-size: 1rem; +} + +/* Hide captcha field as part of spam protection. + We got no real captcha. */ +.contact_form__captcha { + display: none; +} /* main - Ende */ /* footer - Start */ diff --git a/assets/js/contact_form.js b/assets/js/contact_form.js new file mode 100644 index 0000000..2197618 --- /dev/null +++ b/assets/js/contact_form.js @@ -0,0 +1,31 @@ +const ajaxUrl = 'https://spielwiese.wtf-eg.de/php/contact_form.php'; +// const submit_button = document.getElementsByClassName('contact_form__submit_button')[0]; +const contact_form = document.getElementsByClassName('content__contact_form')[0]; +const message = document.getElementsByClassName('contact_form__message')[0]; +const name = document.getElementsByClassName('contact_form__name')[0]; +const email = document.getElementsByClassName('contact_form__email')[0]; +const captcha = document.getElementsByClassName('contact_form__captcha')[0]; + +contact_form.addEventListener('submit', function(event) { + event.preventDefault(); + let formData = new FormData(); + formData.append('message', message.value); + formData.append('name', name.value); + formData.append('email', email.value); + + // If some bot entered some value, return. + if (typeof captcha.value == 'undefined') { + formData.append('captcha', 'Nudelsuppe'); + } else { + console.log('bot detected'); + return; + } + + fetch(ajaxUrl, { + method: 'POST', + mode:'same-origin', + body: formData, + }) + .then(response => response.json()) + .then(json => {console.log(json)}); +}, false); diff --git a/assets/js/contact_form_toggle.js b/assets/js/contact_form_toggle.js new file mode 100644 index 0000000..b2dce0c --- /dev/null +++ b/assets/js/contact_form_toggle.js @@ -0,0 +1,5 @@ +/* Unhide contact form if JS is enabled */ +window.addEventListener('DOMContentLoaded', (event) => { + const contact_form_wrapper = document.getElementsByClassName('content__contact_form_wrapper')[0]; + contact_form_wrapper.style.setProperty('display', 'block'); +}); diff --git a/assets/php/contact_form.php b/assets/php/contact_form.php new file mode 100644 index 0000000..9f2d077 --- /dev/null +++ b/assets/php/contact_form.php @@ -0,0 +1,77 @@ + json_last_error_msg()]); + if ($json === false) { + // This should not happen, but … + $json = '{"jsonError":"unknown"}'; + } + // Set HTTP response status code to: 500 - Internal Server Error + http_response_code(500); + } + header('Content-type: application/json'); + echo $json; +} + +if ($_SERVER["REQUEST_METHOD"] == "POST") { + $response = array(); + + if ( + empty($_POST['message']) || + empty($_POST['email']) || + empty($_POST['name']) || + $_POST['captcha'] != 'Nudelsuppe' + ) { + if (empty($_POST['message'])) { + $response['errors'][] = 'Du hast keine Nachricht eingegeben.'; + } + if (empty($_POST['email'])) { + $response['errors'][] = 'Du hast keine E-Mail-Adresse eingegeben.'; + } + if (empty($_POST['name'])) { + $response['errors'][] = 'Du hast keinen Namen eingegeben.'; + } + if ($_POST['captcha'] != 'Nudelsuppe') { + $response['errors'][] = 'Wir glauben du bist ein Bot.'; + } + } else { + $message = sanitize_text('message'); + $name = sanitize_text('name'); + $email = sanitize_text('email'); + + if (!send_message_to_office($message, $name, $email)) { + $response['errors'][] = 'Deine Nachricht konnte nicht übermittelt werden.'; + } else { + $response['status'] = 'ok'; + } + } + send_response($response); +} else { + http_response_code(404); +} diff --git a/content/kontakt/contents.lr b/content/kontakt/contents.lr index 149dd42..9094eac 100644 --- a/content/kontakt/contents.lr +++ b/content/kontakt/contents.lr @@ -1,4 +1,4 @@ -_model: page +_model: contact_page --- title: Kontakt --- diff --git a/models/contact_page.ini b/models/contact_page.ini new file mode 100644 index 0000000..1ad4298 --- /dev/null +++ b/models/contact_page.ini @@ -0,0 +1,4 @@ +[model] +name = Contact Page +label = {{ this.title }} +inherits = page diff --git a/templates/contact_page.html b/templates/contact_page.html new file mode 100644 index 0000000..626c961 --- /dev/null +++ b/templates/contact_page.html @@ -0,0 +1,51 @@ +{% extends "header_slim.html" %} +{%- block title -%}{{ this.title }}{%- endblock -%} +{%- block meta_description -%} + {%- if this.meta_description is defined and this.meta_description != "" -%} + {{ this.meta_description }} + {%- else -%} + Werkkooperative der Technikfreundinnen eG + {%- endif -%} +{%- endblock -%} +{% block body %} +
+
+

{{ this.title }}

+
+
+
+
+
+ {{ this.body }} +
+ +
+
+{% endblock %} \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html index 6b8ead4..79dd07c 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -63,6 +63,9 @@ __ ____________________ {% if 'manifest.json'|asseturl is defined -%} {%- endif %} + {% if '/js/contact_form_toggle.js'|asseturl is defined -%} + + {%- endif %}
@@ -128,4 +131,7 @@ __ ____________________ {%- if '/js/nav_toggle.js'|asseturl is defined -%} {%- endif %} + {% if '/js/contact_form_toggle.js'|asseturl is defined -%} + + {%- endif %}