forked from ag_kommunikation/webseite
feat: WIP Kontaktformular hinzugefügt. (#105)
Die URL ist noch hardcoded. Rückmeldung für den User fehlt noch. Die Nachricht geht noch nirgends hin. Spamprotection ohne Captcha ist nur in Ansätzen zu erkennen.
This commit is contained in:
parent
436be5830b
commit
aeb1ae24fa
@ -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 */
|
||||
|
31
assets/js/contact_form.js
Normal file
31
assets/js/contact_form.js
Normal file
@ -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);
|
5
assets/js/contact_form_toggle.js
Normal file
5
assets/js/contact_form_toggle.js
Normal file
@ -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');
|
||||
});
|
77
assets/php/contact_form.php
Normal file
77
assets/php/contact_form.php
Normal file
@ -0,0 +1,77 @@
|
||||
<?php
|
||||
$message = '';
|
||||
$name = '';
|
||||
$email = '';
|
||||
|
||||
function sanitize_text(string $name) {
|
||||
$text = filter_var($_POST[$name], FILTER_SANITIZE_FULL_SPECIAL_CHARS);
|
||||
$text = trim($text);
|
||||
$text = stripslashes($text);
|
||||
$text = htmlspecialchars($text);
|
||||
|
||||
return $text;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sending email (Platzhalter)
|
||||
*
|
||||
* mail(): Braucht auf dem Server einen korrekt konfigurierten Mailserver
|
||||
* phpmailer: Bibliothek, der per Composer installiert wird. Tut ganz gut mit SMTP.
|
||||
*/
|
||||
function send_message_to_office($message, $name, $email) {
|
||||
return true;
|
||||
}
|
||||
|
||||
function send_response($response_data) {
|
||||
$json = json_encode($response_data);
|
||||
if ($json === false) {
|
||||
// Avoid echo of empty string (which is invalid JSON), and
|
||||
// JSONify the error message instead:
|
||||
$json = json_encode(["jsonError" => 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);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
_model: page
|
||||
_model: contact_page
|
||||
---
|
||||
title: Kontakt
|
||||
---
|
||||
|
4
models/contact_page.ini
Normal file
4
models/contact_page.ini
Normal file
@ -0,0 +1,4 @@
|
||||
[model]
|
||||
name = Contact Page
|
||||
label = {{ this.title }}
|
||||
inherits = page
|
51
templates/contact_page.html
Normal file
51
templates/contact_page.html
Normal file
@ -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 %}
|
||||
<div class="content__box">
|
||||
<div class="content__inner_box">
|
||||
<h1>{{ this.title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<section class="content -odd">
|
||||
<div class="content__box">
|
||||
<div class="content__inner_box -width_constraint">
|
||||
{{ this.body }}
|
||||
</div>
|
||||
<div class="content__inner_box -width_constraint content__contact_form_wrapper" style="display:none">
|
||||
<h2>Kontaktformular</h2>
|
||||
<form id="contact_form" class="content__contact_form">
|
||||
<p class="contact_form__note">
|
||||
Deine E-Mail-Adresse wird nicht veröffentlicht.<br>
|
||||
<span aria-hidden="true">Erforderliche Felder sind gekennzeichnet <span class="contact_form--required" aria-hidden="true">*</span></span>
|
||||
</p>
|
||||
<p class="contact_form__textarea">
|
||||
<label for="message">Nachricht <span class="contact_form--required" aria-hidden="true">*</span></label>
|
||||
<textarea id="message" class="contact_form__message" aria-label="message" aria-hidden="true" cols="65" rows="7" name="message" required></textarea>
|
||||
</p>
|
||||
<p class="contact_form__text_input">
|
||||
<label for="name">Name <span class="contact_form--required" aria-hidden="true">*</span></label>
|
||||
<input id="name" class="contact_form__name" name="name" type="text" value="" size="30" maxlength="245" required />
|
||||
</p>
|
||||
<p class="contact_form__text_input">
|
||||
<label for="email">E-Mail-Adresse <span class="contact_form--required" aria-hidden="true">*</span></label>
|
||||
<input id="email" class="contact_form__email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-address" required />
|
||||
</p>
|
||||
<p class="contact_form__captcha">
|
||||
<label for="captcha">Captcha <span class="contact_form--required" aria-hidden="true">*</span></label>
|
||||
<input id="captcha" class="contact_form__captcha" name="captcha" type="captcha" value="…" size="30" maxlength="100" required placeholder="Wie viele Ecken hat ein Pentagramm?"/>
|
||||
</p>
|
||||
<p class="contact_form__submit">
|
||||
<input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="Kommentar abschicken" />
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
@ -63,6 +63,9 @@ __ ____________________
|
||||
{% if 'manifest.json'|asseturl is defined -%}
|
||||
<link rel="manifest" href="{{ 'manifest.json'|asseturl }}">
|
||||
{%- endif %}
|
||||
{% if '/js/contact_form_toggle.js'|asseturl is defined -%}
|
||||
<script type="text/javascript" src="{{ '/js/contact_form_toggle.js'|asseturl }}"></script>
|
||||
{%- endif %}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -128,4 +131,7 @@ __ ____________________
|
||||
{%- if '/js/nav_toggle.js'|asseturl is defined -%}
|
||||
<script type="text/javascript" src="{{ '/js/nav_toggle.js'|asseturl }}"></script>
|
||||
{%- endif %}
|
||||
{% if '/js/contact_form_toggle.js'|asseturl is defined -%}
|
||||
<script type="text/javascript" src="{{ '/js/contact_form.js'|asseturl }}"></script>
|
||||
{%- endif %}
|
||||
</body>
|
||||
|
Loading…
Reference in New Issue
Block a user