Contact HTML

HTML & CSS
1

Hello guys, I want a help on this code, when we type the name, email… etc the email doesn’t sent
how can I set the email to my own email to receive messages?
Help me please!

<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>LS - Contact</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="tornix" />
	<meta name="keywords" content="tornix" />
	<meta name="author" content="gettemplates.co" />

  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<!-- <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet"> -->

        <!-- Favicon -->
        <link rel="shortcut icon" href="http://lorissa.photography/wp-content/uploads/2017/04/ls-logo-dark.png"/>	
	<!-- Animate.css -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Themify Icons-->
	<link rel="stylesheet" href="css/themify-icons.css">
	<link rel="stylesheet" href="css/snow.css">		
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">

	<!-- Magnific Popup -->
	<link rel="stylesheet" href="css/magnific-popup.css">

	<!-- Owl Carousel  -->
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owl.theme.default.min.css">

	<!-- Theme style  -->
	<link rel="stylesheet" href="css/style.css">

	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->

	</head>
	<body>
		
	<div class="gtco-loader"></div>
	
	<div id="page">
	<nav class="gtco-nav" role="navigation">
		<div class="gtco-container">
			<div class="row">
				<div class="col-md-12 text-right gtco-contact">
					<ul class="">
						<li><a href="https://www.facebook.com/houssem.zouari01" target="_blank"><i class="ti-mobile"></i> +216 5433**64</a></li>
						<li><a href="http://steamcommunity.com/id/HoussemTorNix" target="_blank"><i class="icon-mail"></i> </a></li>
						<li><a href="mailto:example@example.com" target="_blank"><i class="icon-mail2"></i></a></li>
						<li><a href="https://www.facebook.com/groups/los.santos.community/" target="_blank"><i class="ti-facebook"></i></a></li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-4 col-xs-12">
					<div id="gtco-logo"><a href="index"><img src="logo.png" width="300" height="50"></a></div>
				</div>
				<div class="col-xs-8 text-right menu-1">
					<ul>
						<li><a href="index">Home</a></li>		
						<li class="has-dropdown">
							<a href="#">Informations</a>
							<ul class="dropdown">
								<li><a href="about">About</a></li>
								<li><a href="theteam">The Team</a></li>						
							</ul>
						</li>	
						<li><a href="https://www.facebook.com/groups/los.santos.community/" target="_blank">Forum</a></li>										
						<li><a href="portfolio">Portfolio</a></li>
						<li><a href="contact">Contact</a></li>
						<li class="has-dropdown">
							<a href="#">Shop</a>
							<ul class="dropdown">
								<li><a href="vip">VIP</a></li>
								<li><a href="extra">Extra items</a></li>							
							</ul>
						</li>						
					</ul>
				</div>
			</div>
			
		</div>
	</nav>

	<header id="gtco-header" class="gtco-cover gtco-cover-xs" role="banner" style="background-image:url(images/img_bg_1.jpg);">
		<div class="overlay"></div>
		<div class="gtco-container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2 text-center">
					<div class="display-t">
						<div class="display-tc">
							<h1 class="animate-box" data-animate-effect="fadeInUp">Get In Touch</h1>
							<h2 class="animate-box" data-animate-effect="fadeInUp">Contact us by website.</h2>
							<div id="snow">
                            </div>									
						</div>
					</div>
				</div>
			</div>
		</div>
	</header>
	
	<div class="gtco-section">
		<div class="gtco-container">
			<div class="row row-pb-md">
				<div class="col-md-6 animate-box">
					<h3>Get In Touch</h3>
					<form action="#">
						<div class="row form-group">
							<div class="col-md-12">
								<label class="sr-only" for="name">Name</label>
								<input type="text" id="name" class="form-control" placeholder="Your firstname">
							</div>
							
						</div>

						<div class="row form-group">
							<div class="col-md-12">
								<label class="sr-only" for="email">Email</label>
								<input type="text" id="email" class="form-control" placeholder="Your email address">
							</div>
						</div>

						<div class="row form-group">
							<div class="col-md-12">
								<label class="sr-only" for="subject">Subject</label>
								<input type="text" id="subject" class="form-control" placeholder="Your subject of this message">
							</div>
						</div>

						<div class="row form-group">
							<div class="col-md-12">
								<label class="sr-only" for="message">Message</label>
								<textarea name="message" id="message" cols="30" rows="10" class="form-control" placeholder="Write us something"></textarea>
							</div>
						</div>
						<div class="form-group">
							<input type="submit" value="Send Message" class="btn btn-primary btn-lg">
						</div>

					</form>		
				</div>
				<div class="col-md-5 col-md-push-1 animate-box">
					
					<div class="gtco-contact-info">
						<h3>Contact Information</h3>
						<ul>
							<li class="address">Tunisia</li>
							<li class="phone"><a href="https://www.facebook.com/houssem.zouari01" target="_blank">+216 5433**64</a></li>
							<li class="email"><a href="mailto:tornixa471@gmail.com" target="_blank">tornixa471@gmail.com</a></li>
							<li class="url"><a href="https://www.facebook.com/groups/los.santos.community/" target="_blank">Server Group</a></li>
						</ul>
					</div>


				</div>
			</div>
			</div>
			
		</div>
	</div>

	<div id="gtco-subscribe">
		<div class="gtco-container">
			<div class="row animate-box">
				<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
					<h2>Subscribe</h2>
					<p>Be the first to know about the new templates.</p>
				</div>
			</div>
			<div class="row animate-box">
				<div class="col-md-12">
					<form class="form-inline">
						<div class="col-md-4 col-sm-4">
							<div class="form-group">
								<label for="email" class="sr-only">Email</label>
								<input type="email" class="form-control" id="email" placeholder="Your Email">
							</div>
						</div>
						<div class="col-md-4 col-sm-4">
							<div class="form-group">
								<label for="name" class="sr-only">Name</label>
								<input type="text" class="form-control" id="name" placeholder="Your Name">
							</div>
						</div>
						<div class="col-md-4 col-sm-4">
							<button type="submit" class="btn btn-default btn-block">Subscribe</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<footer id="gtco-footer" role="contentinfo">
		<div class="gtco-container">
			<div class="row row-p	b-md">

				<div class="col-md-4">
					<div class="gtco-widget">
						<h3>About Us</h3>
						<p>LOS SANTOS COMMUNITY. created since 2014 by it's owner: TorNix~|nR, an mta zombie gameserver with many gamemodes, check out Links for more informations.</p>
					</div>
				</div>

				<div class="col-md-4 col-md-push-1">
					<div class="gtco-widget">
						<h3>Links</h3>
						<ul class="gtco-footer-links">
							<li><a href="https://www.facebook.com/groups/los.santos.community/" target="_blank">Subscribe to our newsletter</a></li>
						</ul>
					</div>
				</div>

				<div class="col-md-4">
					<div class="gtco-widget">
						<h3>Get In Touch</h3>
						<ul class="gtco-quick-contact">
							<li><a href="https://www.facebook.com/houssem.zouari01" target="_blank"><i class="icon-phone"></i> +216 54**337164 (Private number)</a></li>
							<li><a href="mailto:tornixa471@gmail.com" target="_blank"><i class="icon-mail2"></i> tornixa471@gmail.com</a></li>
							<li><a href="http://steamcommunity.com/id/HoussemTorNix" target="_blank"><i class="icon-chat"></i> Private Steam</a></li>
							<li><a href="https://www.facebook.com/houssem.zouari01" target="_blank"><i class="icon-chat"></i> Private Facebook</a></li>							
						</ul>
					</div>
				</div>

			</div>

			<div class="row copyright">
				<div class="col-md-12">
					<p class="pull-left">
						<small class="block">&copy; 2014 - 2018 LS C. All Rights Reserved.</small> 
						<small class="block">Designed with ♥ by <a href="https://www.facebook.com/houssem.zouari01" target="_blank">TorNix~|nR</a></br> Selling more websites like this: <a href="https://www.facebook.com/houssem.zouari01" target="_blank">Contact us</a></small>
					</p>
					<p class="pull-right">
						<ul class="gtco-social-icons pull-right">
							<li><a href="https://www.instagram.com/houssemtornix/" target="_blank"><i class="icon-instagram"></i></a></li>
							<li><a href="https://www.facebook.com/groups/los.santos.community/" target="_blank"><i class="icon-facebook"></i></a></li>
							<li><a href="https://www.youtube.com/watch?v=kJCvzk54tYs" target="_blank"><i class="icon-youtube"></i></a></li>
							<li><a href="https://twitter.com/tornix50" target="_blank"><i class="icon-twitter"></i></a></li>
						</ul>
					</p>
				</div>
			</div>

		</div>
	</footer>
	</div>
	<div class="gototop js-top">
		<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
	</div>
	
	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- Carousel -->
	<script src="js/owl.carousel.min.js"></script>
	<!-- countTo -->
	<script src="js/jquery.countTo.js"></script>
	<!-- Magnific Popup -->
	<script src="js/jquery.magnific-popup.min.js"></script>
	<script src="js/magnific-popup-options.js"></script>
	<!-- Main -->
	<script src="js/main.js"></script>

	</body>
