JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<form class="js-form form form-stacked" method="post" action="https://api.staticman.net/v1/entry/{{ site.repository }}/{{ site.staticman.branch }}">
<div class="title">
<textarea type="text" name="fields[message]" class="field-light" rows="3" placeholder="Hier dein Kommentar..."></textarea>
</div>
<div style="display: none">
<input type="text" name="fields[name]" class="field-light" placeholder="Dein Name *">
<input type="text" name="fields[email]" class="field-light" placeholder="Deine E-Mail">
<input type="text" name="fields[url]" class="field-light" placeholder="Deine Webseite mit http://">
<input type="hidden" name="options[slug]" value="{{ page.slug }}">
</div>
<!-- Start static comments Sendestatus -->
<div class="mb1 js-modal-text"></div>
<!-- End static comments Sendestatus -->
<button type="submit" id="laden" class="button button-blue button-big mobile-block">Senden</button>
</form>
</div>
JavaScript
(function ($) {
var $comments = $('.js-comments');
$('.js-form').submit(function () {
var form = this;
$(form).addClass('form--loading');
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
contentType: 'application/x-www-form-urlencoded',
success: function (data) {
showModal('Hey Danke, dein Kommentar wurde gesendet und wird von mir überprüft.');
$(form).removeClass('form--loading');
},
error: function (err) {
console.log(err);
showModal('Fehler, bitte überprüfe, ob du alle Pflichtfelder ausgefüllt hast...');
$(form).removeClass('form--loading');
}
});
return false;
});
$('.js-close-modal').click(function () {
$('body').removeClass('show-modal');
});
function showModal(message) {
$('.js-modal-text').html(message);
$('body').addClass('show-modal');
}
})(jQuery);
$(function () {
$(".title").click(function () {
$(this).next().show(200);
});
});