css classes are showing before a php form is submitted - php

Question

I am working on a contact form at the minute which will spit out some errors if certain fields are left blank, and if the form submits successfully the user will see a successful message.
At the moment I have an errors class and a success class - these are below:
.errors {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
padding: 7px 5px;
color: #A94442;
font-weight: 400;
width: 100%;
border-radius: 2px;
border: 1px solid #EBCCD1;
background-color: #F2DEDE;
margin: 0 0 10px 0;
}
.success {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
padding: 7px 5px;
color: #3C763D;
font-weight: 400;
width: 100%;
border-radius: 2px;
border: 1px solid #D6E9C6;
background-color: #DFF0D8;
margin: 0 0 10px 0;
}
As far as the php validation goes, the errors/success messages are working as expected, however the problem I have is that the background-color and borders of these classes are showing blank when the users initially goes to the contact page.
You can get to the page here Contact Page by viewing the page you will see the issue straight away.
Please could you give me some advice/suggestions on how to hide these until they are needed? I could remove the background-color and borders from the classes and just have the text, but ideally I would like to keep the styling as it is.
Here is the php to go with this and also the html form
$errors = array();
$success = "";
$name = "";
$email = "";
$website = "";
$budget = "";
$message = "";
if (isset($_POST['contact_submit'])) {
if (isset($_POST['name'])) {
$name = $_POST['name'];
}
if (isset($_POST['email'])) {
$email = $_POST['email'];
}
if (isset($_POST['website'])) {
$website = $_POST['website'];
}
if (isset($_POST['budget'])) {
$budget = $_POST['budget'];
}
if (isset($_POST['message'])) {
$message = $_POST['message'];
}
if (empty($name)) {
$errors[] = "Please enter your name.";
}
if (empty($email)) {
$errors[] = "Please enter a valid email address.";
}
elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = "Please enter a valid email address.";
}
if (empty($message)) {
$errors[] = "Don't forget your message!";
}
if (count($errors) == 0) {
$headers = "From: email here...\r\n";
$headers .= "Content-type: text/html\r\n";
$myaddress = "email here...";
$subject = "Website Enquiry";
$emailmessage = "<b><u>Name:</u></b><br>$name<br><br><b><u>Email:<br></u></b>$email<br><br><b><u>Message:<br></u></b> $message";
if (!mail($myaddress, $subject, $emailmessage, $headers)) {
$errors[] = "A problem occurred sending your email.";
}
else {
$success = "Your message was sent successfully!";
$name = "";
$email = "";
$message = "";
}
}
}
<form method="POST" action="">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<?php echo "<div class=\"errors\">" . implode("<br>", $errors) . "</div>"; ?>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<?php echo "<div class=\"success\">" . $success . "</div>"; ?>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<input type="text" name="name" placeholder="Your Name *" value="<?php echo htmlentities($name); ?>">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<input type="text" name="email" placeholder="Your Email *" value="<?php echo htmlentities($email); ?>">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<input type="text" name="website" placeholder="Website (optional)" value="<?php echo htmlentities($website); ?>">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<input type="text" name="budget" placeholder="Budget (optional)" value="<?php echo htmlentities($budget); ?>">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<textarea type="text" name="message" placeholder="Your Message *"><?php echo htmlentities($message); ?></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="contact_submit" class="btn-one">Send</button>
</div>
</div>
</form>
Thanks in advance!!

Answer 1

You have to do some thing like this
<?php
if(!empty($errors))
{
?>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<?php echo "<div class=\"errors\">" . implode("<br>", $errors) . "</div>"; ?>
</div>
</div>
<?php
}
else
{
}
if(!empty($success))
{
?>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<?php echo "<div class=\"success\">" . $success . "</div>"; ?>
</div>
</div>
<?php
}
else
{
}
?>

Answer 2

It would be helpful if you could share your PHP code, but without that I would guess that you're doing something like:
<div class="errors">
<?php
foreach ($errors as $error) {
echo $error . '<br>';
}
?>
</div>
When viewing the HTML for your website, the <div class="errors"></div> HTML is already present.
You should wrap that <div> with an isset() statement, so the HTML is only output when there is something to be shown.
For example:
<?php if (isset($errors) && !empty($errors)): ?>
<div class="errors">
<?php
foreach ($errors as $error) {
echo $error . '<br>';
}
?>
</div>
<?php endif; ?>

Answer 3

Simplest way to do this :
// your php code goes here
<?php
$http_post = ('POST' == $_SERVER['REQUEST_METHOD']);
if($http_post)
{
if(empty($error))
$class = 'error';
else
$class = 'success';
}
?>
// your html code
<div class="<?php echo $class?>"></div>