Skip to main content
The Contact Form section provides professional contact forms with validation, spam protection, and integration with your customer service system.

​
Overview

The Contact Form section provides:
  • Professional Forms with validation and error handling
  • Multiple Field Types including text, email, phone, and textarea
  • Spam Protection with CAPTCHA and honeypot fields
  • Integration Support for customer service platforms
  • Customizable Design to match your brand
  • Responsive Design optimized for all devices

​
Section Settings

​
Contact Form

<section class="contact-form">
  <div class="container">
    <div class="contact-form__content">
      {% if section.settings.title != blank %}
        <h2 class="contact-form__title">{{ section.settings.title }}</h2>
      {% endif %}
      
      {% if section.settings.description != blank %}
        <div class="contact-form__description">
          {{ section.settings.description }}
        </div>
      {% endif %}
      
      {% form 'contact' %}
        <div class="contact-form__fields">
          <div class="contact-form__field">
            <label for="ContactFormName">Name</label>
            <input type="text" 
                   id="ContactFormName" 
                   name="contact[name]" 
                   required>
          </div>
          
          <div class="contact-form__field">
            <label for="ContactFormEmail">Email</label>
            <input type="email" 
                   id="ContactFormEmail" 
                   name="contact[email]" 
                   required>
          </div>
          
          <div class="contact-form__field">
            <label for="ContactFormMessage">Message</label>
            <textarea id="ContactFormMessage" 
                      name="contact[body]" 
                      rows="5" 
                      required></textarea>
          </div>
        </div>
        
        <button type="submit" class="contact-form__submit">
          Send Message
        </button>
      {% endform %}
    </div>
  </div>
</section>

​
CSS Styling

.contact-form {
  padding: 4rem 0;
  background: var(--color-surface);
}

.contact-form__content {
  max-width: 600px;
  margin: 0 auto;
}

.contact-form__title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}

.contact-form__description {
  text-align: center;
  font-size: 1.125rem;
  margin-bottom: 3rem;
  color: var(--color-text-secondary);
}

.contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-form__field label {
  font-weight: 600;
  color: var(--color-text-primary);
}

.contact-form__field input,
.contact-form__field textarea {
  padding: 1rem;
  border: 2px solid var(--color-border);
  border-radius: 0.25rem;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.contact-form__submit {
  width: 100%;
  padding: 1rem 2rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form__submit:hover {
  background: var(--color-primary-dark);
}