Drupal 10/11 Contact Form Customization Tutorial

In this complete tutorial, you’ll learn how to install, configure, and fully customize the Contact Form in Drupal 10/11. We’ll use a custom theme called acesoftech, and show how to add extra fields, enable file attachments, override templates, and display contact information and Google Maps in a modern layout.

1. Install the Contact Module

Run this command in your terminal (or enable via admin UI):

drush en contact -y

2. Enable and Configure Default Form

• Go to Structure → Contact forms (/admin/structure/contact)
• Click “Edit” next to Website feedback
• Set email recipient, auto-reply, and confirmation message

3. Create Multiple Contact Forms

To add another form:

• Click “Add contact form”
• Give it a unique label (e.g., “Sales Enquiry”)
• Set recipient email and configure settings
• Visit the form at /contact/{your-form-id}

4. Add Extra Fields (Phone, Subject, etc.)

Steps:

• Go to Structure → Contact forms
• Click “Manage fields” next to the form
• Click “Add field” and choose field type (e.g. Text, Select List)
• Configure label, placeholder, and required status

5. Enable File Upload (Attachments)

• Go to “Manage fields” for your form
• Click “Add field” → Select “File” or “Image”
• Set allowed file types (e.g., pdf doc jpg png)
• Set upload limits (size, number of files)

6. Override Contact Form Template

Create or edit this Twig template in your theme:

themes/custom/acesoftech/templates/contact/contact-message-form.html.twig

Example Template Layout:

{% extends "classy/contact/contact-message-form.html.twig" %}

{% block content %}
<div class="contact-wrapper">

  <div class="left-side">
    <h3>Contact Information</h3>
    <ul>
      <li><strong>Mobile:</strong> +91-1234567890</li>
      <li><strong>Email:</strong> contact@yourdomain.com</li>
      <li><strong>Address:</strong> Kolkata, India</li>
      <li><strong>Website:</strong> www.yoursite.com</li>
    </ul>
  </div>

  <div class="right-side">
    {{ form }}
  </div>

</div>

<div class="map-section">
  <iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

{% endblock %}

7. Add CSS for Layout (Inside style.css of acesoftech)

.contact-wrapper {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.contact-wrapper .left-side {
  flex: 1 1 40%;
}
.contact-wrapper .right-side {
  flex: 1 1 60%;
}
.map-section iframe {
  width: 100%;
  height: 300px;
  border-radius: 8px;
}

8. Enable Theme Debugging (To Confirm Template Override)

# sites/default/services.yml
parameters:
  twig.config:
    debug: true
    auto_reload: true
    cache: false

Then run:

drush cr

9. Optional: Redirect After Submission

// mymodule.module
function mymodule_form_contact_message_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  $form['#submit'][] = 'mymodule_custom_redirect';
}

function mymodule_custom_redirect($form, \Drupal\Core\Form\FormStateInterface $form_state) {
  $form_state->setRedirect('custom.thank_you_page');
}

10. Final Layout Preview

This layout will now show:

• Left: Contact info (phone, email, address)
• Right: Fully functional Drupal contact form
• Below: Google Map iframe

Conclusion

By following this step-by-step Drupal 10/11 tutorial, you’ve created a modern, multi-functional contact form using your custom theme acesoftech. With added fields, file uploads, template customization, and Google Maps integration — your site now has a professional-grade contact section.