Results 1 to 3 of 3

Thread: Contact form error messages on same page

  1. #1
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Cool Contact form error messages on same page

    I have produced a contact form using php. What I would like it to do is when the user has submitted the message the success message or errors found will be shown on the same page, rather than going to a blank page that shows the message in a plain format.

    An example of what I'm trying to achieve is below.

    http://chdplumbing.co.uk/contact

    My HTML and PHP is shown below.


    HTML

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CHD Home Page</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/menu.css"/>

    </head>

    <body>

    <div id="top"></div>

    <div id="wrapper">
        
        <?php include('includes/head.php'); ?>
        
        <?php include('includes/menu.php'); ?>
        

        
        <div id="banner">
        
        <img src="images/banner.jpg" />
        
        </div>
        
        <div id="content">
            <div id="leftpan">
                 
              <?php include('includes/sidemenu.php'); ?>
                    
            </div>
            
            <div id="main">
              <h1>Heading</h1>
              <form action="mail.php" method="POST" class="form">
                            <p>
                                <label for="name">Name: *</label><br />
                                <input type="text" name="name" value="<?php echo $_POST['name']; ?>">
                            </p>
                            <p>
                                <label for="email">Email: *</label><br />
                                <input type="text" name="email" value="<?php echo $_POST['email']; ?>">
                            </p>
                            <p>
                                <label for="phone">Phone: *</label><br />
                                <input type="text" name="phone" maxlength="11" value="<?php echo $_POST['phone']; ?>">
                            </p>
                            <p>
                                <label for="message">Message: *</label><br />
                                <textarea name="message"><?php echo $_POST['message']; ?></textarea>
                            <p><input type="submit" name="submit" value="Send Email"></p>
                        </form>
            </div>
        </div>
        
        <?php include('includes/foot.php'); ?>
        

    </div>

    <div id="bottom"></div>
    <?php include('includes/developer.php'); ?>
    </body>
    </html>

    PHP:

    PHP Code:
    <?php $page 'Contact';

    include(
    'inc/core.php');

    $to "gem@ismyemail.co.uk";
    $subject "Your email subject line";

    if (isset(
    $_POST['submit'])) {
        
        
    // Error Checking
        
    $errors = array();
        
        
    // Name Check
        
    if (empty($_POST['name'])) {
            
    $errors[] = 'You are required to enter your name';
        }
        
        
    // Email Check
        
    if (empty($_POST['email'])) {
            
    $errors[] = 'You are required to enter your email';
        }
        
        
    // Phone Check
        
    if (empty($_POST['phone'])) {
            
    $errors[] = 'You are required to enter your phone number';
        }
        
        if (!empty(
    $_POST['phone'])) {
            
    $phone_length strlen($_POST['phone']);
            
            if (
    $phone_length != 11) {
                
    $errors[] = 'Please enter a valid phone number';
            }
        }
        
        
    // Message check
        
    if (empty($_POST['message'])) {
            
    $errors[] = 'You are required to enter a message';
        }
        
        
    // If no errors - send email
        
    if (empty($errors)) {
            
            
    $name         htmlentities($_POST['name']);
            
    $email         htmlentities($_POST['email']);
            
    $phone        htmlentities($_POST['phone']);
            
            
    $subject 'Web Form Enquiry';
        
            
    $headers "From: $email"\r\n";
            
    $headers .= "Reply-To: $email"\r\n";
            
    $headers .= "MIME-Version: 1.0\r\n";
            
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
            
            
    $message $_POST['message'];
            
            
    $message '<html><body>';
            
    $message .= '<div style="font: 14px Arial, sans-serif; color: #333;">';
            
    $message .= $_POST['message'];
            
    $message .= "<hr />";
            
    $message .= "Name: $name"\r\n";
            
    $message .= "<br />";
            
    $message .= "Phone: $phone"\r\n";
            
    $message .= '</div>';
            
    $message .= "</body></html>";
            
            
    // Send Email
            
    mail($to,$subject,$message,$headers);
            
            
    // Set sent variable to allow sent message to be displayed
            
    $sent 'Sent';
            
        }
        
    }
    ?>

                        <?php if (!empty($errors)) { ?>
                            <div class="error">
                                <ul>
                                    <?php
                                    
                                    
    foreach ($errors as $error) {
                                        echo 
    '<li>'.$error.'</li>';
                                    }
                                    
                                    
    ?>
                                </ul>
                            </div>
                        <?php ?>
                        
                        <?php if(isset($sent)) { ?>
                            <div class="success">
                                <p>Your message was sent successfully</p>
                            </div>
                        <?php ?>


    CSS:


    Code:
    /* Contact Form */
    
    /* ----------------------------------
    #. Messages
    ---------------------------------- */
    
    .error {
    	margin: 15px 0;
    	padding: 10px 0 10px 15px;
    	
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	-o-border-radius: 5px;
    	
    	border: 1px solid #961f19;
    	
    	box-shadow: inset 0 1px 1px #ed8d88, 0 1px 3px rgba(0, 0, 0, 0.4);
    	
    	color: #ffffff;
    	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    	background-color: #da4f49;
    	*background-color: #bd362f;
    	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
    	background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
    	background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
    	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
    	background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
    	background-repeat: repeat-x;
    	border-color: #bd362f #bd362f #802420;
    	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
    	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    }
    
    .error ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    
    .error ul li {
    	margin: 5px 0;
    }
    
    .success {
    	padding: 10px 0 10px 15px;
    	
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	-o-border-radius: 5px;
    	
    	border: 1px solid #10272e;
    	
    	box-shadow: inset 0 1px 1px #5f98b0, 0 1px 3px rgba(0, 0, 0, 0.4);
    	
    	color: #ffffff;
    	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    	background-color: #da4f49;
    	*background-color: #1e3d47;
    	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#266078), to(#1e3d47));
    	background-image: -webkit-linear-gradient(top, #266078, #1e3d47);
    	background-image: -o-linear-gradient(top, #266078, #1e3d47);
    	background-image: linear-gradient(to bottom, #266078, #1e3d47);
    	background-image: -moz-linear-gradient(top, #266078, #1e3d47);
    	background-repeat: repeat-x;
    }
    
    .success p {
    	margin: 0;
    }
    
    /* ---------------------------------------
    #. Form
    --------------------------------------- */
    
    .form {
    
    }
    
    .form input[type='text'], .form textarea {
    	padding: 5px;
    	border: 1px solid #aaa;
    }
    
    .form input[type='text'] {
    	width: 200px;
    }
    
    .form textarea {
    	width: 400px;
    	height: 100px;
    	max-height: 400px;
    	resize: vertical;
    	font-family: inherit;
    }

    Thank you.

  2. #2
    Join Date
    Jul 2010
    Location
    Minnesota
    Posts
    256
    Thanks
    1
    Thanked 21 Times in 21 Posts

    Default

    Well it's pretty easy, get rid of the mail.php in the form action and it will submit to the page the form is on. Then move all the mail.php code on to the form page. You may want to move some things around but it's pretty straight forward from there.
    You never know everything, I learn everyday!

  3. The Following User Says Thank You to fastsol1 For This Useful Post:

    gemzilla (07-25-2013)

  4. #3
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    Worked a treat thank you very much... Pretty obvious really LOL

Similar Threads

  1. Question about an error message on contact form
    By windbrand in forum JavaScript
    Replies: 1
    Last Post: 01-05-2012, 05:42 PM
  2. php contact form error
    By samar470 in forum PHP
    Replies: 13
    Last Post: 07-24-2011, 07:15 AM
  3. contact form in a single page website
    By M rosi in forum PHP
    Replies: 5
    Last Post: 07-06-2011, 01:43 PM
  4. HTML Contact Form Results Page
    By SChaput in forum HTML
    Replies: 2
    Last Post: 10-12-2008, 08:34 PM
  5. Error messages in IE
    By GodLovesDemeter in forum JavaScript
    Replies: 6
    Last Post: 08-15-2007, 06:09 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •