Email Button HTML

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

mariusmeeren

Thread Starter
Joined
Aug 4, 2016
Messages
30
Hello,
I've been looking around for ages for a page like this that i can ask questions and fix my html problems,
Now my problem is that i've made a email button, but it doesn't work at all. http://www.nightlightrp.esy.es/contact Is where the form is located, now i am filling in all of my information, but it doesn't work.
HTML Code:
<html><head>
<meta charset="UTF-8">


<title>Night Light Contact Form</title>




<style>
html {
background: url(Images/backgroundblurred.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-animation: fadein 2s; / Safari, Chrome and Opera > 12.1 /
-moz-animation: fadein 2s; / Firefox < 16 /
-ms-animation: fadein 2s; / Internet Explorer /
-o-animation: fadein 2s; / Opera < 12.1 /
animation: fadein 2s;
}
@Import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 12px;
line-height: 30px;
color: #777;
}

.container {
max-width: 400px;
width: 100%;
margin: 0 auto;
position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
}

#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}

fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}

#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}

#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #09F;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}

#contact button[type="submit"]:hover {
background: #09F;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
text-align: center;
}

#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}

::-webkit-input-placeholder {
color: #888;
}

:-moz-placeholder {
color: #888;
}

::-moz-placeholder {
color: #888;
}

:-ms-input-placeholder {
color: #888;
}
</style>

<script>
window.console = window.console || function(t) {};
</script>



</head>

<link type="text/css" rel="stylesheet" href="http://nightlightrp.esy.es/forums/cache/themes/theme3/css3.css">
<link type="text/css" rel="stylesheet" href="http://nightlightrp.esy.es/forums/cache/themes/theme3/global.css">
<link type="text/css" rel="stylesheet" href="http://nightlightrp.esy.es/forums/cache/themes/theme3/theme.css">
<div id="header">
<div id="panel">
<div class="upper">
<div class="wrapper">
<div class="menu">
<nav>
<ul>
<li class="home"><a href="http://nightlightrp.esy.es"></a></li>
<li><a href="http://nightlightrp.esy.es/forums">Forums</a></li>
<li><a href="#servers">Servers</a></li>
<li><a href="http://nightlightrp.esy.es/forums/showthread.php?tid=13">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>

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

<body translate="no">

Problem is here:
<div class="container">
<form id="contact" action="mailto:[email protected]" method="post" >
<img src="http://i.imgur.com/64wGS5P.png">
<p>Expect an answer within 56 hours</p>
<br />
<br />
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required="" autofocus="">
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" tabindex="2" required="">
</fieldset>
<fieldset>
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
</fieldset>
<fieldset>
<textarea placeholder="Type your message here...." tabindex="5" required=""></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button> <--- BUTTON IS HERE
</fieldset>
</form>
</div>





<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>




</body></html>​
 

mariusmeeren

Thread Starter
Joined
Aug 4, 2016
Messages
30
Problem is here:
<div class="container">
<form id="contact" action="mailto:[email protected]" method="post" >
<img src="http://i.imgur.com/64wGS5P.png">
<p>Expect an answer within 56 hours</p>
<br />
<br />
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required="" autofocus="">
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" tabindex="2" required="">
</fieldset>
<fieldset>
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
</fieldset>
<fieldset>
<textarea placeholder="Type your message here...." tabindex="5" required=""></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button> <--- BUTTON IS HERE
</fieldset>
</form>
</div>
 

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,398
Hi Marius - welcome to TSG;)
The way you are set up would normally invoke your visitor's email handler to send a messy message:(
unfortunately your Host - Hostinger - interprets the action="mailto .." as a page request and throws a 403 (page forbidden).
It would (IMHO) be better to change your action to a php script which would process a mailto properly.
Take a gander at this tut. Hopefully it will help. If not come back to us:)
 

mariusmeeren

Thread Starter
Joined
Aug 4, 2016
Messages
30
That page is really confusing and i don't understand it sorry. Is there an easier tutorial? For me that is just alot of text talking about files i don't have and all that. Could you possible make it? Sorry for begging and stuff but i just need it to work. I only know html
 

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,398
Change your form to look like this
HTML:
  <form  id="contact" action="contact.php" method="post" >
    <img src="http://i.imgur.com/64wGS5P.png">
<p>Expect an answer within 48 hours</p>
<br />
<br />
    <fieldset>
      <input name="fname" placeholder="Your name" type="text" tabindex="1" required="" autofocus="">
    </fieldset>
    <fieldset>
      <input name="email" placeholder="Your Email Address" type="email" tabindex="2" required="">
    </fieldset>
    <fieldset>
      <input name="phone" placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
    </fieldset>
    <fieldset>
      <textarea name="msg" placeholder="Type your message here...." tabindex="5" required=""></textarea>
    </fieldset>
    <fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>
  </form>
... then save this as contact.php
PHP:
if(isset($_REQUEST['fname']) && !empty($_REQUEST['fname']))
{
    $fname = $_POST['fname'];
    $email = $_POST['email'];
    $phone = $_POST['phonel'];
    $msg = $_POST['msg'];
    $to = "EMAIL ADDRESS OF RECIPIENT";
    $subject = "A SUITABLE SUBJECT TEXT";
    $headers = "From: [email protected] \r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

    $body = "<html><body><table style=\"background-color: #E7E7E7;\" cellpadding=\"10\">
    <tr><td>Marius,</td></tr>
    <tr><td>You've had a visitor. Their email address is $email ...</td></tr>
    <tr><td>Their phone number is $phone ...</td>/tr>
    <tr><td>Their message is ... $msg</td>/tr>
    <tr><td>Regards,</td></tr>
    <tr><td>Your Site</td></tr></table></body></html>";

    mail($to, $subject, $body, $headers);
}
    header("Location: index.php"); /* Go back ... */
