To use the contact form functionality with Edvik, make sure the required plugin is installed and configured properly.

📦 Required Plugin

Install the Contact Form plugin from the official Moodle plugin directory:
🔗 https://moodle.org/plugins/local_contact

✅ This plugin must be installed and active for the contact form to work.

📖 Documentation

For full configuration details and usage instructions, refer to the plugin’s documentation:
📚 https://github.com/michael-milette/moodle-local_contact

🧩 Theme Contact Form Code

Below is the contact form shortcode used in the Edvik theme. You can paste this into any HTML block or content area where you want the form to appear:

<!-- Contact Section Start -->
<div class="container mt-20 pb-70">
  <div class="row">
    <div class="col-lg-6 ps-xxl-3">
      <div
        class="contact-info-box position-relative index-1 bg_gradient round-10 ptb-100 mb-20">
        <img class="contact-shape position-absolute"
          src="https://edvik-moodle.hibootstrap.com//theme/edvik/pix/contact-shape.webp"
          alt="Shape">
        <div class="section-title"><span
            class="fs-13 font-medium d-block text_primary">CONTACT
            DETAILS</span>
          <h2 class="d-inline-block font-semibold position-relative mb-0">Get In
            Touch</h2>
          <p>Have a inquiry or some feedback for us? Reach out us by contacting
            below to connect our team.</p>
        </div>
        <div class="contact-info-wrap">
          <div class="contact-info-item d-flex flex-wrap align-items-center">
            <div
              class="contact-icon d-flex flex-column align-items-center justify-content-center rounded-circle bg-white">
              <img
                src="https://edvik-moodle.hibootstrap.com//theme/edvik/pix/icons/map.svg"
                alt="Map Icon"></div>
            <div class="contact-info">
              <h5 class="fs-20 font-medium ls-1">Our Address</h5>
              <p class="mb-0">1325 Blanshard St, Victoria, British Columbia, V8W
                3S2, Canada.</p>
            </div>
          </div>
          <div class="contact-info-item d-flex flex-wrap align-items-center">
            <div
              class="contact-icon d-flex flex-column align-items-center justify-content-center rounded-circle bg-white">
              <img
                src="https://edvik-moodle.hibootstrap.com//theme/edvik/pix/icons/phone-2.svg"
                alt="Phone Icon"></div>
            <div class="contact-info">
              <h5 class="fs-20 font-medium ls-1">Phone No</h5>
              <a class="d-block" href="tel:2505905193">(250) 590-5193</a> <a
                class="d-block" href="tel:2505905194">(250) 590-5194</a>
            </div>
          </div>
          <div class="contact-info-item d-flex flex-wrap align-items-center">
            <div
              class="contact-icon d-flex flex-column align-items-center justify-content-center rounded-circle bg-white">
              <img
                src="https://edvik-moodle.hibootstrap.com//theme/edvik/pix/icons/mail.svg"
                alt="Mail Icon"></div>
            <div class="contact-info">
              <h5 class="fs-20 font-medium ls-1">Email Address</h5>
              <a href="mailto:[email protected]">[email protected]</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Map area start -->
      <div class="comp-map round-10 mb-30"><iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8385385572983!2d144.95358331584498!3d-37.81725074201705!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4dd5a05d97%3A0x3e64f855a564844d!2s121%20King%20St%2C%20Melbourne%20VIC%203000%2C%20Australia!5e0!3m2!1sen!2sbd!4v1612419490850!5m2!1sen!2sbd">
        </iframe></div>
      <!-- Map area end -->
    </div>
    <div class="col-lg-6">
      <div class="contact-form-wrap round-10 mb-30">
        <div class="section-title"><span
            class="fs-13 font-medium d-block text_primary">MESSAGE US</span>
          <h2 class="d-inline-block font-semibold position-relative mb-0">Have
            Any Questions In Mind? Message Us</h2>
          <p>Your email address will not be published. Required fields are
            marked *</p>
        </div>
        <form id="contactForm" class="contact-form"
          action="../../local/contact/index.php" method="post">
          <div class="form-group position-relative mb-20"><input id="name"
              class="bg-transparent fs-16 round-6" name="name" required=""
              type="text"> <label
              class="fs-14 lh-1 text-paragraph position-absolute transition"
              for="name">Name*</label></div>
          <div class="form-group mb-20"><input id="email"
              class="bg-transparent fs-16 round-6" name="email" required=""
              type="email"> <label
              class="fs-14 lh-1 text-paragraph position-absolute transition"
              for="email">Email*</label></div>
          <div class="form-group mb-20"><input id="url"
              class="bg-transparent fs-16 round-6" name="url" required=""
              type="url"> <label
              class="fs-14 lh-1 text-paragraph position-absolute transition"
              for="url">Your website</label></div>
          <div class="form-group mb-20"><textarea id="messages"
              class="bg-transparent fs-16 round-6" cols="30" name="messages"
              rows="10"></textarea> <label
              class="fs-14 lh-1 text-paragraph position-absolute transition"
              for="url">Your message here</label></div>
          <input id="sesskey" name="sesskey" type="hidden" value="">
          <script>
            document.getElementById('sesskey').value = M.cfg.sesskey;
          </script>
          <button id="submit" class="btnn style-three font-medium w-100 d-block"
            name="submit" type="submit">Send Message Now</button>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- Contact Section End -->