Contact Form WITP Website Project

contact-form-witp-website-project.markdown

Contact Form WITP Website Project

A Pen by Grace Hanssen on CodePen.

License.

index.html

<!-- Responsive Meta Tag below

<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->

<!-- Bootstrap Link below -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

<!-- Contact Form -->

<h1 id="title">Contact Us</h1>
<p id="description"></p>

<section id="contact">
  <div class="container">
    
      <!-- <div class="col-lg-12 about-top-space text-center"> -->
  
      <label for="name" id="name">Name:</label>
      <input autofocus type="text" id="name-label" name="name" class="form-control" placeholder="Enter your name" required>
    
    <br>

      <label for="number" id="number">Telephone Number:</label>
      <input autofocus type="text" id="number-label" name="number"
class="form-control" placeholder="Enter telephone number" required>
 
    <br>
    
    <label for="email" id="email">Email Address:</label>
      <input autofocus type="text" id="email-label" name="email" class="form-control" placeholder="Enter your email address" required>
      
    <br>
      
    <div>
    <label for="textarea">Message:</label>
    <textarea class="form-control" id="message" rows="5" placeholder="Enter your message"></textarea>
    </div>
    <br>
      
    <div class="rowTab">
      
    </div>
      <div id="submit"><input type="submit" name="submit" value="Submit Now">         
    </div>
    <br>
    
  </form>
  </div>
 
</section>

style.css

body {
  
  font-family: monospaced;
  margin-top: 50px;
  margin-bottom: 90px;
  padding-left: 30px;
  padding-right: 40px;
}

h1 {
  text-align: center;
  color: green;
  font-weight: bold;
}
  
#title {
  text-align: center;
  color: green;
  font-weight: bold;
}

p {
  text-align: center;
  font-weight: bold;
  
}

.container {
  color: green;
}

h4 {
  font-weight: bold;
  font-style: italic;
}

#submit {
  text-align: center;
  font-weight: bold;
}