联系表单-Html和Javascript只包含在Html(tumblr)中

Contact Form - Html and Javascript includable just in html (tumblr)

本文关键字:Html tumblr 包含 -Html 表单 Javascript 联系      更新时间:2023-09-26

我正试图在我的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。。。

提前感谢!

有几种方法可以做到这一点。首先,你有表格管理员吗?如果没有,我推荐所有形式。他们有一个免费帐户,你的表格可以发送到该帐户。它会处理输入并通过电子邮件将结果免费发送给你。

试试你的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将不会执行任何操作。您放入表单的"action"属性中的url将是处理表单信息的位置。如果你使用所有表单,他们会给你url和其他指令,让它发挥作用。如果我需要更详细地解释,请告诉我。希望这能有所帮助!

您可以注册mandrill并使用他们的api。

查看这个通过JSON提交的jquery联系人表单。我在我的网站上使用这种方法。

jQuery(function($)  
{
    $("#contact_form").submit(function()
    {
        var email = $("#email").val(); // get email field value
        var name = $("#name").val(); // get name field value
        var msg = $("#msg").val(); // get message field value
        $.ajax(
        {
            type: "POST",
            url: "https://mandrillapp.com/api/1.0/messages/send.json",
            data: {
                'key': 'sVRLFidC1A7K56TuUkyUQg',
                'message': {
                    'from_email': email,
                    'from_name': name,
                    'headers': {
                        'Reply-To': email
                    },
                    'subject': 'Website Contact Form Submission',
                    'text': msg,
                    'to': [
                    {
                        'email': 'riyadh@bscheme.com',
                        'name': 'Riyadh Al Nur',
                        'type': 'to'
                    }]
                }
            }
        })
        .done(function(response) {
            alert('Your message has been sent. Thank you!'); // show success message
            $("#name").val(''); // reset field after successful submission
            $("#email").val(''); // reset field after successful submission
            $("#msg").val(''); // reset field after successful submission
        })
        .fail(function(response) {
            alert('Error sending message.');
        });
        return false; // prevent page refresh
    });
});
<form class="form-horizontal" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>Contact Us</legend>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="name">Name</label>  
  <div class="col-md-5">
  <input id="name" name="name" type="text" placeholder="Enter your full name here" class="form-control input-md" required="">
    
  </div>
</div>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="email">Email</label>  
  <div class="col-md-5">
  <input id="email" name="email" type="text" placeholder="Enter your email address here" class="form-control input-md" required="">
    
  </div>
</div>
<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="msg">Message</label>
  <div class="col-md-4">                     
    <textarea class="form-control" id="msg" name="msg" cols="6" rows="6"></textarea>
  </div>
</div>
<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-4">
    <button id="submit" name="submit" class="btn btn-primary">Send Message</button>
  </div>
</div>
</fieldset>
</form>

然后只需在上面发布的html下面添加javascript即可。