What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Contact Form Help PLEASE

lmoller

New member
Hi all, I am desperate for some assistance. I am battling to get my contact form to work. As it has been many years since I last tackled a website, I do admit I am very rusty. The layout of my contact form is absolutely perfect, what I am struggling with is how do I enable the email handler i.e. The message must be sent to my personal address with a success message that displays on the site "Thank you, one of our agents will contact you shortly".

Please attached file, I will really be grateful for your valued assistance.

Kind regards,
Lisa
 
Hi, I think you forgot to attach the file. Also, have you set up the SMTP server correctly? Are you using CMS?
 
Thank you Koyyiko for your response. I am still battling to get the form to work. Herewith my coding so far. I would really appreciate your help.

html.
<form class="main_form">
<div class="row">

<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<input class="form-control" placeholder="Your Name" type="text" name="Your Name">
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<input class="form-control" placeholder="Phone Number" type="text" name="Phone Number">
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<input class="form-control" placeholder="Email" type="text" name=" Email">
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<textarea class="textarea" placeholder="Message" type="text" name="Message"></textarea>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<button class="send" href="mailto:lisa.moller09@gmail.com">Send</button>
</div>
</div>
</form>

style.css
.form-control {
border: #e3170e solid 2px;
border-radius: inherit;
margin-bottom: 20px;
padding: 15px 15px;
background: #e3170e;
color: #fff;
font-family: poppins;
}
.form-control:focus {
box-shadow: inherit;
border: #e3170e solid 2px !important;
background: #e3170e;
}
#search_bar {
color: #fff !important;
opacity: 1;
}
.textarea {
font-family: poppins;
border: #e3170e solid 2px;
margin-bottom: 20px;
padding: 15px 15px;
width: 100%;
padding-top: 20px;
background: #e3170e;
}
.send {
font-family: poppins;
float: left;
margin: 0 auto;
display: block;
background: #e3170e;
color: #fff;
max-width: 165px;
padding: 13px 0px;
width: 100%;
font-size: 18px;
}
.send:hover {
background: #e3170e;
color: #fff;
}

custom.js
$(document).ready(function () {
$("#contact-form").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
message: "required",
},
messages: {
firstname: "Please enter your name",
phone: "Please enter your phone number",
email: "Please enter a valid email address",
message: "Please enter your Message",
},
errorElement: "div",
errorPlacement: function (error, element) {
// Add the `help-block` class to the error element
error.addClass("help-block");

if (element.prop("type") === "checkbox") {
error.insertAfter(element.parent("input"));
} else {
error.insertAfter(element);
}
},
highlight: function (element, errorClass, validClass) {
$(element).parents(".col-md-4, .col-md-12").addClass("has-error").removeClass("has-success");
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".col-md-4, .col-md-12").addClass("has-success").removeClass("has-error");
}
});
});
 
Back
Top