Contact Form Help PLEASE

[lmoller]

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

 

[Koyyiko]

Hi, I think you forgot to attach the file. Also, have you set up the SMTP server correctly? Are you using CMS?

 

[lmoller]

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");
}
});
});