0

Im trying to make a email form where people can visit our site and send us emails.

Since I am not sure if I can add PHP code, lets stick to JS and HTML. I believe I can add JS libraries:

Basically:

Introduce your email address
Dropdown box that you can contact "Sales", "Support", "Other"
Once you select one of these another dropdown box gets enabled with emails avaliable also to pick from that section.
Then subject and message (text only) to send.

Also, Im wondering that once a email is selected, is it possible to show a picture? We have a male support member that is always being confused with a girl so...

Once all this, I should send it out from a "fakemail@domain.com" to forward to whoever sent it. The problem is that when a member of the staff recieves it, he should be able to reply directly to the person who sent it, not have to read the email to replace the "fakemail@domain.com" address.

Also NO DATABASES INVOLVED (just in case someone was thinking about that for the dropdown boxes)

2
Contributors
2
Replies
10
Views
3 Years
Discussion Span
Last Post by patk570
0

here ya go! Copy and paste this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
}
body {
    font-family:Verdana, Geneva, sans-serif;
}
input    {
width:375px;
display:block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
form    {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin:auto;
position:relative;
width:550px;
height:450px;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
textarea#feedback {
width:375px;
height:150px;
}
textarea.message {
display:block;
}
.subbutton {
width:100px;
position:absolute;
right:20px;
bottom:20px;
background:#09C;
color:#fff;
font-family: Tahoma, Geneva, sans-serif;
height:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
.subbutton:hover {
background:#fff;
color:#09C;
}
textarea:focus, input:focus {
border: 1px solid #09C;
}
</style>
<script type="text/javascript">
 function setOptions(chosen) {
var selbox = document.myform.opttwo;

selbox.options.length = 0;
if (chosen == "0") {
  selbox.options[selbox.options.length] = new Option('Please choose above',' ');

}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new
Option('sales@demo.com','sales@demo.com');
  selbox.options[selbox.options.length] = new
Option('sales2@demo.com','sales2@demo.com');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new
Option('support@demo.com','support@demo.com');
  selbox.options[selbox.options.length] = new
Option('support2@demo.com','support2@demo.com');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new
Option('other@demo.com','other@demo.com');
  selbox.options[selbox.options.length] = new
Option('other2@demo.com','other2@demo.com');
}
}
</script>
</head>

<body>
<div class="contactform">
<form action="blah.php" method="post" name="myform">
    <div><label for="select_email_to">Send to:</label><br /><select class="input" onchange="setOptions(document.myform.select_email_to.options[document.myform.select_email_to.selectedIndex].value);" name="select_email_to">
    <option selected="selected" value="0">Please Select</option>
    <option value="1">Sales</option>
    <option value="2">Support</option>
    <option value="3">Other</option>
    </select></div><br />
    <div><label for="opttwo">Choose Email</label><br /><select class="input" name="opttwo" size="1">
<option value="0" selected="selected">Please choose above</option>
</select></div><br />
<div><label for="cust_name"><span>Your Name:</span></label><br /><input class="input" type="text" name="cust_name" placeholder="Your Name" /></div><br />
<div><label for="cust_email"><span>Your Email:</span></label><br /><input class="input" type="email" name="cust_email" placeholder="demo@demo.com" /></div><br />
<label>
<span>Message:</span></label><br /><textarea id="feedback" name="feedback"></textarea>
<input type="submit" name="emailus" class="subbutton"  value="Email Us" />
</form>
</div>
</body>
</html>

Edited by patk570: Forgot to add something

0

here is one with the mailform included.

<?php 
//email
if(isset($_POST['emailus'])) {
$result = "";   
$name = mysql_real_escape_string($_POST['cust_name']); // required
$to_email = mysql_real_escape_string($_POST['opttwo']);// required
$from_email = mysql_real_escape_string($_POST['email']);// required
$message = mysql_real_escape_string($_POST['feedback']);// required

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = $to_email;
    $email_subject = "Message from website"; //Edit this message if you want to

    $email_message = "Form details below.\n\n";


    $email_message .= "Name: ".$name."\n";
    $email_message .= "Email: ".$from_email."\n";
    $email_message .= "Comments: ".$message."\n";

// create email headers
$headers = 'From: '.$name."\r\n".
'Reply-To: '.$from_email."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  
}
//send
$result = '<span class="success">Thanks for contacting us, someone will get back to you soon</span>';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
}
body {
    font-family:Verdana, Geneva, sans-serif;
}
input    {
width:375px;
display:block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
form    {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin:auto;
position:relative;
width:550px;
height:450px;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
textarea#feedback {
width:375px;
height:150px;
}
textarea.message {
display:block;
}
.subbutton {
width:100px;
position:absolute;
right:20px;
bottom:20px;
background:#09C;
color:#fff;
font-family: Tahoma, Geneva, sans-serif;
height:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
.subbutton:hover {
background:#fff;
color:#09C;
}
textarea:focus, input:focus {
border: 1px solid #09C;
}
.success{
    background:#0C6;
    color:black;
}
</style>
<script type="text/javascript">
 function setOptions(chosen) {
var selbox = document.myform.opttwo;

selbox.options.length = 0;
if (chosen == "0") {
  selbox.options[selbox.options.length] = new Option('Please choose above',' ');

}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new
Option('sales@demo.com','sales@demo.com');
  selbox.options[selbox.options.length] = new
Option('sales2@demo.com','sales2@demo.com');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new
Option('support@demo.com','support@demo.com');
  selbox.options[selbox.options.length] = new
Option('support2@demo.com','support2@demo.com');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new
Option('other@demo.com','other@demo.com');
  selbox.options[selbox.options.length] = new
Option('other2@demo.com','other2@demo.com');
}
}
</script>
</head>

<body>
<div class="contactform">
<div><?php $result ?></div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="myform">
    <div><label for="select_email_to">Send to:</label><br /><select class="input" onchange="setOptions(document.myform.select_email_to.options[document.myform.select_email_to.selectedIndex].value);" name="select_email_to">
    <option selected="selected" value="0">Please Select</option>
    <option value="1">Sales</option>
    <option value="2">Support</option>
    <option value="3">Other</option>
    </select></div><br />
    <div><label for="opttwo">Choose Email</label><br /><select class="input" name="opttwo" size="1">
<option value="0" selected="selected">Please choose above</option>
</select></div><br />
<div><label for="cust_name"><span>Your Name:</span></label><br /><input class="input" type="text" name="cust_name" placeholder="Your Name" /></div><br />
<div><label for="cust_email"><span>Your Email:</span></label><br /><input class="input" type="email" name="cust_email" placeholder="demo@demo.com" /></div><br />
<label>
<span>Message:</span></label><br /><textarea id="feedback" name="feedback"></textarea>
<input type="submit" class="subbutton" name="emailus"  value="Email Us" />
</form>
</div>
</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.