Form

Learn more about Modern Campus forms

Form markup is generated with /xsl/_shared/forms.xsl

<style>
    .ou-form-element {
        position: absolute;
        margin-left: -4000px;
    }
</style>
<div class="ou-form">
    <div id="status_test-form"></div>

    <form id="form_test-form" name="contact-form" method="post" class="" autocomplete="off" data-ou-form-error="Oops%21%20Something%20went%20wrong.%20Please%20try%20again.">
        <span class="hptest-form ou-form-element">
            <label for="hptest-form" class="hptest-form">If you see this don't fill out this input box.</label>
            <input type="text" id="hptest-form">
        </span>
        <div id="formgroup-suffix_test-form" class="form-group">
            <fieldset class="input-group" id="id_suffix_test-form">
                <legend class="control-label">Suffix</legend>
                <div class="radio"><label><input type="radio" name="suffix" title="Dr." value="Dr.">Dr.</label></div>
                <div class="radio"><label><input type="radio" name="suffix" title="Ms." value="Ms.">Ms.</label></div>
                <div class="radio"><label><input type="radio" name="suffix" title="Mr." value="Mr.">Mr.</label></div>
                <div class="radio"><label><input type="radio" name="suffix" title="Mx." value="Mx.">Mx.</label></div>
                <div class="radio"><label><input type="radio" name="suffix" title="Mrs." value="Mrs.">Mrs.</label></div>
            </fieldset>
        </div>
        <div id="formgroup-firstandlastname_test-form" class="form-group">
            <label class="control-label" for="id_firstandlastname_test-form">First and Last Name<span class="required">*</span></label>
            <input type="text" name="firstandlastname" id="id_firstandlastname_test-form" placeholder="" class="form-control" required="">
        </div>
        <div id="formgroup-emailaddress_test-form" class="form-group">
            <label class="control-label" for="id_emailaddress_test-form">Email Address<span class="required">*</span></label>
            <input type="email" name="emailaddress" id="id_emailaddress_test-form" placeholder="" class="form-control" required="">
        </div>
        <div id="formgroup-howdidyouhearaboutourprogram_test-form" class="form-group">
            <label class="control-label" for="id_howdidyouhearaboutourprogram_test-form">How did you hear about our program?<span class="required">*</span></label>
            <select class="form-control" name="howdidyouhearaboutourprogram[]" id="id_howdidyouhearaboutourprogram_test-form" required="" data-ddg-inputtype="unknown">
                <option value="" disabled="" selected="">
                    Please Select
                </option>
                <option value="Search Engine">Search Engine</option>
                <option value="TCU&amp;#39;s Website">TCU's Website</option>
                <option value="Social Media">Social Media</option>
                <option value="Word of Mouth">Word of Mouth</option>
                <option value="School Counselor/Adviser">School Counselor/Adviser</option>
                <option value="College Fair">College Fair</option>
            </select>
        </div>
        <div id="formgroup-date_test-form" class="form-group">
            <label class="control-label" for="id_date_test-form">Date<span class="required">*</span></label>
            <input type="text" name="date" id="id_date_test-form" class="form-control" required="">
            <script type="text/javascript">
                var OUC = OUC || {};
                OUC.dateTimePickers = OUC.dateTimePickers || [];
                OUC.dateTimePickers.push({
                    id: '#id_date_test-form',
                    format: 'date',
                    default: ''
                });
            </script>
        </div>
        <div id="formgroup-comments_test-form" class="form-group">
            <label class="control-label" for="id_comments_test-form">Comments</label>
            <textarea class="form-control" name="comments" id="id_comments_test-form" cols="200" style="width:auto;" rows="5" placeholder=""></textarea>
        </div>
        <div id="formgroup-fileupload_test-form" class="form-group">
            <label for="id_fileupload" class="control-label">File Upload</label><br>
            <input type="file" id="id_fileupload" name="fileupload" data-ou-error-message="Please%20use%20files%20that%20are%20less%20than%2025MB"><span class="help-block">You may send up to 25 MB in attachments.</span>
        </div>
        <button type="submit" id="btn_test-form" class="tcu-button _primary | button primary">Submit</button>
        <button type="reset" id="clr_test-form" class="tcu-button _secondary | button secondary">Clear</button>
    </form>
</div>