Denise Denise - 1 month ago 9
HTML Question

Contact form (Bootstrap, html & php)

I just made my contact form to function, sort of. It has a few issues:


  • When the form is sent, it kicks you off the page, directs you to a blank page with the message: "Thank you etc". I would love to stay on the page, and just either get a box pop-up with the success message or just have it on the page. Either is fine :)

  • The error message doesn't show, it just puts you on a blank page.

  • The errMessages like "please fill in a valid e-mail" don't show. Probably because I removed the labels, but I would like to show that message IN the box rather than under it.

  • It's overriding my CSS! But that happens sometimes on my computer, one time I see lines other times I see boxes. So that issue might be somewhere else. However with the 'working form' it changes my last box.



This is what I meant with changing CSS on my boxes

PHP code:

<?php

if (isset($_POST["submit"])) {
$name = $_POST['name'];
$subject = $_POST['subject'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'Demo Contact Form';
$to = 'denise@hetfulfilmentbedrijf.nl';
$subject = 'Message from Contact Demo';

$body = "From: $name\n Subject: $subject\n Number: $phone\n E-Mail: $email\n Message:\n $message";

//Check if name has been entered
if(!$_POST['name']) {
$errName = 'Vul alsjeblieft je naam in';
}

//Check if subject has been entered
if(!$_POST['subject']) {
$errName = 'Vul alsjeblieft een onderwerp in';
}

//Check if number has been entered
if(!$_POST['phone']) {
$errName = 'Vul alsjeblieft je nummer in';
}

//Check if e-mail is entered and valid
if(!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$errEmail = 'Vul alsjeblieft je e-mailadres in';
}

//Check if message has been entered
if(!$_POST['email']) {
$errMessage = 'Laat alsjeblieft een bericht achter';
}

// If no errors, send email
if (!$errName && !$errSubject && !$errPhone && !$errEmail && !$errMessage) {
if (mail ($to, $subject, $body, $from)) {
echo $result='<div class="alert alert-success">Thank You! I will be in touch</div>';
}
else {
$result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
}
}
}

?>


HTML:

<form class="form-horizontal" role="form" method="post" action="partials/contactform.php">

<div class="form-group offset-top-45">
<textarea rows="11" cols="100" class="form-control" id="message" name="message" placeholder="Laat hier je bericht voor ons achter:"></textarea><?php echo htmlspecialchars($_POST['message']);?></textarea>
<span class="help-block" style="display: none;">Laat alsjeblieft een bericht achter</span>
<?php echo "<p class='text-danger'>$errMessage</p>";?>
</div>
</div>

<div class="col-md-6">
<div class="row offset-top-10">
<div class="pull-right">
<img height="60" width="100" src="/images/stamp.png" alt="stamp">
</div>
</div>

<div class="row offset-top-10" style="padding-right:20px; padding-left:10px">
<form role="form" id="feedbackForm">

<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Hoe heet je?" value="<?php echo htmlspecialchars($_POST['name']); ?>">
<span class="help-block" style="display: none;">Vul alsjeblieft je naam in</span>
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>

<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Wat is het onderwerp?" value="<?php echo htmlspecialchars($_POST['subject']); ?>">
<span class="help-block" style="display: none;">Vul alsjeblieft een onderwerpin</span>
<?php echo "<p class='text-danger'>$errSubject</p>";?>
</div>

<div class="form-group">
<input type="text" class="form-control" id="phone" name="phone" placeholder="Op welk nummer kunnen wij jou bereiken?" value="<?php echo htmlspecialchars($_POST['phone']); ?>">
<span class="help-block" style="display: none;">Vul alsjeblieft je nummer in</span>
<?php echo "<p class='text-danger'>$errPhone</p>";?>
</div>

<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Wat is je e-mailadres?">
<span class="help-block" style="display: none;">Vul alsjeblieft je e-mail in</span>
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>

<div class="form-group">
<div class="col-md-12 text-right">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary btn-s">

<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div>
</div>
</div>

</form>


Help is much appreciated!

Answer

Full script it should work without any problems

<?php


$result = "";

$errors = ""; //use to count errors


//Error message variables
$errName    = "";
$errSubject = "";
$errEmail   = "";
$errMessage = "";


//message variables
$name    = "";
$subject = "";
$phone   = "";
$email   = "";
$message = "";
$to      = "denise@hetfulfilmentbedrijf.nl";


if (isset($_POST['submit'])) {


        //check if name has been entered

        if (empty($_POST['name'])) {

                $errName = "Vul alsjeblieft je naam in";
                $errors++;
        } else {

                $name = UserInput($_POST['name']);
        }

        ////Check if subject has been entered
        if (empty($_POST['subject'])) {


                $errSubject = "Vul alsjeblieft een onderwerp in";
                $errors++;
        } else {

                $Subject = UserInput($_POST['subject']);
        }

        //check if email entered
        if (empty($_POST['email'])) {

                $errEmail = "Laat alsjeblieft een bericht achter";
                $errors++;

        } else {

                $email = UserInput($_POST['email']);


                // check if email is valid

                if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email)) {

                        $errEmail = "Vul alsjeblieft je e-mailadres in";
                        $errors++;
                }
        }

        if (empty($_POST['phone'])) {

                $errPhone = "Vul alsjeblieft je nummer in";
                $errors++;
        } else {

                $phone = UserInput($_POST['phone']);

                // check if email is numbers

                if (!is_numeric($phone)) {

                        $errPhone = "enter numbers only";
                        $errors++;
                }
        }

        //check message

        if (empty($_POST['message'])) {


                $errMessage = "Laat alsjeblieft een bericht achter";
        } else {

                $message = UserInput($_POST['message']);
        }

        if ($errors > 0) {
                // we have errors do not send email

                $result = "<div class=\"alert alert-danger\">Sorry there was an error sending your message. Please fix " . $errors . " errors on the form </div>";


        } else {
                //no errors set email headers and send email


                // Always set content-type when sending HTML email
                $headers = "MIME-Version: 1.0" . "\r\n";
                $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
                // More headers
                $headers .= 'From: <' . $email . '>' . "\r\n";


                $body = "<p> New email from $name";
                $body .= "<p> Phone : $phone</p>";
                $body .= "<p> Email : $email<p>";
                $body .= "<p>Message : $message</p>";


                if (mail($email, $subject, $msg, $header)) {

                        $result = "<div class=\"alert alert-success\">Thank You! I will be in touch</div>";
                        $_POST  = array(); //clear the form aftter sendig

                } else {

                        $result = "<div class=\"alert alert-danger\">Sorry there was an error sending your message. Please try again later</div>";
                }




        }


}



