AI Reading

Quick summary of this article

This tutorial explains how to install, configure, and fully customize the contact form in Drupal 10 or 11. It covers adding extra fields, enabling file attachments, overriding form templates, and displaying contact information along with a Google Map. The guide uses a custom theme called "acesoftech" to achieve a modern, professional layout.

Enable the contact module and create multiple forms, such as "Sales Enquiry," each with its own recipient email and settings.
Add custom fields like phone or subject, and enable file uploads (PDF, JPG, PNG) with size limits through the "Manage fields" interface.
Override the default form template by creating a contact-message-form.html.twig file in your theme to add a two-column layout with contact details on the left and the form on the right.
Style the new layout using CSS (e.g., flexbox) and include a Google Maps iframe below the form for a complete contact section.
Optionally, add a custom redirect after form submission using a hook_form_alter in a custom module.

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.

Drupal 10 & 11 Contact Form Customization Tutorial | Step-by-Step with Attachments, Fields & Template