How to Create a Sticky Email Contact Form
Here is a tutorial that lets the user contact a company through emailing a contact form (send email contact form). A button is fixed at the bottom of the website, upon clicking, a new window will open where a user can send the email.
Getting started
Create a file cform.php
where the code is written for reaching out through email.
<?php
if ($Submit<>"")
{
if ($email == "") {
$message = "E-mail cannot be empty";
$msg = "Require";
}
if ($mailmessage == "" ) {
$mailfm = "Message cannot be empty";
$msg = "Require";
}
if ($msg == "") {
$result = "E-mail : $email\n\n";
$result .= "Message : $mailmessage\n";
$to = "yourname@yourcompany.com";
$subject = "Live Message";
$mailheader ="";
mail($to, $subject, $result, $mailheader);
$send = "Message sent successfully";
}
}
?>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Live Message</title>
<style type='text/css'>
.cfm {
padding-top: 50px;
}
.frm {
font-family: verdana;
font-size: 15px;
padding-top: 10px;
margin-left: 25px;
}
.cfrm {
font-family: verdana;
font-size: 15px;
padding-top: 25px;
margin-left: 25px;
}
#email {
width: 253px;
height: 25px;
margin-left: 18px;
}
textarea {
vertical-align: top;
}
.submit {
}
#submit {
width: 80px;
height: 32px;
margin-top: 25px;
margin-left: 180px;
}
.msg {
margin-top: 50px;
margin-left: 93px;
}
.message {
margin-top: 15px;
margin-left: 93px;
}
.cnfrm {
margin-top: 30px;
margin-left: 143px;
}
</style>
</head>
<body>
<form id="cfm" name="form1" method="post" action="">
<p> </p>
<p><font size="5">Use the form below to contact</font></p>
<div class="cnfrm">
<?php echo $send;
?>
</div>
<div class="msg">
<?php echo $message;
?>
</div>
<div class="frm">
<label>E-mail</label>
<input id="email" name="email" type="text">
</div>
<div class="message">
<?php echo $mailfm;
?>
</div>
<div class="cfrm">
<label>Message</label>
<textarea name="mailmessage" cols="29" rows="10"></textarea>
</div>
<div class="send">
<input id="submit" name="Submit" type="submit" value="Submit">
</div>
</form>
</body>
</html>
Create another file,sendmessage.php
, and write the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
<style type='text/css'>
.send {
position: fixed;
bottom: 3px;
right: 15px;
}
#msg {
background: #f8bc3a;
width: 200px;
height: 35px;
}
</style>
<script language="JavaScript">
function email() {
var frm = 'directories=no,location=no,menubar=no,titlebar=no,toolbar=no,scrollbars=no,status=no';
var cfrm = 'width=500,height=350';
var cnfrm = frm + ',' + cfrm;
var msg = open("http://www.domainname.com/cform.php", 'myWin', cnfrm);
}
</script>
</head>
<body>
<div class="send">
<input id="msg" value="Send Message" onclick="email();" type="submit">
</div>
</body>
</html>
Then upload both files in the same directory.
A code is required to be added in an index
file or main page
file above the /body
code.
Write the below code above the /body
tag:
<?php include("sendmessage.php"); ?>
A new window will open to send the messages.
Now open the sendmessage.php
file.
To open the new window, find the below code and replace the URL with where you have uploaded the cform.php
file
var msg = open("http://www.domainname.com/cform.php", 'myWin', cnfrm);
Open the cform.php
file.
To receive the e-mail, find the required code:
$to = "yourname@yourcompany.com";
In the code above, replace the above ID with the e-mail ID where you want to receive the e-mail.
If you require to change the subject, find the required code.
$subject ="Live Message";
In the code above, replace the subject "Live Message" with your company name or any other subject you wish to use.
Hope this will be useful to you.
not clear, it shows “Undefined variable: Submit in” which is “if($Submit<>”")"…
its shows 3 errors including this… the rest two are
Notice: Undefined variable: send
Notice: Undefined variable: mailfrm
This may be because of the code is not copied properly or modified.