//sanitise use input
function UserInput($data)
{

        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
}


?>

<form class="form-horizontal" role="form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
   <div class="form-group">
      <div class="col-md-12 text-right">
         <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary btn-s">
         <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
               <?php echo $result; ?>  
            </div>
         </div>
      </div>
   </div>
   <div class="form-group offset-top-45">
      <textarea rows="11" cols="100" class="form-control" id="message" name="message" placeholder="Laat hier je bericht voor ons achter:"></textarea><?php if(!empty($_POST['message'])){echo $_POST['message'];}?></textarea>
      <?php echo "<p class=\"text-danger\">".$errMessage."</p>";?>
   </div>
   </div>                      
   <div class="col-md-6">
   <div class="row offset-top-10">
      <div class="pull-right"> 
         <img height="60" width="100" src="/images/stamp.png" alt="stamp">
      </div>
   </div>
   <div class="row offset-top-10" style="padding-right:20px; padding-left:10px">
<form role="form" id="feedbackForm">
   <div class="form-group">    
      <input type="text" class="form-control" id="name" name="name" placeholder="Hoe heet je?" <?php if(!empty($_POST['name'])){echo "value=\"".$_POST['name']."\"";}?>>
      <?php echo "<p class=\"text-danger\">".$errName."</p>";?>
   </div>
   <div class="form-group">
      <input type="text" class="form-control" id="subject" name="subject" placeholder="Wat is het onderwerp?" <?php if(!empty($_POST['Subject'])){echo "value=\"".$_POST['Subject']."\"";}?>>
      <?php echo "<p class=\"text-danger\">".$errSubject."</p>";?>
   </div>
   <div class="form-group">
      <input type="text" class="form-control" id="phone" name="phone" placeholder="Op welk nummer kunnen wij jou bereiken?" <?php if(!empty($_POST['phone'])){echo "value=\"".$_POST['phone']."\"";}?>>
      <?php echo "<p class=\"text-danger\">".$errPhone."</p>";?>
   </div>
   <div class="form-group">
      <input type="email" class="form-control" id="email" name="email" placeholder="Wat is je e-mailadres?">
      <?php echo "<p class='text-danger'>$errEmail</p>";?>
   </div>
</form>

Let me know if you have any question or need any help.