css classes are showing before a php form is submitted

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 &#42;" 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 &#42;" 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 &#42;"><?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!!

You should provide the code that renders the relevant part of the page. — Darragh Enright
– Darragh Enright, Commented Sep 16, 2015 at 10:41

Abdulla Nilam · Accepted Answer · 2015-09-16 10:44:18Z

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
    {

    }

?>

answered Sep 16, 2015 at 10:44

Abdulla Nilam

39.8k18 gold badges85 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam McCann Over a year ago

Thanks for this, thats working how I wanted, not sure why I didn't think of something like that :)

Kirk Beard · Accepted Answer · 2015-09-16 10:44:56Z

0

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; ?>

answered Sep 16, 2015 at 10:44

Kirk Beard

9,89312 gold badges45 silver badges48 bronze badges

Comments

Happy Coding · Accepted Answer · 2015-09-16 10:47:44Z

0

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>

answered Sep 16, 2015 at 10:47

Happy Coding

2,5151 gold badge15 silver badges24 bronze badges

Collectives™ on Stack Overflow

css classes are showing before a php form is submitted

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related