javascript - 如何使这个 CSS 联系表单与 javascript 一起工作？

Question

我想在我的博客 (blogger) 中插入这个简单的 HTML/CSS 联系表单，设计已经完成，但是因为要使这个表单起作用 (action='POST')，我不知道在哪里上传 php 文件.我尝试将 php 代码上传到我的 google 驱动器以及 dropbox，但是如何让我的表单访问该 php 文件？每次我点击提交按钮，博主都会给我一个错误信息。

我能否通过 javascript/jquery 或其他方法使此表单正常工作(即要发送到我的电子邮件 ID 的消息)？

<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>

邮件.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;
}

请在这个 fiddle 中找到 html 和 CSS 代码: html css contact form

Answer 1

I do not know where to upload the php file.

您需要将其上传到支持 PHP 并且表单的 action 属性中指定的 URL 解析到的虚拟主机。

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

Google Drive 和 Dropbox 都没有提供支持任何类型的服务器端编程的虚拟主机。您需要获得合适的 Web 主机，而不是使用恰好允许公开共享(静态)文件的云存储服务。

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

不是以任何实用的方式。

理论上您可以构建一个mailto: URI 并使用JS 将浏览器发送给它。根据浏览器的配置方式，这可能会简单地失败，或者它可能会在用户的电子邮件客户端中打开预先填写的电子邮件，他们可以单击发送。这是一种不可靠且对用户不友好的方法，您不应靠近。

/jquery

jQuery 是一个 JS 库。你不能用它做任何你已经不能用 JS 做的事情。

or some other method?

您需要一个服务器端解决方案。一些公司会为电子邮件网关提供专用表单(即预先编写的服务器端解决方案)，但它们往往不够灵活。