?>
BE WARNED, Marius, this written off the top of my head UNTESTED!
 
Last edited:

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,398
Did you spot my bad? The name="phone" and $phone = $_POST['phonel']; don't match:oops:
 

mariusmeeren

Thread Starter
Joined
Aug 4, 2016
Messages
30
http://www.nightlightrp.esy.es/contact

Contact.php:
<?php
if(isset($_REQUEST['fname']) && !empty($_REQUEST['fname']))
{
$fname = $_POST['fname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$msg = $_POST['msg'];
$to = "[email protected]";
$subject = "Contact Form";
$headers = "From: [email protected] \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

$body = "<html><body><table style=\"background-color: #E7E7E7;\" cellpadding=\"10\">
<tr><td>Marius,</td></tr>
<tr><td>You've had a visitor. Their email address is $email ...</td></tr>
<tr><td>Their phone number is $phone ...</td>/tr>
<tr><td>Their message is ... $msg</td>/tr>
<tr><td>Regards,</td></tr>
<tr><td>Your Site</td></tr></table></body></html>";

mail($to, $subject, $body, $headers);
}
header("Location: mailsent"); /* Go back ... */
?>

contact.contact:
<html><head>
<meta charset="UTF-8">


<title>Night Light Contact Form</title>




<style>
html {
background: url(Images/backgroundblurred.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-animation: fadein 2s; / Safari, Chrome and Opera > 12.1 /
-moz-animation: fadein 2s; / Firefox < 16 /
-ms-animation: fadein 2s; / Internet Explorer /
-o-animation: fadein 2s; / Opera < 12.1 /
animation: fadein 2s;
}
@Import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 12px;
line-height: 30px;
color: #777;
}

.container {
max-width: 400px;
width: 100%;
margin: 0 auto;
position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
}

#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}

fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}

#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}

#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #09F;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}

#contact button[type="submit"]:hover {
background: #09F;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
text-align: center;
}

#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}

::-webkit-input-placeholder {
color: #888;
}

:-moz-placeholder {
color: #888;
}

::-moz-placeholder {
color: #888;
}

:-ms-input-placeholder {
color: #888;
}
</style>

<script>
window.console = window.console || function(t) {};
</script>



</head>
<link rel="shortcut icon" href="urlicon.png" />

<link type="text/css" rel="stylesheet" href="http://nightlightrp.esy.es/forums/cache/themes/theme3/css3.css">
<link type="text/css" rel="stylesheet" href="http://nightlightrp.esy.es/forums/cache/themes/theme3/global.css">
<link type="text/css" rel="stylesheet" href="http://nightlightrp.esy.es/forums/cache/themes/theme3/theme.css">
<div id="header">
<div id="panel">
<div class="upper">
<div class="wrapper">
<div class="menu">
<nav>
<ul>
<li class="home"><a href="http://nightlightrp.esy.es"></a></li>
<li><a href="http://nightlightrp.esy.es/forums">Forums</a></li>
<li><a href="#servers">Servers</a></li>
<li><a href="http://nightlightrp.esy.es/forums/showthread.php?tid=13">Rules</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>

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

<body translate="no">

<div class="container">
<form id="contact" action="contact.php" method="post" >
<img src="http://i.imgur.com/64wGS5P.png">
<p>Expect an answer within 48 hours</p>
<br />
<br />
<fieldset>
<input name="fname" placeholder="Your name" type="text" tabindex="1" required="" autofocus="">
</fieldset>
<fieldset>
<input name="email" placeholder="Your Email Address" type="email" tabindex="2" required="">
</fieldset>
<fieldset>
<input name="phone" placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
</fieldset>
<fieldset>
<textarea name="msg" placeholder="Type your message here...." tabindex="5" required=""></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>




<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>




</body></html>
 

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,398
The following bit of code will throw a php error ...
PHP:
header("Location: mailsent"); /* Go back ... */
... because it expects the text after "Location:" to be either an html or php file. I'm not quite sure how "mailsent" fits in??
 

mariusmeeren

Thread Starter
Joined
Aug 4, 2016
Messages
30
Oh no no, Thats not a problem. What that does, is when you hit submit, it takes you to http://www.nightlightrp.esy.es/mailsent page

The reason why i ain't calling it .html or .htm is because it will look ugly in the browser tab. lol. I want to to look clean. And yes, it does work, i sends you to that page. :)
 

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,398
I have learned something from this at least - .html/.php etc., is not necessary - hadn't realised that before(y)
As to why it's not mailing, perhaps you should talk to your hosts - maybe we are not conforming to their requirements?
Another thing - look at your Spam Filters on your email handler - perhaps it's getting blocked?
 

mariusmeeren

Thread Starter
Joined
Aug 4, 2016
Messages
30
I will take contact with hostinger as soon as possible (y)

And no, it's not in my spam filter.
 

mariusmeeren

Thread Starter
Joined
Aug 4, 2016
Messages
30
Hello! It has worked, but i ****ed it up again trying to make it alot better and i am coming back to you if you CAN PLEASE IN THE WORLD HELP ME!

What i want to recieve in my email is this thing right here: https://gyazo.com/24955f07ed51ff955efe765fa7d42861

With all the details. I want it to send that html form with the details in it, that would look so much better and easier to read. Can you help me or no?
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top