Question

我想在我的博客（博客）上插入这个简单的HTML / CSS联系表单，设计已经完成但是由于这个表单起作用（action ='POST'），我不知道上传php文件的位置。我尝试在我的谷歌驱动器上，也在Dropbox上传PHP代码，但如何使我的表单访问该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>

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

请在这个小提琴中找到html和CSS代码： html css contact form

Answer 1

我不知道上传php文件的位置。

您需要将其上传到支持PHP的网络托管以及表单的action属性中指定的网址解析。

我尝试在我的google驱动器上上传php代码，也在dropbox上传，但如何让我的表单访问该php文件？

Google Drive不是Dropbox都不提供支持任何服务器端编程的网络托管。您需要获得一个合适的Web主机，而不是使用允许公共共享（静态）文件的云存储服务。

我可以通过javascript
使这个表单工作（即要发送到我的电子邮件ID的消息）

没有任何实际的方式。

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

/ jquery

jQuery是一个JS库。你已经无法用JS做任何事了。

或其他一些方法？

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

Answer 2

您需要设置某种服务器来处理发布请求，如果您从表单中执行标准的http发布或使用javascript / jquery ajax，这无关紧要。

如果您无法使用自己的服务器，请尝试使用电子邮件服务或iframed表单服务，例如wooforms

如何使这个CSS联系表格使用JavaScript？

mail.php

2 个答案: