How do I properly apply CSS to a PHP echo?

Question

I can't get the success message that appears after I submit a contact form to adopt its appropriate CSS.

The steps are as follows:

1. A user enters their data into a contact form.

2. That form information is directed to an external PHP script that sends the information to an email address.

3. After the form is submitted, an echo appears from the PHP in the form of a DIV element that reads something like "You've succeeded!" (which, by now, is taunting me).

4. A "success" class is assigned to the DIV element, which should finally apply CSS of the appropriate class

Everything on the form functions well, except for the echo. While the appropriate class is applied, there are no actual changes to the DIV element. In simpler terms, I want the text to be green, but it stays black.

HTML FORM:

          <div class="col-lg-5 col-md-8">
            <div id="sendmessage" ></div>
            <div id="errormessage"></div>
            <div class="form">
              <form action="php/contactform.php" method="post" role="form" class="contactForm" id="contactForm">
                <div class="form-group">
                  <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" required />
                </div>
                <div class="form-group">
                  <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" required />
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" required />
                </div>
                <div class="form-group">
                  <textarea class="form-control" name="message" id="message" rows="5" data-rule="required" required placeholder="Message"></textarea>
                </div>
                <div class="text-center"><button type="submit" name="submit">Send Message</button></div>
              </form>
            </div>
          </div>

CSS:

#contact .form .success {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

#contact .form .error {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid rgba(185, 74, 72, 0.3);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

PHP:

<?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Get the form fields and remove whitespace.
        $name = strip_tags(trim($_POST["name"]));
                $name = str_replace(array("\r","\n"),array(" "," "),$name);
        $subject = strip_tags(trim($_POST["subject"]));
                $subject = str_replace(array("\r","\n"),array(" "," "),$subject);
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);

        // Check that data was sent to the mailer.
        if ( empty($name) OR empty($subject) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
            // Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Oops! There was a problem with your submission. Please complete the form and try again.";
            exit;
        }

        // Set the recipient email address.
        // FIXME: Update this to your desired email address.
        $recipient = "[email protected]";

        // Set the email subject.
        $subject = "Subject: $subject";

        // Build the email content.
        $email_content = "Name: $name\n";
        $email_content .= "Email: $email\n\n";
        $email_content .= "Message:\n$message\n";

        // Build the email headers.
        $email_headers = "From: $name <$email>";

        // Send the email.
        if (mail($recipient, $subject, $email_content, $email_headers)) {
            // Set a 200 (okay) response code.
            http_response_code(200);
            echo "Thank You! Your message has been flarged.";
        } else {
            // Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Oops! Something went wrong and we couldn't send your message.";
        }

    } else {
        // Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    }

?>

I won't link to the Ajax, because it already applies the appropriate class.

I'll keep finding iterations, but I think this boils down to a "you just don't know CSS" issue. Any criticism regarding the code, no matter how small or insignificant, is welcome.

Answer 1

You're trying to append success class to sendmessage. To do that your CSS content should be as follows,

#contact #sendmessage.success {color:green;}