Grow your CSS skills. Land your dream job.

@CrocoDillon Website Contact Form

  • # June 17, 2013 at 4:18 am

    Yes, I checked out his website. I deliberated filled the contact form because I knew the data will not submit traditionally by having the browser loading to send the form and then echo a thank you message. I was expecting something ajaxing. And wow, I was right. The form freezed in a gray color, then slided right with a thank you bar replacing the submit button. Then under few seconds, the form slided back again in it’s former position.

    Before filling the form, I tried submitting it without filling the fields to see it’s reaction. And it reacted by shaking itself in a no-way-I-can’t-be-sent-like-that attitude.

    http://crocodillon.com/contact

    Please can someone explain to me the js and ajax behind those behaviours probably with a codepen sample.

    # June 17, 2013 at 4:39 am

    The code for that contact form its posted on his codepen account

    http://codepen.io/CrocoDillon/pen/GJclb

    you can have a look there

    # June 17, 2013 at 5:29 am

    Here is my question. where does the form data sent to?

    # June 17, 2013 at 5:31 am

    In response to what you submitted: Hi back :P

    Yeah @pixelgrid is right, I created the Pen first to play around with the idea and then used almost the exact same JS live. Just view the source of that page, I kept everything inside the html because it’s not much code and only used on one page.

    # June 17, 2013 at 5:34 am

    > Here is my question. where does the form data sent to?

    The same page, I have to find a better solution for that (something that returns JSON with success or failure messages). Now it just waits for any response and assumes success. I will fix that but it’s not something that has high priority for me.

    # June 17, 2013 at 5:48 am

    @Crocodillon, thank u. I want to use the form in a website am working on right now. I have added the form and it’s behaving normally. But i want the data to be sent to a gmail account. How can i achieve that?

    # June 17, 2013 at 6:17 am

    I’d open a new thread for that. I have to go soon and can’t go into details. I’m using `ZendMail` (comes with Zend Framework 2 but can be used alone) and it’s as simple as:

    $mail = new Message(); // ZendMailMessage
    $mail->setEncoding(‘utf-8′);
    $mail->setFrom(‘you@yourdomain.com’);
    $mail->setTo(‘you@gmail.com’);
    $mail->setReplyTo($data);
    $mail->setSubject(‘Contact Form’);
    $mail->setBody(
    “Name:nn{$data}nn” .
    “Email:nn{$data}nn” .
    “Message:nn{$data}”
    );
    try {
    $transport = new Sendmail(); // ZendMailTransportSendmail
    $transport->send($mail);
    } catch (Exception $e) {}

    where $data is validated and sanitized.

    # June 17, 2013 at 7:01 am

    Ok. should i put these codes in between php tag and save it separately, then put the file name in my form action?

    Here is the form:


    # June 17, 2013 at 7:43 am

    if you will validate and send the emain from the same file change your file extension from .html to .php and make your validation at the top of the file inside < ?php ?> tags.

    If you want the data to be validated in another file insert the file in the action attribute like action=’validate.php';

    and create a new file from where you will validate and send your email.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".