javascript - 联系表格-HTML和HTML中仅包含HTML和Javascript(tumblr)

我正在尝试在我的tumblr博客中加入联系表格(我将其用作投资组合)。关键是我已经有了html和css的表单，但我无法使该部分正常工作。主要是因为我无法引用.js文件。我的意思是，我需要将.js文件上的代码包含在该html中，以便它能正常工作。

也许还有另一种方法可以使此操作变得更容易，但是我仍然没有找到这样做的方法。

这是html格式:

    <form id="c_form" name="contact">
        <div>
          <label>
            <p>Name</p>
            <input name="nombre" id="c_name" type="text" class="c_input" placeholder="..."/>
          </label>
          <br/>
          <label>
            <p>Email:</p>
            <input name="email"  id="c_mail" type="text" class="c_input" placeholder="..."/>
          </label>
        </div>
        <label>
          <p>Content:</p>
          <textarea name="mensaje"  id="c_msg" placeholder="..."></textarea>
        </label>

        <div id="c_btns">
            <input name="send" onclick="cargaSendMail()" type="button" value="Enviar" class="btn-b" id="c_enviar"></input>
        </div>
    </form>

继承人的CSS:

.Contact {
    width: 100%;
    background-image: url(http://i.imgur.com/jxap4PO.jpg);
    padding-bottom: 50px;
    padding-top: 50px;
    position: relative;
}


.Contact p{
    margin: 0;
    padding: 0;
    border: 0;
    font-size:100%;
    vertical-align: baseline;
    font-weight: bold;
}

.Contact label p{
    color: #ee3333;
    text-decoration: none;
    display:block;
    margin:5px 0;
    font-size:1.25em;
    font-weight: bold;
}

#contactform{
    width: 700px;
    margin: 30px auto;
    background: transparent;
    overflow: hidden;
    border:1px solid;
    border-color: #ee3333;
}

.c_input{
    padding: 3px;
    width: 300px;
    outline:1px solid #ee3333;
}

#c_form{
    margin: 25px;
    width: 90%;

}

#c_form textarea {
    outline:1px solid #ee3333;
}

.c_input, #c_form textarea{
    margin-bottom: 10px;
    border: 1px solid transparent;
    padding: 4px;
    background: transparent;
}

input:focus, textarea:focus{
    outline: none;
}

::-webkit-input-placeholder { font-style:italic; }
::-moz-placeholder { font-style:italic; } /* firefox 19+ */
:-ms-input-placeholder { font-style:italic; } /* ie */
input:-moz-placeholder { font-style:italic; }

#c_form textarea{
    min-height: 150px;
    resize: none;
    width: 100%;
}

#c_enviar{
    padding: 4px;
    font-size: 13px;
    font-family: helvetica, arial;
}

#bottom_container{
    overflow: hidden;
}

#c_information{
    width: 100%;
    border: solid 1px #ccc;
    background: transparent;
    padding: 4px 0 4px 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
}

.c_error{
    color: #D64242;
    font-size: 10px;
    margin-left: 5px;
}
.hide{
display:none;
}

.btn-b {
    width:100%;
    padding: 5px;
    color: #111111;
    text-decoration: none;
    border-radius: 3px;
    border-color: #cc0c0c #cc0c0c #cc0c0c;
    border-style: solid;
    border-width: 1px;
    color: #ffffff;
    background: #ee3333;
    padding: 5px;
    background: -moz-linear-gradient(top,  #ee3333 0%, #ee2222 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ee3333), color-stop(100%,#ee2222));
    background: -webkit-linear-gradient(top,  #ee3333 0%,#ee2222 100%);
    background: -o-linear-gradient(top,  #ee3333 0%,#ee2222 100%);
    background: -ms-linear-gradient(top,  #ee3333 0%,#ee2222 100%);
    background: linear-gradient(top,  #ee3333 0%,#ee2222 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee3333', endColorstr='#ee2222',GradientType=0 );
    cursor: pointer;
}

.btn-b:hover {
    border-radius: 3px;
    border-color: #cc0c0c #cc0c0c #cc0c0c;
    border-style: solid;
    border-width: 1px;
    background: #da1b1b;
    background: -moz-linear-gradient(top,  #da1b1b 0%, #b40f0f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#da1b1b), color-stop(100%,#b40f0f));
    background: -webkit-linear-gradient(top,  #da1b1b 0%,#b40f0f 100%);
    background: -o-linear-gradient(top,  #da1b1b 0%,#b40f0f 100%);
    background: -ms-linear-gradient(top,  #da1b1b 0%,#b40f0f 100%);
    background: linear-gradient(top,  #da1b1b 0%,#b40f0f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da1b1b', endColorstr='#b40f0f',GradientType=0 );

}

.btn-b:hover {
    text-decoration: none;
}

.btn-b:active {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #3282D3;
    border-color: #154C8C #154C8C #0E408E;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 6px 3px #1657B5 inset, 0 1px 0 0 #FFFFFF;
    text-shadow: 0 -1px 1px #2361A4;
}

如果我是对的，我应该添加:

<script type='text/javascript' ......(code)></script>

这就是使表单起作用的原因，但是我不知道该代码应该是什么。

可能我缺少smth，但是这是我第一次使用js，我刚使用html和css ...

提前致谢!

最佳答案

有几种方法可以做到这一点。首先，您有表格处理程序吗？如果没有，我建议allforms。他们有一个免费帐户，您的表格可以发送到该帐户。它会处理输入内容并将结果通过电子邮件免费发送给您。

为您的JavaScript尝试一下:

function cargaSendMail(){

var nombre = document.forms["contact"]["nombre"].value;
var email = document.forms["contact"]["email"].value;
var mensaje = document.forms["contact"]["mensaje"].value;

// The following "ifs" make sure that the user has filled out all fields.

if (nombre == null || nombre == ""){

alert("Please enter your name"); // Alert the user if he has not entered his name.
return false; // Stop running this function if the user has not entered his name.
}
if (email == null || email == ""){

alert("Please enter your email");
return false;
}
if (mensaje == null || mensaje == ""){

alert("Please enter your mensaje");
return false;
}

document.forms["contact"].submit();
/* If all fields are filled out, they code will not "return false"
and will submit the form. */

}

请记住，除非您指定表单的“action”属性，否则此JS不会执行任何操作。您在表单的“操作”属性中输入的url将是处理表单信息的位置。如果您使用allforms，它们将为您提供url和其他说明以使其正常运行。如果需要详细说明，请告诉我。希望这可以帮助!