联系表上的帮助很少?

时间:2015-02-11 22:49:00

标签: javascript html css contact-form

我的联系表格需要一些帮助。我在Dreamweaver上构建我的网站,但我还没有服务器,我只需要告诉我我的代码中还有哪些内容可以让我的联系表单工作。 2-我还需要发送"消息"显示在消息下方,因为我的网站是一个视差单页面。我不想让人们离开我的页面。我不知道在哪里放我的电子邮件地址:(



(function($){
	$(document).ready(function() {
		$('#submit-form').click(function(e){
		
			e.preventDefault();
            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var Nome  = $('#form_name').val(),
				Email  = $('#form_email').val(),
				Assunto  = $('#form_subject').val(),
				Mensagem  = $('#form_message').val(),
				data_html,
				success = $('#success');
				
    		if(name == "")
                $('#form_name').val('Please enter your name.');
				
			if(subject == "")
                $('#form_subject').val('Please enter your name.');

            if(email == ""){
                $('#form_email').val('Digite um e-mail válido.');
            }else if(reg.test(email) == false){
                $('#form_email').val('E-mail inválido.');
            }
			
            if(message == "")
                $('#form_message').val('Digite sua mensagem.');

            if(message != "" && name != "" && reg.test(email) != false) {
            	data_html = "name=" + name + "&email="+ email + "&message=" + message + "&subject="+ subject;

                //alert(data_html);
                $.ajax({
                    type: 'POST',
                    url: 'contact_form.php',
                    data: data_html,
                    success: function(msg){
						
						if (msg == 'sent'){
                        	success.html('<div class="alert alert-success">Mensagem enviada!</div>')  ;
                            $('#form_name').val('');
							$('#form_email').val('');
							$('#form_message').val('');
                        }else{
                            success.html('<div class="alert alert-error">Message <strong>not</strong> sent! Please Try Again!</div>')  ; 
                        }
                    }
                });
    
            }
            return false;
        });
	});
})(jQuery);
&#13;
textarea {
	height:167px;
	padding:20px;
	margin-bottom:20px; 
	overflow:auto;
}
	
.formSecWrap {
	float: left;
	margin-right: 20px;
}
.formSecWrap2 {
	margin-right: 0px;
}
input[type="text"], input[type="password"], input[type="email"], textarea, select {
    background: #222222;
    border: none;
    border-radius: 3px;
    color: #fff;
    display: block;
    margin: 0 0 10px 0;
    outline: medium none;
    padding: 6px 4px;
    width: 370px;
	font-family:'Oswald', sans-serif;
	font-size: 16px;
	font-weight: 400;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
    box-shadow: 0 0 7px #fff;
}

.formWrap label{
	margin: 0 0 2px 0;
}
.formWrap input[type="submit"]{
	margin: 10px 0 20px 0;
	float: right;
}

a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	background: #7b133c; 
	border: none;
	padding: 4px 12px;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
	margin: 0 5px 10px 0;
	line-height: 21px;
}
a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	color: #222;
	background: #ddd;  
}
&#13;
           <div id="contact_form">
                <div class="two-thirds column marginTop formWrap">
                    <form action="#" method="post" class="contactForm">
                        <div class="formSecWrap">
                            <label for="form_name">Nome</label>
                                <input type="text" id="form_name" name="form_name" value="" />
           
                            <label for="form_email">Email</label>
                                <input type="text" name="form_email" id="form_email" value="" />
                      
                            <label for="form_subject">Assunto</label>
                                <input type="text" name="form_subject" id="form_subject" value="" />
                        </div>
                        <div class="formSecWrap formSecWrap2">
                            <label for="form_message">Mensagem</label>
                                <textarea class="textarea" name="form_message" id="form_message"></textarea>
                        
                                <input class="button" id="submit-form" type="submit" name="submit" value="Enviar" />
                        </div>
                        <div id="sucess"></div>
                    </form>
                </div>
            </div>
   	   </div>
        
     </div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-1)

你有几个问题。

但首先,您没有服务器,但使用ajax来管理网址:&#39; contact_form.php&#39;。

除非您配置本地服务器,否则我们永远不会在Dreamweaver中工作。

使用javascript发送邮件,没有php,在很多方面都存在问题。

因此,为了取得一些进展,设置一个适当的本地环境(如xampp,或者使用本地服务器的Dreamweaver)并测试你的邮件表单,你可以在那里调试最终的javascript和php错误。