Modern Contact Page Template 2026 Blogger & WordPress

<div class="cp-wrapper">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
    .cp-wrapper {
      font-family: 'Inter', Helvetica, Arial, sans-serif;
      color: #000;
      background: #fff;
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
      box-sizing: border-box;
      line-height: 1.5;
    }
    .cp-wrapper * {
      box-sizing: border-box;
    }
    /* Header */
    .cp-title {
      font-size: clamp(3rem, 10vw, 9rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      margin: 0 0 60px 0;
      line-height: 1;
    }
    /* Main Content Layout */
    .cp-body {
      display: flex;
      flex-wrap: wrap;
      gap: 60px;
      justify-content: space-between;
      margin-bottom: 100px;
    }
    /* Left Info Column */
    .cp-info-left {
      flex: 1;
      min-width: 250px;
      font-size: 15px;
    }
    .cp-info-block {
      margin-bottom: 40px;
    }
    /* Right Form Column */
    .cp-form-right {
      flex: 2;
      min-width: 300px;
    }
   
    .cp-form-group {
      margin-bottom: 25px;
    }
   
    .cp-form-row {
      display: flex;
      gap: 30px;
      margin-top: 15px;
    }
   
    .cp-form-row .cp-form-group {
      flex: 1;
      margin-bottom: 0;
    }
    .cp-main-label {
      display: block;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 15px;
    }
    .cp-sub-label {
      font-size: 15px;
      color: #333;
      margin-bottom: 5px;
      display: block;
    }
    .cp-wrapper input[type="text"],
    .cp-wrapper input[type="email"],
    .cp-wrapper select,
    .cp-wrapper textarea {
      width: 100%;
      border: none;
      border-bottom: 1px solid #ccc;
      padding: 8px 0;
      font-size: 14px;
      outline: none;
      background: transparent;
      font-family: inherit;
      color: #000;
      transition: border-color 0.3s;
    }
    .cp-wrapper input[type="text"]:focus,
    .cp-wrapper input[type="email"]:focus,
    .cp-wrapper select:focus,
    .cp-wrapper textarea:focus {
      border-bottom: 1px solid #000;
    }
    .cp-wrapper select {
      appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right center;
      background-size: 14px;
    }
    .cp-wrapper textarea {
      resize: vertical;
      min-height: 100px;
    }
    /* Checkbox */
    .cp-checkbox-group {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      margin: 30px 0;
      color: #333;
    }
   
    .cp-checkbox-group input[type="checkbox"] {
      appearance: none;
      width: 16px;
      height: 16px;
      border: 1px solid #999;
      border-radius: 50%;
      outline: none;
      cursor: pointer;
      position: relative;
    }
   
    .cp-checkbox-group input[type="checkbox"]:checked::before {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 8px;
      height: 8px;
      background-color: #000;
      border-radius: 50%;
    }
    /* Submit Button */
    .cp-submit-btn {
      background: #111;
      color: #fff;
      padding: 10px 30px;
      border-radius: 30px;
      border: none;
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      font-family: inherit;
      margin-top: 10px;
      transition: opacity 0.3s;
    }
    .cp-submit-btn:hover {
      opacity: 0.8;
    }
    /* Footer */
    .cp-footer {
      border-top: 1px solid #eaeaea;
      padding-top: 50px;
    }
   
    .cp-footer-big {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 50px;
    }
   
    .cp-footer-big a {
      font-size: clamp(1.5rem, 4vw, 1.5rem);
      font-weight: 500;
      color: #000;
      text-decoration: none;
      letter-spacing: -0.02em;
    }
    .cp-footer-details {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      font-size: 12px;
      margin-bottom: 40px;
      gap: 20px;
    }
    .cp-footer-details a {
      color: #000;
      text-decoration: underline;
    }
    .cp-footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      font-size: 11px;
      color: #666;
      border-top: 1px solid #eaeaea;
      padding-top: 25px;
      gap: 20px;
    }
    .cp-social-links {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    .cp-social-links a {
      color: #000;
      text-decoration: none;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
   
    .cp-social-links svg {
      width: 18px;
      height: 18px;
    }
   
    .cp-privacy {
      margin-left: 10px;
      font-weight: 500;
    }
    /* Responsive Adjustments */
    @media (max-width: 768px) {
      .cp-body { flex-direction: column; gap: 40px; }
      .cp-form-row { flex-direction: column; gap: 15px; }
      .cp-footer-big { flex-direction: column; gap: 10px; }
      .cp-footer-details { flex-direction: column; gap: 30px; }
    }
  </style>
  <h1 class="cp-title">Contact me</h1>
  <div class="cp-body">
    <div class="cp-info-left">
      <div class="cp-info-block">
        Manhattan, New York<br />
        2023
      </div>
      <div class="cp-info-block">
        Office hours<br />
        Monday - Friday<br />
        11 AM - 2 PM
      </div>
    </div>
    <div class="cp-form-right">
      <form action="https://formspree.io/f/xdalgnqr" method="POST">
        <!--Formspree ready - no _captcha needed-->
        
        <div class="cp-form-group">
          <span class="cp-main-label">Name (required)</span>
          <div class="cp-form-row">
            <div class="cp-form-group">
              <span class="cp-sub-label">First Name</span>
              <input name="First Name" required="" type="text" />
            </div>
            <div class="cp-form-group">
              <span class="cp-sub-label">Last Name</span>
              <input name="Last Name" required="" type="text" />
            </div>
          </div>
        </div>
        <div class="cp-form-group" style="margin-top: 25px;">
          <span class="cp-sub-label">Service</span>
          <select name="Service">
            <option value=""></option>
            <option value="Web Design">Web Design</option>
            <option value="SEO">SEO / Optimization</option>
            <option value="Other">Other</option>
          </select>
        </div>
        <div class="cp-form-group" style="margin-top: 25px;">
          <span class="cp-sub-label">Email (required)</span>
          <input name="email" required="" type="email" />
        </div>
        <div class="cp-checkbox-group">
          <input id="news" name="Newsletter Signup" type="checkbox" value="Yes" />
          <label>Sign up for news and updates</label>
        </div>
        <div class="cp-form-group">
          <span class="cp-sub-label">Project description</span>
          <textarea name="Project Description" rows="5"></textarea>
        </div>
        <button class="cp-submit-btn" type="submit">Submit</button>
      </form>
    </div>
  </div>
  <div class="cp-footer">
    <div class="cp-footer-big">
      <a href="mailto:contact@studio.com">contact@MH4K.com</a>
      <a href="tel:+48762888999">(+48) 762 888 999</a>
    </div>
    <div class="cp-footer-details">
      <div>Manhattan, New York<br />2023</div>
      <div>Office hours<br />Monday - Friday 11 AM - 2 PM</div>
      <div>Say hello <a href="#">Work with us</a></div>
    </div>
    <div class="cp-footer-bottom">
      <div>© 2026 Template by MH4K Studio | Photos from pexels.com</div>
      <div class="cp-social-links">
        <a aria-label="Behance" href="#">
          <svg fill="currentColor" viewbox="0 0 24 24"><path d="M22 7h-7v-2h7v2zm1.726 10c-.442 1.297-2.029 3-5.101 3-3.074 0-5.564-1.729-5.564-5.675 0-3.91 2.325-5.92 5.466-5.92 3.082 0 4.964 1.782 5.375 4.426.078.506.109 1.188.095 2.14h-8.027c.13 3.211 3.483 3.312 4.588 2.029h3.168zm-7.686-4h4.965c-.105-1.547-1.136-2.219-2.477-2.219-1.466 0-2.277.768-2.488 2.219zm-9.574 6.988h-6.466v-14.967h6.953c5.476.081 5.58 5.444 2.72 6.906 3.461 1.26 3.577 8.061-3.207 8.061zm-3.466-8.988h3.584c2.508 0 2.906-3-.312-3h-3.272v3zm3.391 3h-3.391v3.016h3.341c3.055 0 2.868-3.016.05-3.016z"></path></svg>
        </a>
        <a aria-label="Instagram" href="#">
          <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24"><rect height="20" rx="5" ry="5" width="20" x="2" y="2"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg>
        </a>
        <a aria-label="Facebook" href="#">
          <svg fill="currentColor" viewbox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg>
        </a>
        <a class="cp-privacy" href="/p/privacy-policy.html">Privacy Policy</a>
      </div>
    </div>
  </div>
</div>