# Contact forms

**URL:** <https://community.hubspot.com/t/contact-forms/119255>\
**Category:** APIs & Integrations\
**Tags:** starter\
**Created:** [October 26, 2024, 4:10pm UTC](https://community.hubspot.com/t/contact-forms/119255 "2024-10-26T16:10:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shiney](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@Shiney](https://community.hubspot.com/u/Shiney)\
**Post date:** [October 26, 2024, 4:10pm UTC](https://community.hubspot.com/t/contact-forms/119255/1 "2024-10-26T16:10:30Z")

</div>

Why in the earth do your basic contact forms have conflicting issues with external templates such as DIVI who are widely known.  
Why do you restrict HTML access to stupidly expensive plans knowing that we need access to it to fix the conflicting issues.  
Why does the form not work out the box?  
Please explain or provide a solution  
Contact forms Allign to the LEFT of a module in divi, regardless of what you do on divis builder.  
i cant even be botherd to get into it, fix your contact form so it works everywhere.  
Stop restricting HTML access to stupid high paid plans.

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [October 28, 2024, 1:50pm UTC](https://community.hubspot.com/t/contact-forms/119255/2 "2024-10-28T13:50:23Z")

</div>

Hi @Shiney

You see this error because HubSpot’s Drag-and-Drop (DND) sections don’t allow extending other sections with **extends** and **block** like page templates do. Each section template must be self-contained with only one **dnd\_section** root tag, which is why you’re getting this issue.  
To keep your code DRY, a good workaround is to create custom modules that handle reusable settings instead of nesting section templates. Here’s how:  
**Step 1: Create a Custom Module:**  
Set up a custom module with fields for background color, padding, and any other settings you want to reuse. This module will act as your base layout.  
In the module editor:

1. Add fields for background color, padding, etc., with default values (e.g., **#111317** for color, default padding).  
2. In the HTML + HUBL editor for the module, create the structure as follows:

```lia-code-sample
html

<div class="custom-section" style="background-color: {{ module.background_color }}; padding: {{ module.padding_top }} {{ module.padding_right }} {{ module.padding_bottom }} {{ module.padding_left }};">
<div class="inner-container">
 {{ widget_block('content') }}
</div>
</div>

```

Then, add CSS for max width and other styles as needed.

**Step 2:** Insert the Module in Each Section Template  
Now you can add this module to each section template without duplicating the layout code.  
Example section template:

```lia-code-sample
html

<!--
 templateType: section
 label: My custom section
 isAvailableForNewContent: true
-->
{% dnd_section 
 background_color="#ffffff",
 max_width=1200,
 full_width=false
%}
 {% dnd_column %}
 {% dnd_row %}
 {% widget 
 "custom_section_module" 
 path="path/to/custom_section_module"
 background_color="desired background color here"
 %}
 {% end_dnd_row %}
 {% end_dnd_column %}
{% end_dnd_section %}

```

**Step 3: Add Content Blocks in the Module**  
Use **widget\_block(‘content’)** in your module’s structure to add blocks that can be filled in the content editor when the module is added to a section.  
Customizing Properties  
If you need to adjust **background\_color** or padding for each section, you can set these values when adding the module, as shown above. Each instance can use different settings without duplicating the main structure.  
This approach keeps your section code DRY while giving you the flexibility to adjust each section as needed.

I hope this will help you out. Please mark it as **Solution Accepted and upvote** to help another Community member.  
Thanks!