Success screen after sending a message

[mk1]

 Hey guys, first quick question before I will start coding in this thread.

 

How can I connect this animation:  (in example)

to php function which will submit the form so I can show the real progress?

 

I know how to build a working form or an animation ( not every animation ) but I am learning fast ), in fact I didnt try to connect animation and form yet, will try in coming hours but it looks to me a little bit tricky.

See the Pen PwMbbv by chrisgannon (@chrisgannon) on CodePen

[OSUblake]

Well first, if you use that animation, you need to make sure that you give credit to Chris Gannon. He doesn't like it when people use his animations without giving him credit.

 

Second, I don't do php, so I can't help out there. But I don't think this animation is going to play nicely for submitting a form. I would consider the progress for submitting a form to be of indeterminate length. 

 

See the different types of progress loaders in the first video on this page. The animation you linked to would be determinate.

https://material.io/guidelines/components/progress-activity.html#progress-activity-types-of-indicators

 

Determinate can work well, for example, when downloading multiple things. Something where you will get multiple responses back from the server, but not for submitting a form one time. 

[Jonathan]

Hello mk1, and Welcome to the GreenSock Forum!

 

You would need to use AJAX. Use JavaScript to intercept the submit event handler for your form tag. Basically the onSubmit event handler. You return false in that event handler so the form doesn't submit right away and have it run your animation code. When the ajax request comes back as SUCCESS for the submission, then you can show your message or redirect or whatever.

 

I agree with Blake that the form being submitted can take a determinate amount of time. Normally you would use a loading gif or and animation that just loops the same thing over and over again and fade out once the ajax success request comes back.

 

But since you want to use an animation with specific time and you have no way of knowing how long the page will take to submit due to internet connectivity, network issues, etc..

 

In that case you should modify that animation so when the arrow converts to a horizontal line and bounces the dot; Make it so the dot keeps bouncing until you get an AJAX success request back from the server. Then let the animation complete with the dot bouncing up one last time to form the ring and transform into the checkbox.

 

At least that's how i would handle that animation in this case for form progress preloader.

[mk1]

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.";
}

[OSUblake]

Haha. It happened so fast I didn't even see it, so I had to do it twice. Looks good though!

[mk1]

Point taken, I will prolong it a little bit. Thanks!