Member Avatar for riahc3

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
  • 188 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by patk570
Member Avatar for patk570

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 because: Forgot to add something
Member Avatar for patk570

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.