CMS Max Contact Page Layout Template

In order to show form, in place of # add number of a form you want to show (in most cases that's 1)
<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="https://maps.app.goo.gl/ifSHUFLvo8C9BZWS8" 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:info@evolutionmarketing.com">info@evolutionmarketing.com</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="https://www.facebook.com/EvolutionMarketing" 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="[  form id="#"  ]"><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>
your next platform and the growing journey
Build The Website Your Business Can Grow Into

Tell us what your customers need, how your team operates, and where the business is going. We will help map the right CMS Max foundation.
Start a Conversation View CMS Max Plans