Contact Form - Nexus Theme Documentation

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);
}