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

PHP

Posted by Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

input area not getting focused

i have created a contact form but for some reason the input area don't get focus when l click on it. any ideas how to remedy this would be greatly appreciated. my code is below:

<?php
//If the form is submitted
if(isset($_POST['submit'])) {

    //Check to make sure that the name field is not empty
    if(trim($_POST['contactname']) == '') {
        $hasError = true;
    } else {
        $name = trim($_POST['contactname']);
    }

    //Check to make sure that the phone field is not empty
    if(trim($_POST['phone']) == '') {
        $hasError = true;
    } else {
        $phone = trim($_POST['phone']);
    }

    //Check to make sure that the name field is not empty
    if(trim($_POST['weburl']) == '') {
        $hasError = true;
    } else {
        $weburl = trim($_POST['weburl']);
    }

    //Check to make sure that the subject field is not empty
    if(trim($_POST['subject']) == '') {
        $hasError = true;
    } else {
        $subject = trim($_POST['subject']);
    }

    //Check to make sure sure that a valid email address is submitted
    if(trim($_POST['email']) == '')  {
        $hasError = true;
    } else if (!filter_var( trim($_POST['email'], FILTER_VALIDATE_EMAIL ))) {
        $hasError = true;
    } else {
        $email = trim($_POST['email']);
    }

    //Check to make sure comments were entered
    if(trim($_POST['message']) == '') {
        $hasError = true;
    } else {
        if(function_exists('stripslashes')) {
            $comments = stripslashes(trim($_POST['message']));
        } else {
            $comments = trim($_POST['message']);
        }
    }

    //If there is no error, send the email
    if(!isset($hasError)) {
        $emailTo = 'support@dclshop.com'; // Put your own email address here
        $body = "Name: $name \n\nEmail: $email \n\nPhone Number: $phone \n\nSubject: $subject \n\nComments:\n $comments";
        $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

        mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
    }
}
?>

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Contact Us</title>

<!-- Bootstrap -->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" media="screen">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]--


</head>

