Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Henry Morrow
Henry Morrow
19,425 Points

External stylesheet CSS is not being applied to my html form.

I am working on a form for my website included below 

<form method="post" action="contact.php">
  <label for="name">Name</label>
  <input  type="text" id="name" name="name" value="<?php if (isset($name)) { echo $name; } ?>" />                       
  <label for="email">Email</label>
  <input  type="text" id="email" name="email" value="<?php if (isset($email)) { echo $email; } ?>" />
  <label  for="name">Suggest Item Details</label>
  <textarea name="details" id="details"><?php if (isset($details)) { echo htmlspecialchars($_POST["details"]); } ?></textarea>
  <input  class="field" type="submit" value="Send" />
</form>

The form includes some PHP to grab variables and display so the form doesn't change if someone doesn't submit correctly. When I try to style the form with my external stylesheet none of the styles apply. All of my other styles work for the rest of the page, and if I include the styles as attributes with style="" inside of the input and label tags then the styles I want apply correctly.

This leads me to believe I am not selecting correctly, though I have tried using the following selectors for example for the first input field (not all at the same time) and none of them work: 

form input {}

form input[type=text] {}

input[type=text] {}

input[type='text'] {}

#name{}

I have also tried wrapping the for in a div and calling the inputs with a class and id from that div. Am I making a syntax error or maybe my form html is not ordered properly? Any help would be appreciated.

1 Answer

Gurpeer Duhra
Gurpeer Duhra
4,205 Points
Gurpeer Duhra
Gurpeer Duhra
4,205 Points

Your link tag should be in between <head></head> tags. If you have renamed your index.html to index.php for PHP to functions with wamp server or so, please show me you entire html and where your CSS file is located.

Henry Morrow
Henry Morrow
19,425 Points

The file is located correctly as I mentioned all of the other styles in the index.php file work with my stylesheet. The only elements that don't work are specifically on the form which is why I think my error is in the syntax with which I am trying to style the individual form elements. Here is my index file if that is helpful.

<?php 

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = trim(filter_input(INPUT_POST,"name",FILTER_SANITIZE_STRING));
    $email = trim(filter_input(INPUT_POST,"email",FILTER_SANITIZE_EMAIL));
    $details = trim(filter_input(INPUT_POST,"details",FILTER_SANITIZE_SPECIAL_CHARS));

    if ($name == "" || $email == "" || $details == "") {
        $error_message = "Please fill in the required fields: Name, Email, Details";
    }
    if (!isset($error_message) && $_POST["address"] != "") {
        $error_message = "Bad form input";
    }

    require("inc/phpmailer/class.phpmailer.php");

    $mail = new PHPMailer;

    if (!isset($error_message) && !$mail->ValidateAddress($email)) {
        $error_message = "Invalid Email Address";
    }

    if (!isset($error_message)) {
        $email_body = "";
        $email_body .= "Name " . $name . "\n";
        $email_body .= "Email " . $email . "\n";
        $email_body .= "Details " . $details . "\n";

        $mail->setFrom($email, $name);
        $mail->addAddress('hjmorrow23@gmail.com', 'Henry');     // Add a recipient

        $mail->isHTML(false);                                  // Set email format to HTML

        $mail->Subject = 'New Project inquiry from' . $name;
        $mail->Body    = $email_body;

        if($mail->send()) {
            header("location:contact.php?status=thanks");
            exit;
        }
        $error_message = 'Message could not be sent.';
        $error_message .= 'Mailer Error: ' . $mail->ErrorInfo;
    }

}


$pageTitle = "Contact";
$pageHeading = "Contact";


include("inc/header.php");  
?>      
        <!--Body Column in Grid-->


        <div class="content">
                <h2 class="content-header">Say hello!</h2>
                    <div class="intro-content">
                      <?php if (isset($_GET["status"]) && $_GET["status"] == "thanks") {
                        echo "<p>Thanks for the email! I&rsquo;ll check out your submission,s shortly!</p>";
                        } else {
                            if (isset($error_message)) {
                                echo "<p class='message'>".$error_message . "</p>";
                            } else {
                                echo "<p>If you would like to know more about me and how I can work to help meet your professional web goals, feel free to reach me by submitting the form below with your name, email, and a brief description of the project you are interested in. I would be happy to meet with you to discuss ways I can help your business reach its potential.</p>";
                        }
                    ?>
                    </div>          
                    <div id="contact">
                        <form method="post" action="contact.php">
                           <label style="text-align: center; display: block; padding-bottom: 1em;" for="name">Name</label>
                           <input style="margin: 0 auto; display: block;" type="text" id="name" name="name" value="<?php if (isset($name)) { echo $name; } ?>" />                       
                           <label style="text-align: center; display: block; padding-bottom: 1em; padding-top: 2em;" for="email">Email</label>
                           <input style="margin: 0 auto; display: block;" type="text" id="email" name="email" value="<?php if (isset($email)) { echo $email; } ?>" />
                           <label style="text-align: center; display: block; padding-bottom: 1em; padding-top: 2em;" for="name">Suggest Item Details</label>
                           <textarea style="margin: 0 auto; display: block; padding-bottom: 2em;" name="details" id="details"><?php if (isset($details)) { echo htmlspecialchars($_POST["details"]); } ?></textarea>
                            <div style="display:none">
                                <label for="address">Address</label>
                                <input type="text" id="address" name="address" />
                                <p>Please leave this field blank</p>
                            </div>
                            <input style="margin: 0 auto; display: block; margin-top: 2em;" class="field" type="submit" value="Send" />
                        </form>     
                    </div>      
                <?php } ?>
        </div>

<?php include("inc/footer.php"); ?>