Contact Form Neo-Brutalism

contact-form-neo-brutalism.markdown

Contact Form Neo-Brutalism

A Pen by Marie Hekel on CodePen.

License.

index.html

<div class="contact-section">
  <h3 class="contact-section-heading">Contact Form</h3>
  <form action="#">
    <label for="contact-first-name" class="contact-label">First Name</label>
    <input type="text" id="contact-first-name" name="firstname" placeholder="Your name.." class="contact-input">

    <label for="contact-last-name" class="contact-label">Last Name</label>
    <input type="text" id="contact-last-name" name="lastname" placeholder="Your last name.." class="contact-input">

    <label for="contact-country" class="contact-label">Country</label>
    <select id="contact-country" name="country" class="contact-select">
      <option value="">-- Select Country --</option>
      <option value="australia">Australia</option>
      <option value="brazil">Brazil</option>
      <option value="canada">Canada</option>
      <option value="china">China</option>
      <option value="france">France</option>
      <option value="germany">Germany</option>
      <option value="india">India</option>
      <option value="italy">Italy</option>
      <option value="japan">Japan</option>
      <option value="mexico">Mexico</option>
      <option value="netherlands">Netherlands</option>
      <option value="south-africa">South Africa</option>
      <option value="uk">United Kingdom</option>
      <option value="usa">United States</option>
    </select>

    <label for="contact-subject" class="contact-label">Subject</label>
    <textarea id="contact-subject" name="subject" placeholder="Write something.." class="contact-textarea" style="height:200px"></textarea>

    <input type="submit" value="Submit" class="contact-submit-btn">
  </form>
</div>

<a target="_blank" href="https://www.rustcodeweb.com/" 
     style="position: fixed; bottom: 1rem; right: 1rem; background: #FFD166; color: #073B4C; text-decoration: none; padding: 0.5rem 1rem; border: 3px solid #073B4C; box-shadow: 3px 3px 0 #073B4C; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; font-size: 0.875rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1200; border-radius: 2px; display: flex; align-items: center; gap: 0.5rem;"
     onmouseover="this.style.background='#F8F9FA'; this.style.transform='translate(-1px, -1px)'; this.style.boxShadow='4px 4px 0 #073B4C';"
     onmouseout="this.style.background='#FFD166'; this.style.transform='translate(0, 0)'; this.style.boxShadow='3px 3px 0 #073B4C';"
     onmousedown="this.style.transform='translate(0, 0)'; this.style.boxShadow='2px 2px 0 #073B4C';"
     onmouseup="this.style.transform='translate(-1px, -1px)'; this.style.boxShadow='4px 4px 0 #073B4C';"
     aria-label="Visit rustcodeweb.com">
     <i class="fas fa-link" style="font-size: 1rem;"></i>
     rustcodeweb.com
  </a>

style.css

* {
  box-sizing: border-box;
}

body {
  font-family: 'Courier New', Courier, monospace;
  background-color: #FFF49E;
  margin: 0;
  color: #111;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px;
}

.contact-section {
  background-color: #fdfdfd;
  border: 4px solid #000;
  padding: 30px;
  box-shadow: 10px 10px 0 #000;
  max-width: 600px;
  width: 100%;
  margin: 40px;
}

.contact-section-heading {
  font-size: 28px;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 4px solid #000;
  display: inline-block;
  margin-bottom: 30px;
}

.contact-label {
  font-weight: bold;
  display: block;
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 16px;
}

.contact-input,
.contact-select,
.contact-textarea {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border: 3px solid #000;
  background-color: #d0f0fd;
  font-family: 'Courier New', Courier, monospace;
  margin-bottom: 20px;
  resize: vertical;
  box-shadow: 5px 5px 0 #000;
  transition: border 0.2s, box-shadow 0.2s;
}

.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
  outline: none;
  border: none;
  box-shadow: 7px 7px 0 #222;
  background-color: #fff5cc;
}

.contact-submit-btn {
  background-color: #ffadad;
  color: #000;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  border: 4px solid #000;
  cursor: pointer;
  box-shadow: 6px 6px 0 #000;
  transition: all 0.2s ease-in-out;
}

.contact-submit-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #000;
  background-color: #fef46d;
}