Request Info Form

[tennesseenative]

Evening all,

 

Trying to update my venues websites contact page to incorporate a request form "area",

 

http://www.sunsphereeventrentals.com

 

I got ahold of a simple for and submit code in 3 different pages.  A contact form, contact handler form and thank you form.  I am trying to expand "add more fields" by myself and not having any luck.

 

Attached is a simple form for name, email and message, as well as the contact-handler-form.php  I am trying to add other fields which I am able to do.  However I can't seem to figure out how to update the contact-form-handler with the new field info, so that it will input into the email via submit.

 

Any help would be greatly appreciated, or if I there is a section in here that offers "pay for" services that would be great to.

contact-form.html

contact-form-handler.php

Edited September 20, 2015 by tennesseenative

[QuickOldCar]

 

However I can't seem to figure out how to update the contact-form-handler with the new field info, so that it will input into the email via submit.

 

It wasn't clear if you added the check for $_POST['new_key'] for new post values, you would add that in the if empty errors statement.

That only checks for empty and not any validation whatsoever.

 

The javascript Validator function is not a good way to do this, should always validate server side, not client side. If want to do additional checks client side that's fine, but don't rely on it.

I added the message in the function to be required.

<script language="JavaScript">
// Code for validating the form
// Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
// for details
var frmvalidator  = new Validator("contactform");
frmvalidator.addValidation("name","req","Please provide your name");
frmvalidator.addValidation("email","req","Please provide your email");
frmvalidator.addValidation("email","email","Please enter a valid email address");
frmvalidator.addValidation("message","req","Please write your message");
</script>

You have an $email_body variable, you can add what you need there additional

$email_body = "You have received a new message. ".

    " Here are the details:\n Name: $name \n Email: $email_address \n Message \n $message";

 

You can also do concatenation with an assignment operator

 

$email_body = "You have received a new message. ".

    " Here are the details:\n Name: $name \n Email: $email_address \n Message \n $message";

$email_body .= "Additional information here \n";

 

You can post into Job Offerings if want to hire someone

 

Here is a form I did for another person you can try.

<?php
$msg = '';//keep empty
$to ='my email address';//your email
$captcha_key = '';//place google captcha key here if have one

if (isset($_POST['submit'])) {
    $errors = array();    
    
    if (isset($_POST['name']) && trim($_POST['name']) != '') {
        $name = trim($_POST['name']);
    } else {
        $name     = '';
        $errors[] = 'name';
    }    
 
    if (isset($_POST['email']) && filter_var(trim($_POST['email']), FILTER_VALIDATE_EMAIL)) {
        $email = trim($_POST['email']);
    } else {
        $email    = '';
        $errors[] = 'email';
    }
    
    if (isset($_POST['subject']) && trim($_POST['subject']) != '') {
        $subject = trim($_POST['subject']);
    } else {
        $subject  = '';
        $errors[] = 'subject';
    }
    
    if (isset($_POST['message']) && trim($_POST['message']) != '') {
        $message = trim($_POST['message']);
    } else {
        $message  = '';
        $errors[] = 'message';
    }
if(!empty($captcha_key)){   
    if(isset($_POST['g-recaptcha-response'])){
        $captcha=$_POST['g-recaptcha-response'];
    }
    
    if(!$captcha){
          $errors[] = 'captcha';
    } else {
        $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$captcha_key."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
        if($response.success==false){
          $errors[] = 'captcha';
        }
    }
}   
    
    if (empty($errors)) {
        $msg = "Form was submitted";
	$email_subject = "Contact form submission: $name";
	$email_body = "You have received a new message. \n Here are the details:\n";
	$email_body .= "Name: $name \n";
	$email_body .= "Email: $email \n";
	$email_body .= "Subject \n $subject \n";
	$email_body .= "Message \n $message"; 
	
	$headers = "From: $to\n"; 
	$headers .= "Reply-To: $email_address";
	
	mail($to,$email_subject,$email_body,$headers);
	//redirect to the 'thank you' page
	header('Location: contact-form-thank-you.html');
	exit;

    } else {
        $msg = "<p style='color:red;'>You have the following errors:" . implode($errors, ", ") . "</p>";
    }
}
?>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact Form</title>
<?php
if(!empty($captcha_key)){
echo "<script src='https://www.google.com/recaptcha/api.js'></script>";
}
?>
<style>
*:focus {
    outline: none;
}
body {
    font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    max-width:99%;
}
.wrap{
    position:relative;
    width:75%;
    margin-left:auto;
    margin-right:auto;
    padding:5px;
}
ul{
    list-style-type: none;
    padding:0;
    margin:0;
}
.contact_form h2, .contact_form label {
    font-family:Georgia, Times, "Times New Roman", serif;
}
.form_hint, .required_notification {
    font-size: 11px;
}
.contact_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px;
    border-bottom:1px solid #eee;
    position:relative;
}
.contact_form li:first-child, .contact_form li:last-child {
    border-bottom:1px solid #777;
}
.contact_form h2 {
    margin:0;
    display: inline;
}
.required_notification {
    color:#d45252;
    margin:5px 0 0 0;
    display:inline;
    float:right;
}
.contact_form label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contact_form input {
    height:20px;
    width:300px;
    padding:5px 8px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}
.contact_form textarea {
    padding:8px;
    width:300px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}
.contact_form button {
    margin-left:156px;
}
.contact_form input, .contact_form textarea {
    padding-right:30px;
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff;
    border:1px solid #555;
    box-shadow: 0 0 3px #00FF00;
    padding-right:70px;
}
/* Button Style */
button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
    opacity:.85;
    cursor: pointer;
}
button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset;
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
    
}
input:required, textarea:required {
    background: #fff;
    border-color:#FF0000;
    
}
.contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */
    background: #fff;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
}
.form_hint::before {
    content: "\25C0"; /* left point triangle in escaped unicode */
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
}
.contact_form input:focus + .form_hint {
    display: inline;
}
.contact_form input:required:valid + .form_hint {
    background: #28921f;
}
.contact_form input:required:valid + .form_hint::before {
    color:#28921f;
}

</style>
</head>
<body>
<div class="wrap">
<form class="contact_form" action="" method="post" name="contact_form" novalidate>
<ul>
<li>
    <h2>Contact Form</h2>
</li>    
<?php echo $msg;?>
<li>
<label for="name">Name:</label>
<input id="name" name="name" type="text" value="<?php echo $name;?>" required/>
</li>
<li>
    <label for="email">Email:</label>
    <input id="email" name="email" type="email" value="<?php echo $email;?>" required/>
    <span class="form_hint">Proper format "name@domain.com"</span>
</li>
<li>
    <label for="subject">Subject:</label>
    <textarea id="subject" name="subject" cols="40" rows="4" required><?php echo $subject;?></textarea>    
</li>
<li>
    <label for="message">Message:</label>
    <textarea id="message" name="message" cols="40" rows="4" required><?php echo $message;?></textarea>

</li>
<?php
if(!empty($captcha_key)){
echo "<div class='g-recaptcha' data-sitekey='".$captcha_key."'></div>";
}
?>
<li>
    <button class="submit" type="submit" name="submit">Submit Form</button>
</li>
</ul>
</form>

<div>
</body>
</html>