How to make this CSS contact form working with javascript?

Question

I want to insert this simple HTML/CSS contact form on my blog (blogger), the design is complete but since for this form to work (action='POST'), I do not know where to upload the php file. I tried uploading the php code on my google drive, and also on dropbox, but how to make my form access that php file? Every time I clicked on the submit button, blogger would give me an error msg.

Can I make this form work (i.e the messages to be sent to my email id) by javascript/jquery or some other method?

<div>
<form action="http://bandeutkalajanani.in/mailc.php" id="contact" method="post" name="contact">
<h1>You want to tell me something? Please go ahead. I would love to hear from you. </h1>
<input name="name" placeholder="Type in your name, please (e.g. - Amit Pattnaik)" required="" />
<input name="email" placeholder="Type in your email, please (e.g. - amit@email.com)" required="" type="email" />
<input name="website" placeholder="Type in your Website/Blog, if any (e.g. - http://www.amitpattnaik.com) (Optional though)" type="url" />
<textarea name="message" placeholder="Now tell me what's on your mind?" required=""></textarea>
<label>*What is 6+3 (in words)? (Anti-spam)</label>
<input name="human" placeholder="Type your answer in words" />
<button type="submit">Press to send me the message.</button> 
</form>
<h1><?php include "http://bandeutkalajanani.in/mailc.php"?></h1>
</div>

mail.php

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $url = $_POST['website'];
    $message = $_POST['message'];
    $from = 'From: GoodDayEveryDay'; 
    $to = 'amitg@gmail.com'; 
    $subject = 'Message from a Blog visitor';
    $human = $_POST['human'];

    $body = "From: $name\n E-Mail: $email\n Website: $url\n Message:\n 

$message";


if ($_POST['submit']) {
    if ($name != '' && $email != '') {
        if ($human == 'nine') {              
            if (mail ($to, $subject, $body, $from)) { 
            echo '<p>Your message has been sent!</p>';
        } else { 
            echo '<p>Something went wrong, go back and try again!

</p>'; 
        } 
    } else if ($_POST['submit'] && $human != 'nine') {
        echo '<p>You answered the anti-spam question incorrectly!

</p>';
    }
    } else {
        echo '<p>You need to fill in all required fields!!</p>';
    }
}
?>

#contact {
    width: 650px;
    height: 574px;
    margin: 15px auto 24px auto;
    padding: 24px;
    position: relative;
    background: #fff url(http://3.bp.blogspot.com/-uQYIg9e_IpU/VJaAtPsjRtI/AAAAAAAABzw/HOvtiBCjD_I/s1600/grunge_wall.png);
    border: 1px solid #ccc;
    border-radius: 3px;  
}

#contact::before, 
#contact::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 2px;
    right: 2px;
    top: 0;
    z-index: -1;
    background: #fff;
    border: 1px solid #ccc;         
}

#contact::after {
    left: 4px;
    right: 4px;
    bottom: -5px;
    z-index: -2;
    box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
}

#contact h1 {
    position: relative;
    font: bold 1.1em/3.5em 'Segoe UI Light', 'Open Sans', sans-serif, Arial, Helvetica;

     color: #666;
    text-align: center;
    margin: 0 0 20px;
}

#contact h1::before,
#contact h1::after{
    content:'';
    position: absolute;
    border: 1px solid rgba(0,0,0,.15);
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 0;
}

#contact h1::after{
    top: 0;
    bottom: 0;
    left: 10px;
    right: 10px;
}

::-webkit-input-placeholder {
   color: #bbb;
}

:-moz-placeholder {
   color: #bbb;
}                       

.placeholder{
    color: #bbb; /* polyfill */
}       

#contact input, textarea {
    margin: 5px 0;
    padding: 10px;
    width: 100%;
    *width: 518px; /* IE7 and below */
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 3px; 
}
#contact textarea {
    height:180px;
}
#contact input:focus{
        outline: 0;
        border-color: #aaa;
    box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
}       
#contact textarea:focus{
        outline: 0;
        border-color: #aaa;
    box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
}  
#contact button{
    margin: 20px 0 0 0;
    padding: 15px 8px;          
    width: 100%;
    cursor: pointer;
    border: 1px solid #2493FF;
    overflow: visible;
    display: inline-block;
    color: #fff;
    font: bold 1.4em 'Segoe UI Light', 'Open Sans', 'trebuchet MS',Arial, Helvetica;
    text-shadow: 0 -1px 0 rgba(0,0,0,.4);         
    background-color: #2493ff;
    background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); 
    transition: background-color .2s ease-out;
    border-radius: 3px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, .3),
                0 1px 0 rgba(255, 255, 255, .5) inset;                               
}

#contact button:hover{
    background-color: #7cbfff;
        border-color: #7cbfff;
}

#contact button:active{
    position: relative;
    top: 3px;
    text-shadow: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
}

Please find the html and CSS code in this fiddle: html css contact form

Answer 1

You'll need some sort of server set up to handly the post request, it wouldnt matter if you do a standard http post from a form or use javascript/jquery ajax.

If you cant use your own server try a email service or a iframed form service such as wooforms

Answer 2

I do not know where to upload the php file.

You need to upload it to web hosting that supports PHP and to which the URL specified in the action attribute of the form resolves.

I tried uploading the php code on my google drive, and also on dropbox, but how to make my form access that php file?

Neither Google Drive not Dropbox provide web hosting which supports any kind of server side programming. You need to get a proper web host instead of using a cloud storage service that happens to allow public sharing of (static) files.

Can I make this form work (i.e the messages to be sent to my email id) by javascript

Not in any practical way.

In theory you could construct a mailto: URI and use JS to send the browser to it. Depending on how the browser is configured, this might simply fail or it might open a pre-filled-in email in the user's email client which they could click send on. This is an unreliable and user-unfriendly approach that you shouldn't go anywhere near.

/jquery

jQuery is a JS library. You can't do anything with it that you can't do with JS already.

or some other method?

You need a server side solution. Some companies will supply dedicated form to email gateways (i.e. a prewritten server side solution), but they tend to be inflexible.