Missouri State University Pattern Library

Modern Campus Database Form

The form is a commonly used asset Snippet icon in Modern Campus CMS. There are two options for collecting form submissions: email or database.

When an Modern Campus CMS database form is submitted an email notification is sent to a designated email account. Form submissions are stored within a database accessible through the Modern Campus CMS system. Modern Campus CMS Live Delivery Platform (LDP) module provides the functionality behind our forms.

Build a database form in Modern Campus CMS.

  • Handle: @mc-database-form
  • Preview:
  • Filesystem Path: src/components/06-forms/modern-campus/01-form options/mc-database/mc-database.hbs
  • References (1): @mc-captcha 
<div class="ou-form">
    <div id="status_267a3dde-5a09-41da-a2ae-788ff7f5f0c0">
    </div>
    <form method="post" autocomplete="off" data-ou-form-error="Your%20form%20has%20failed%20to%20be%20submitted.%20Please%20contact%20Web%20Strategy%20and%20Development.">
        <div class="ou-ldp-form-element">
            <label for="hp267a3dde-5a09-41da-a2ae-788ff7f5f0c0">Lorem ipsum dolor sit amet
            </label>
            <input type="text" id="hp267a3dde-5a09-41da-a2ae-788ff7f5f0c0">
        </div>

        <p>
        <div class="ou-form">
            <div class="g-recaptcha" data-sitekey="6LeAgmQbAAAAADJ8_F2cAFmSeBdgJUdOE1rYJ-y_" style="outline: none;">
                <div style="width: 304px; height: 78px; outline: none;">
                    <div style="outline: none;">
                        <iframe title="reCAPTCHA" width="304" height="78" role="presentation" name="a-d1ssc213x3m1" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6LeAgmQbAAAAADJ8_F2cAFmSeBdgJUdOE1rYJ-y_&amp;co=aHR0cHM6Ly93d3cubWlzc291cmlzdGF0ZS5lZHU6NDQz&amp;hl=en&amp;v=79clEdOi5xQbrrpL2L8kGmK3&amp;size=normal&amp;anchor-ms=40000&amp;execute-ms=30000&amp;cb=t659wourhb82" style="outline: none;">
                        </iframe>
                    </div>
                    <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none; outline: none;"></textarea>
                </div>
                <iframe style="display: none; outline: none;"></iframe>
            </div>
            <label aria-hidden="true" style="display: none; margin-left: -1000px; outline: none;"> Hidden Item
                <input type="hidden" name="form_grc" value="1" style="outline: none;">
            </label>

            <br style="outline: none;">

            <label aria-hidden="true" style="display: none; margin-left: -1000px; outline: none;">Form UUID
                <input type="hidden" name="form_uuid" value="f5f62165-a61f-4d7a-a226-e3862db81e80" style="outline: none;">
            </label>

            <label aria-hidden="true" style="display: none; margin-left: -1000px; outline: none;">Site Name
                <input type="hidden" name="site_name" value="www" style="outline: none;">
            </label>

        </div>
        </p>
        <label aria-hidden="true" style="display:none; margin-left:-1000px;"> Hidden Item
            <input type="hidden" name="form_grc" value="1">
        </label>
        <br>
        <label aria-hidden="true" style="display:none; margin-left:-1000px;">Form UUID
            <input type="hidden" name="form_uuid" value="267a3dde-5a09-41da-a2ae-788ff7f5f0c0">
        </label>
        <label aria-hidden="true" style="display:none; margin-left:-1000px;">Site Name
            <input type="hidden" name="site_name" value="www">
        </label>
        <button type="submit" class="btn btn-primary ldp-hide-on-submit">Submit
        </button>&nbsp;
        <button type="reset" class="btn btn-primary ldp-hide-on-submit">Clear
        </button>
    </form>
</div>

<script src="https://www.missouristate.edu/_resources/ldp/forms/ldp-forms.ldp-forms.js"></script>
 
<div class="ou-form">
  <div id="status_267a3dde-5a09-41da-a2ae-788ff7f5f0c0">
  </div>
  <form method="post" autocomplete="off" data-ou-form-error="Your%20form%20has%20failed%20to%20be%20submitted.%20Please%20contact%20Web%20Strategy%20and%20Development.">
    <div class="ou-ldp-form-element">
      <label for="hp267a3dde-5a09-41da-a2ae-788ff7f5f0c0">Lorem ipsum dolor sit amet
      </label>
      <input type="text" id="hp267a3dde-5a09-41da-a2ae-788ff7f5f0c0">
    </div>
      {{{yield}}}
    <p>
      {{> @mc-captcha}}
    </p>
    <label aria-hidden="true" style="display:none; margin-left:-1000px;"> Hidden Item
        <input type="hidden" name="form_grc" value="1">
    </label>
      <br>
    <label aria-hidden="true" style="display:none; margin-left:-1000px;">Form UUID
        <input type="hidden" name="form_uuid" value="267a3dde-5a09-41da-a2ae-788ff7f5f0c0">
    </label>
    <label aria-hidden="true" style="display:none; margin-left:-1000px;">Site Name
        <input type="hidden" name="site_name" value="www">
    </label>
    <button type="submit" class="btn btn-primary ldp-hide-on-submit">Submit
    </button>&nbsp;
    <button type="reset" class="btn btn-primary ldp-hide-on-submit">Clear
    </button>
  </form>
</div>

<script src="https://www.missouristate.edu/_resources/ldp/forms/ldp-forms.ldp-forms.js"></script>
 
{
  "pageId": 100,
  "action": null,
  "attributes": null,
  "captcha": true,
  "formType": {
    "database": null,
    "email": null
  },
  "thankYou": {
    "value": null
  },
  "dbTableName": {
    "value": null
  },
  "notifyOnSubmission": {
    "value": null
  },
  "ignoredFields": {
    "value": null
  },
  "sendTo": {
    "value": null
  },
  "sendFrom": {
    "value": null
  },
  "replyTo": {
    "value": null
  },
  "subject": {
    "value": null
  },
  "wpPageId": {
    "value": null
  }
}