Missouri State University Pattern Library

Modern Campus Email 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 email form is submitted an email is sent to a designated email account with the form field values provided within the body of the email. Modern Campus CMS Live Delivery Platform (LDP) module provides the functionality behind our forms.

Build an email form in Modern Campus CMS.

<div class="ou-form">
    <div id="status_f73c809b-3fe6-4aad-b5f9-189ea693815d">
    </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="hpf73c809b-3fe6-4aad-b5f9-189ea693815d">Lorem ipsum dolor sit amet
            </label>
            <input type="text" id="hpf73c809b-3fe6-4aad-b5f9-189ea693815d">
        </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="f73c809b-3fe6-4aad-b5f9-189ea693815d">
        </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_f73c809b-3fe6-4aad-b5f9-189ea693815d">
  </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="hpf73c809b-3fe6-4aad-b5f9-189ea693815d">Lorem ipsum dolor sit amet
      </label>
      <input type="text" id="hpf73c809b-3fe6-4aad-b5f9-189ea693815d">
    </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="f73c809b-3fe6-4aad-b5f9-189ea693815d">
    </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
  }
}