Use a structured contact section as a starter, then replace every placeholder and connect the correct CMS Max form.
This contact-page markup provides a responsive information and form layout for a CMS Max page or reusable section.
Prepare the template
- 01Create or choose the contact form. Record the current form ID and test its notifications and success behavior.
- 02Copy the starter markup below. Add it through the source or HTML editing surface used by the destination.
- 03Replace every placeholder. Update address, map URL, telephone URL and label, hours, email, social profile, colors, and the form ID.
- 04Remove unused channels. Do not publish empty telephone, email, map, or social links.
- 05Test the complete page. Verify links, form submission, keyboard order, mobile stacking, contrast, and location accuracy.
Starter markup
<section id="contact" class="contact py-2" data-bootstrap-contains="containers">
<div class="w-full mx-auto mb-4">
<div class="grid md:grid-cols-2 gap-4">
<div class="order-2 md:order-1">
<div class="card bg-base-100 shadow-lg border-t-4 border-b-4 border-[#88a48a] h-full">
<div class="card-body p-4 lg:p-8">
<div class="mb-2">
<div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.657 0 3-1.343 3-3S13.657 5 12 5 9 6.343 9 8s1.343 3 3 3z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.5 8c0 7.5-7.5 13.5-7.5 13.5S4.5 15.5 4.5 8a7.5 7.5 0 1115 0z"></path>
</svg>
<h3 class="text-3xl font-semibold">Mailing Address</h3>
</div>
<p class="text-base-content/70 text-sm pl-9"><a href="MAP_URL" target="_blank" rel="noopener">ADDRESS<br>CITY STATE ZIP</a></p>
</div>
<div class="mb-2">
<div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.12 3.368a1 1 0 01-.27 1.054l-1.6 1.6a11.042 11.042 0 005.516 5.516l1.6-1.6a1 1 0 011.054-.27l3.368 1.12a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C7.82 21 3 16.18 3 10V7a2 2 0 012-2z">
</path>
</svg>
<h3 class="text-3xl font-semibold">Call Us</h3>
</div>
<p class="text-base-content/70 text-sm pl-9"><strong>Main Office:</strong> <a href="tel:">000-000-0000</a></p>
</div>
<div class="mb-2">
<div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3 class="text-3xl font-semibold">Office Hours</h3>
</div>
<p class="text-base-content/70 text-sm pl-9"><strong>Monday–Friday:</strong> 9 AM – 5 PM<br><strong>Saturday–Sunday:</strong> Closed</p>
</div>
<div class="mb-2">
<div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
</path>
</svg>
<h3 class="text-3xl font-semibold">Email Us</h3>
</div>
<p class="text-base-content/70 text-sm pl-9"><strong>General Inquiries:</strong> <a href="mailto:EMAIL_ADDRESS">EMAIL_ADDRESS</a></p>
</div>
<div class="mb-2 pl-9">
<div class="flex items-center gap-3">
<h3 class="text-3xl font-semibold">Follow Us</h3>
</div>
<div class="flex items-center gap-6 mt-2"><a href="SOCIAL_PROFILE_URL" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-base-content/70 text-sm hover:text-primary"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-800" fill="currentColor" viewBox="0 0 24 24">
<path d="M22 12a10 10 0 10-11.5 9.9v-7h-2v-3h2v-2c0-2 1.2-3.1 3-3.1.9 0 1.8.1 1.8.1v2h-1c-1 0-1.3.6-1.3 1.2v1.8h2.3l-.4 3h-1.9v7A10 10 0 0022 12z">
</path>
</svg> Facebook </a></div>
</div>
</div>
</div>
</div>
<div class="order-1 md:order-2">
<div class="card bg-base-100 shadow-lg border-t-4 border-b-4 border-[#88a48a] h-full">
<div class="card-body p-4 lg:p-8">
<div class="form-wrapper-2">
<p><span class="shortcode"> <span class="cms-widget tempplaceholder" data-widget=""><span class="remove block"><b>Form</b><br>Name: Contact</span></span> </span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card bg-base-100 shadow-lg border-t-4 border-b-4 border-[#88a48a] h-full"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11670.627732292398!2d-88.0069324!3d42.909989!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8805106197170135%3A0x6b8344e1160a221f!2sFranklin%2C%20WI!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus" width="100%" height="450" style="border: 0;" allowfullscreen="allowfullscreen" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></div>
</iframe></div>
</section>