联系表单-Html和Javascript只包含在Html(tumblr)中
Contact Form - Html and Javascript includable just in html (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。。。
提前感谢!
有几种方法可以做到这一点。首先,你有表格管理员吗?如果没有,我推荐所有形式。他们有一个免费帐户,你的表格可以发送到该帐户。它会处理输入并通过电子邮件将结果免费发送给你。
试试你的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即可。
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何设置html元素填充的动画
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何编写HTML输入的JS内联
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 使用javascript将动态表从一个html页面打印到另一个html页
- 通过javascript重定向html传递php变量
- 如何使Javascript动态html表及其上的事件
- 在chrome.tabs.onCreated之后加载HTML页面
- 如何在vs2002中调试html页面
- 如何使用javascript或html下载PDF格式的填写表单
- 视频HTML没有'无法在Internet Explorer 11上工作
- HTML表单提交时未执行外部函数
- 如何将输入(type=text)从html表单传递到javascript函数
- 使用angular重定向到html页面
- Tumblr JS嵌入CSS/HTML标签进行样式设置
- 从 HTML 表单中检索 tumblr 用户名
- 联系表单-Html和Javascript只包含在Html(tumblr)中
- 为Tumblr上的HTML标签添加事件监听器