<body>
        <!-- Nav bar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container fr-1">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

       <a class="navbar-brand logo text-muted" itemtype="http://schema.org/Organization" href="index.html"></a>
        <div class="collapse navbar-collapse">


          <ul class="nav navbar-nav nav-pills navbar-right">

            <li class="active"><a href="index.html">Home</a></li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li class="menu-item dropdown-submenu"><a tabindex="-1" href="#">Industrial Consumables</a>
                  <ul class="dropdown-menu">
                    <li class="menu-item">
                      <a itemprop="url" href="fastener.html">Fasteners</a>
                    </li>
                    <li class="menu-item ">
                      <a itemprop="url" href="general.html">General</a>
                    </li>
                    <li class="menu-item ">
                      <a itemprop="url" href="electrical.html">Electrical</a>
                    </li>             
                  </ul>
                </li>
                <li class="menu-item dropdown-submenu"><a tabindex="-1" href="#">Health and Safety</a>
                  <ul class="dropdown-menu">
                    <li class="menu-item ">
                      <a itemprop="url" href="pProtective.html">Personal Protective</a>
                    </li>
                    <li class="menu-item ">
                      <a itemprop="url" href="workspace.html">Workspace</a>
                    </li>
                    <li class="menu-item ">
                      <a itemprop="url" href="industrialequip.html">Industrial Equipments</a>
                    </li>

                  </ul>
                </li>
                <li class="menu-item dropdown-submenu"><a tabindex="-1" href="#">Fabrication</a>
                  <ul class="dropdown-menu">
                    <li class="menu-item ">
                      <a itemprop="url" href="metal-fab.html">Metal fabrication</a>
                    </li>
                    <li class="menu-item ">
                      <a itemprop="url" href="pallet.html">Pallet & Storage Facilities</a>
                    </li>
                    <li class="menu-item ">
                      <a itemprop="url" href="special_fab.html">Special Fabrication</a>
                    </li>       
                  </ul>
                </li>

                <li class="menu-item dropdown-submenu"><a tabindex="-1" href="#">Office and Home</a>
                  <ul class="dropdown-menu">
                    <li class="menu-item ">
                      <a itemprop="url" href="stationery.html">Home Stationery</a>
                    </li>
                    <li class="menu-item ">
                      <a itemprop="url" href="stationery.html">Office Stationery</a>
                    </li>
                    <li class="menu-item ">
                      <a itemprop="url" href="cop.html">Coporate Branding</a>
                    </li>       
                  </ul>
                </li>


              </ul>
            </li>
            <li><a href="about.html">About</a></li>

            <li><a href="contact.php">Contact</a></li>
            <!-- search barbit -->
            <li>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- Nav bar ends here -->

  <div class="container">
    <div class="row fr-4">
      <div class="col-md-6 col-sm-12 col-md-push-3">
        <form role="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
          <fieldset>
            <legend>Send Us a Message</legend>

            <?php if(isset($hasError)) { //If errors are found ?>
              <p class="alert alert-danger">Please check if you've filled all the fields with valid information and try again. Thank you.</p>
            <?php } ?>

            <?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
              <div class="alert alert-success">
                <p><strong>Message Successfully Sent!</strong></p>
                <p>Thank you for using our contact form, <strong><?php echo $name;?></strong>! Your email was successfully sent and we&rsquo;ll be in touch with you soon.</p>
              </div>
            <?php } ?>

            <div class="form-group">
              <label for="name">Your Name<span class="help-required">*</span></label>
              <input type="text" name="name" id="contactname" value="" class="form-control required" role="input" aria-required="true" />
            </div>
                   <div class="form-group">
              <label for="phone">Your Phone Number<span class="help-required">*</span></label>
              <input type="text" name="phone" id="phone" value="" class="form-control required" role="input" aria-required="true" />
            </div>

            <div class="form-group">
              <label for="email">Your Email<span class="help-required">*</span></label>
              <input type="text" name="email" id="email" value="" class="form-control required email" role="input" aria-required="true" />
            </div>

            <div class="form-group">
              <label for="weburl">Your Website<span class="help-required">*</span></label>
              <input type="text" name="weburl" id="weburl" value="" class="form-control required url" role="input" aria-required="true" />
            </div>


            <div class="form-group">
              <label for="subject">Subject<span class="help-required">*</span></label>
              <select name="subject" id="subject" class="form-control required" role="select" aria-required="true">
                <option>Fasteners</option>
                <option>Specalised consumables</option>
                <option>General consumables</option>
                <option>Personal protective consumables</option>
                <option>Workspace</option>
                <option>Industrial equipments</option>
                <option>Stationary</option>
                <option>Coporate Branding</option>
                <option>Metal fabrication</option>
                <option>Pallet & storage facilities</option>
                <option>Special requirements</option>
              </select>
            </div>

            <div class="form-group">
              <label for="message">Message<span class="help-required">*</span></label>
              <textarea rows="8" name="message" id="message" class="form-control required" role="textbox" aria-required="true"></textarea>
            </div>

            <div class="actions">
              <input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-primary" title="Click here to submit your message!" />
              <input type="reset" value="Clear Form" class="btn btn-danger" title="Remove all the data from the form." />
            </div>
          </fieldset>
        </form>
      </div><!-- col -->
    </div><!-- row -->



    </div> <!-- /container -->
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js" type="text/javascript"></script>
<script src="js/bootstrap-contact.js" type="text/javascript"></script>
</body>
</html>

3 Answers

Michael De Marre
Michael De Marre
14,198 Points
Michael De Marre
Michael De Marre
14,198 Points

Hi Kelvin. Could you elaborate a little? Do you mean that the cursor doesn't show up at all in your input fields, or that there is no visual distinction between selected and unselected input fields? If it is the second scenario, it is a CSS issue. You will have to apply a separate rule for focused fields. Try using the input:focus selector to differentiate the formatting of the focused field from the other fields.

Kelvin Atawura
seal-mask
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points
Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

all the input get focussed when l click on theme except the name input area and that really confusing me as its all the same code. for some reason the cursor turns into a thumb when l hover over the name input area.

Mike Wojtkowski
Mike Wojtkowski
8,245 Points
Mike Wojtkowski
Mike Wojtkowski
8,245 Points

you have

label for="name" and input id="contactname"

change label to "contactname"

Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

l have made those changes but it don't seem to work. l know theres a mistake somewhere but l cant figure it out so fustrating lol

Mike Wojtkowski
Mike Wojtkowski
8,245 Points

Hello again :)

looking at your PHP code you check $_POST['contactname'] yet you don't have such field on your form, "Your name" field has name="name" change it to name="contactname"

if(trim($_POST['contactname']) == '') {
    $hasError = true;
} else {
    $name = trim($_POST['contactname']);
}

also you're missing '>' 

<![endif]--

with what I said earlier name input should look like this

<div class="form-group">
<label for="contactname">Your Name<span class="help-required">*</span></label>
<input type="text" name="contactname" id="contactname" value="" class="form-control required" role="input" aria-required="true" />
</div>

with that your php condition will work and focus on label click will work also. Hope it helps :)