Contact Form design css bootstrap

HTML (Contact Form)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Contact Form with Yellow Background</title>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto|Courgette|Pacifico:400,700" rel="stylesheet">
  
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery and Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <!-- External CSS -->
  <link rel="stylesheet" href="styles.css">

</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 m-auto">
        <div class="contact-form">
          <h1>Contact Form Design</h1>
          <form action="" method="post">
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="inputName">Name</label>
                  <input type="text" class="form-control" id="Name" name="name" placeholder="Enter Full Name" required>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="inputEmail">Email</label>
                  <input type="email" class="form-control" id="Email" name="email" placeholder="Enter Email" required>
                </div>
              </div>
            </div>            
            <div class="form-group">
              <label for="inputSubject">Subject</label>
              <input type="text" class="form-control" id="Subject" name="subject" placeholder="Enter Subject" required>
            </div>
            <div class="form-group">
              <label for="inputMessage">Message</label>
              <textarea class="form-control" id="Message" name="message" rows="5" placeholder="Enter Message..." required></textarea>
            </div>
            <div class="text-center">
              <button type="submit" name="submit" class="btn btn-primary">
                <i class="fa fa-paper-plane"></i> Send
              </button>
            </div>            
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS (styles.css)

body {
    color: #000;
    font-family: "Roboto", sans-serif;
    background-image: url("image/background.jpg");
    background-repeat: no-repeat;
    background-size: cover; /* Ensure background image covers the screen */
    background-position: center;
}

.contact-form {
    padding: 50px;
    margin: 30px auto;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.contact-form h1 {
    font-size: 42px;
    font-family: 'Pacifico', sans-serif;
    margin: 0 0 50px;
    text-align: center;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form .form-control, .contact-form .btn {
    min-height: 38px;
    border-radius: 2px;
}

.contact-form .form-control {
    border-color: #e2c705;
}

.contact-form .form-control:focus {
    border-color: #d8b012;
    box-shadow: 0 0 8px #dcae10;
}

.contact-form .btn-primary {
    min-width: 250px;
    color: #fcda2e;
    background: #000;
    margin-top: 20px;
    border: none;
    border-radius: 5px;
}

.contact-form .btn-primary:hover {
    color: #fff; 
    background: #333; /* Darker background on hover */
}

.contact-form .btn-primary i {
    margin-right: 5px;
}

.contact-form label {
    opacity: 0.9;
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px; /* Set minimum height for better UX */
}

.bs-example {
    margin: 20px;
}

Changes and Improvements Made:

Background Image (background.jpg): Added background-size: cover and background-position: center to make sure the background image covers the screen properly.
Contact Form Container: Added a slightly transparent background (rgba(255, 255, 255, 0.9)) and box-shadow to make the form stand out and give a polished look.
Hover Effects on Button: Changed button hover effects to provide a clearer visual cue (background: #333).
Text Area: Set a minimum height for the textarea to enhance usability, especially for larger messages.
Font and Button Styling: Slight improvements in button styling and font sizes.

This setup should result in a functional and visually appealing contact form with a yellow and black-themed design, along with a clear layout and enhanced usability. Let me know if you'd like any further adjustments or additional features! 😊

Souy Soeng

Contact Form design css bootstrap

HTML (Contact Form)

CSS (styles.css)

Changes and Improvements Made:

Post a Comment

Souy Soeng