Hey guys, thanks for the tips!
I have solved this: just take a look at the contact form (last .dot). I've mixed there php + ajax+ thankYou timeline and tell me what you think.
http://barb.beectrl.a2hosted.com/
Cheers, mk
Here I will paste code for the future generations to use.
<div class="br-form br-form--contact">
<div id="form-messages" class="former"></div>
<form id="contactForm" method="post" action="mailhandler.php">
<div class="contact-col">
<div id="contactName" class="br-row br-name">
<label for="name">Name:</label>
<input id="name" type="text" name="name" required><br>
</div>
<div id="contactLocation" class="br-row br-location">
<label for="email">Email:</label>
<input id="email" type="email" name="email">
</div>
</div>
<div class="contact-col-2">
<div id="sendImage" class="br-row--image">
<svg class="linePLANE" version="1.1" id="Layer_1"
x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40"
style="enable-background:new 0 0 40 40;">
<path class="st16" d="M10.9,27.3c0.1,0,0.2,0,0.3-0.1c0.2-0.2,0.3-0.5,0.1-0.7c-1.5-2-2.3-4.3-2.3-6.7c0-3.9,2-7.5,5.4-9.6
c0.2-0.1,0.3-0.5,0.2-0.7c-0.1-0.2-0.5-0.3-0.7-0.2C10.2,11.5,8,15.4,8,19.7c0,2.7,0.9,5.2,2.5,7.4C10.6,27.2,10.8,27.3,10.9,27.3z
"/>
<path id="circle" d="M20,0C9,0,0,9,0,20s9,20,20,20c11,0,20-9,20-20S31,0,20,0z M20,39C9.5,39,1,30.5,1,20S9.5,1,20,1
c10.5,0,19,8.5,19,19S30.5,39,20,39z"/>
<path class="st16" d="M26.4,9.2c-0.2-0.1-0.6-0.1-0.7,0.2c-0.1,0.2-0.1,0.6,0.2,0.7c3.4,2.1,5.4,5.6,5.4,9.6c0,2.5-0.8,4.8-2.3,6.7
c-0.2,0.2-0.1,0.5,0.1,0.7c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2c1.6-2.1,2.5-4.7,2.5-7.4C32.3,15.4,30.1,11.5,26.4,9.2z"
/>
<path class="st16" d="M22.8,30.6c-1.7,0.4-3.5,0.4-5.2,0c-0.3-0.1-0.6,0.1-0.6,0.4c-0.1,0.3,0.1,0.6,0.4,0.6
c0.9,0.2,1.9,0.3,2.8,0.3s1.9-0.1,2.8-0.3c0.3-0.1,0.4-0.3,0.4-0.6C23.4,30.7,23.1,30.5,22.8,30.6z"/>
<path id="plane" class="st16" d="M20.8,9.6c0-0.2-0.1-0.3-0.3-0.3c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.2,0.1-0.3,0.2-0.3,0.3l-9.2,22.1
c-0.1,0.2,0,0.4,0.1,0.6c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l9-5.9l7.5,4.9c1.6,1,1.6,1,1.7,1c0.2,0,0.3-0.1,0.4-0.2
c0.1-0.1,0.1-0.3,0-0.5L20.8,9.6z M19.7,25.6l-7.6,5l7.6-18.2V25.6z M20.7,25.6V12.2l7.6,18.3C26.1,29.1,21.8,26.2,20.7,25.6z"/>
</svg>
<svg class="lineSVG">
<path class="tick" fill="none" stroke-width="3" stroke-linecap="round"
stroke-linejoin="round" stroke-miterlimit="10" d="M53.5 11.4l-24 32.1-14-9"/>
</svg>
</div>
</div>
<div id="contactText" class="br-row">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div id="contactSubmit" class="br-row">
<button type="submit">Send</button>
</div>
</form>
</div>
GSAP Thank you timeline:
var ticker = document.querySelector('.tick');
TweenMax.set([ticker], {
drawSVG:'0% 0%',
alpha:0
});
var tllol = new TimelineMax({paused: true});
tllol
.staggerTo('.linePLANE .st16', 0.5, {autoAlpha: 0, display: "none"})
.staggerFrom('#form-messages', 0.4, {autoAlpha: 0, y: -40}, "Same time")
.to('#circle', 0.4, {scale: 0.6, transformOrigin: "50% 50%"}, "Same time")
.to([ ticker], 1, {
drawSVG:'95% 0%',
alpha: 1
}, "Same time");
Javascript validator + AJAX
jQuery(document).ready(function ($) {
$(function() {
// Get the form.
var form = $('#contactForm');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Run the GSAP thankyou timeline
tllol.play();
setInterval(function(){
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
//Reverse the timeline after cleaning up the form
tllol.reverse();
},3000);
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
});
PHP mail handler
<?php
/**
* Created by PhpStorm.
* User: mkbeectrl
* Date: 06/01/2017
* Time: 20:56
*/
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "you@example.com";
// Set the email subject.
$subject = "New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
mk1's post in Create timeline for all steps in form was marked as the answer