</html>
2

To make a form function you need to use a side server language such as PHP, that might be time consuming if you are new to this.
On the other hand there are many online services that can make your Contact Form work without extra coding, like “Formspree” as an example. Below is an HTML code for a form that consists of Name, Email, Subject, Message Field and a Send Button.

<form action="https://formspree.io/your@email.com" method="POST">
   <input type="text" name="FirstName" >
   <input type="email" name="Email">
   <input type="text" name="Subject">
   <textarea name="message"></textarea>
   <input type="submit">
</form>

Add Action, Method and Name as shown above to your existing form and make sure to replace “your@email.com” in the first line to your actual email.

To activate it, send one message and a confirmation email will be sent to your inbox, confirm it and your form will be active.

There are other features as well, check their documentation. In the future you could eliminate this service and impliment your own PHP code.

1 Like
3

Thank you @MEGA, it works, but there is a problem, you can send email without email adress and without message, just click send, and it send to my email email:
message:
like this :confused: help please?

1 Like
4

Then you will need to use a service that offers form validation to catch any empty required inputs.
Also required inputs should be marked as such.

1 Like
6

So can you help me please?

7

You have already been given two answers. Either find a service that offers the validation you require, or program it using a server-side language such as PHP.

8

Done, I fixed it, thank you so much guys for help :smiley:

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.