Codementor Events

How to Create a Sticky Email Contact Form

Published Jan 12, 2017Last updated Jan 18, 2017
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>&nbsp</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.

Discover and read more posts from Nishant Shah
get started
post comments2Replies
Shumon Uddin
8 years ago

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

Nishant Shah
8 years ago

This may be because of the code is not copied properly or modified.