<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<script type="text/javascript">
    function submitform() {

        // Submit the form using JS
        $("#formid").submit(function(e) {

            // Client-side validation for phone number, file type and size
            const filename = document.getElementById('fileToUpload').value;
            const selectedFile = document.getElementById('fileToUpload').files[0];
            const phone_number = document.getElementById('post_phone').value;


            var validationFailed = false;
            var file_error_msg = '';
            var repcaptha_error_msg = '';
            var response = grecaptcha.getResponse();

            if (response.length == 0) {
                //reCaptcha not verified
                repcaptha_error_msg += "<p>ReCaptcha is not checked.</p>"
                validationFailed = true;

                // Build the file error alert markup
                var alertString = '';

                alertString += '<div tabindex="-1" class="alert-error m-t-20">';
                alertString += repcaptha_error_msg;
                alertString += '</div>';

                // Spit out the alert string in the element
                document.getElementById("client-alert-recaptcha").innerHTML = alertString;

                // Prevent default server side form submit
                e.preventDefault();
                e.stopImmediatePropagation();
            }

            // Check if the file selector has a file
            if (filename.length > 0) {

                // Define allowed file types
                const fileTypes = [
                    "image/jpeg",
                    "image/jpg",
                    "image/png"
                ];

                const alt_text = document.getElementById('post_image_alt_text').value;

                // Define max file size
                const MaxFileSize = 1048576 // 1MB

                // Check if valid file type
                if (!validFileType(selectedFile)) {
                    file_error_msg += '<p>Not a valid file type.  Acceptable file types are JPEG or PNG.</p>';
                    validationFailed = true;
                }

                // Check file size
                if (selectedFile.size > MaxFileSize) {
                    file_error_msg += '<p>File size too big.  File size should be no more than 1MB.</p>';
                    validationFailed = true;
                }

                if (alt_text.length == 0) {
                    file_error_msg += '<p>Alternative text is required for uploaded images.</p>';
                    validationFailed = true;
                }

                // Check validation value
                if (validationFailed) {

                    if (file_error_msg.length > 0) {
                        // Build the file error alert markup
                        var alertString = '';

                        alertString += '<div tabindex="-1" class="alert-error m-t-20">';
                        alertString += file_error_msg;
                        alertString += '</div>';

                        // Spit out the alert string in the element
                        document.getElementById("client-alert-file").innerHTML = alertString;
                        // Focus on the error
                        document.getElementById("fileToUpload").focus();

                        // Prevent default server side form submit
                        e.preventDefault();
                        e.stopImmediatePropagation();
                    }

                    // Prevent default server side form submit
                    e.preventDefault();
                    e.stopImmediatePropagation();
                }

                // Helper functions
                // function isNumeric(str) {
                //     if (typeof str != "string") return false // we only process strings!  
                //     return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
                //         !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
                // }

                function validFileType(file) {
                    return fileTypes.includes(file.type);
                }

            }

            // If client-side validation didn't fail, load the spinner
            if (!validationFailed) {
                // Get the form
                var formElement = document.querySelector('#formid');
                // Do a final validation check
                if (formElement.reportValidity()) {
                    // Hide the post button                            
                    $("#post_submit").addClass("hidden");
                    // Show the spinner
                    jQuery('#spinner_container').html('Submitting...<i class="fa fa-cog fa-spin text-titan-orange" style="font-size:24px"></i>');
                }
            }

        });
    }
</script>

<form id="formid" name="class_note_form" action="" method="POST" enctype="multipart/form-data">

    <div class="row">
        <div class="col-12">
            <p>Before drafting a class note, we strongly recommend you review <a href="class-note-examples">Cal State Fullerton's Guidelines for Effective Class Notes</a>. After reviewing the guidelines, use the form below to create and submit your new Class Note.</p>
            <p class="text-size-sm text-medium-gray"><span class="text-brick-red">*</span> = required field.</p>
        </div>
    </div>

    <div class="row">
        <div class="col-4">
            <p>

                <label for="post_category">Your Life Event <span class="text-brick-red">*</span></label><select id="post_category" name="post_category" required><option value="">Select One</option><option value="21" >Awards and Recognition</option><option value="22" >Births and Adoptions</option><option value="23" >Books, Publications, Exhibits and Performances</option><option value="24" >Career</option><option value="25" >Education</option><option value="26" >General</option><option value="27" >Marriages, Commitments and Anniversaries</option><option value="28" >Travel</option><option value="29" >Volunteer</option></select>            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-4">
            <p>
                <label for="post_firstname">First Name <span class="text-brick-red">*</span></label>
                <input type="text" id="post_firstname" name="post_firstname" value="" aria-required="true" required />
            </p>
        </div>
        <div class="col-4">
            <p>
                <label for="post_lastname">Last Name <span class="text-brick-red">*</span></label>
                <input type="text" id="post_lastname" name="post_lastname" value="" aria-required="true" required />
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-4">
            <p>
                <label for="post_maiden">Maiden Name (If different)</label>
                <input type="text" id="post_maiden" name="post_maiden" value="" />
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-8">
            <p>
                <label for="post_content">Post Content (300 characters max)<span class="text-brick-red">*</span></label>
                <textarea id="post_content" name="post_content" rows="10" cols="70" aria-required="true" maxlength="300" required></textarea>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-4">
            <p>
                <label for="fileToUpload">Upload an Image (optional):</label>
                <input type="file" accept=".jpg, .png, .jpeg" name="fileToUpload" id="fileToUpload" />
                <input type="hidden" name="image_nonce" id="image_nonce" value="52019c3b96" />
                <span class="text-size-xs m-t-10 text-medium-gray">JPEG or PNG. 1MB limit. Submitters are responsible for securing photo permission. Please be advised that photos may be cropped, for ideal results please submit an 800 x 500 pixel image.</span>
            </p>
            <div id="client-alert-file">
            </div>
        </div>
        <div class="col-4">
            <p>
                <label for="post_image_alt_text">Image Alternative Text:</label>
                <input type="text" name="post_image_alt_text" id="post_image_alt_text" maxlength="100" placeholder="Describe the image" />
                <span class="text-size-xs m-t-10 text-medium-gray">Describe the purpose of the image. <a href="https://moz.com/learn/seo/alt-text">Learn more about Alt Text</a>.</span><br />

            </p>
        </div>
        <!--<div class="col-4 p-t-20 text-size-sm text-medium-gray">
            <p>

                <strong>Photos are encouraged</strong>.<br /> If possible, try to depict the individual in a setting that is consistent with their profession,
                i.e. a music professor on a stage, professor in a classroom, etc. Try to avoid “family-type” photos (holding a big fish,
                holding a baby, vacation photos, etc.) unless they are germane to the story. High-quality close-ups of individuals may also be submitted.
            </p>
        </div>-->
    </div>

    <div class="row">
        <div class="col-4">
            <p>
                <label for="post_college">College <span class="text-brick-red">*</span></label><select id="post_college" name="post_college" required><option value="">Select One</option><option value="38" >College of the Arts</option><option value="31" >College of Business and Economics</option><option value="32" >College of Communications</option><option value="33" >College of Education</option><option value="34" >College of Engineering and Computer Science</option><option value="35" >College of Health and Human Development</option><option value="36" >College of Humanities and Social Sciences</option><option value="37" >College of Natural Sciences and Mathematics</option><option value="39" >Extension and International Programs</option></select>            </p>
        </div>
        <div class="col-4">
            <p>
                <label for="post_gradyear">Graduation Year</label><select id="post_gradyear" name="post_gradyear"><option value="">Select One</option><option value="2026" >2026</option><option value="2025" >2025</option><option value="2024" >2024</option><option value="2023" >2023</option><option value="2022" >2022</option><option value="2021" >2021</option><option value="2020" >2020</option><option value="2019" >2019</option><option value="2018" >2018</option><option value="2017" >2017</option><option value="2016" >2016</option><option value="2015" >2015</option><option value="2014" >2014</option><option value="2013" >2013</option><option value="2012" >2012</option><option value="2011" >2011</option><option value="2010" >2010</option><option value="2009" >2009</option><option value="2008" >2008</option><option value="2007" >2007</option><option value="2006" >2006</option><option value="2005" >2005</option><option value="2004" >2004</option><option value="2003" >2003</option><option value="2002" >2002</option><option value="2001" >2001</option><option value="2000" >2000</option><option value="1999" >1999</option><option value="1998" >1998</option><option value="1997" >1997</option><option value="1996" >1996</option><option value="1995" >1995</option><option value="1994" >1994</option><option value="1993" >1993</option><option value="1992" >1992</option><option value="1991" >1991</option><option value="1990" >1990</option><option value="1989" >1989</option><option value="1988" >1988</option><option value="1987" >1987</option><option value="1986" >1986</option><option value="1985" >1985</option><option value="1984" >1984</option><option value="1983" >1983</option><option value="1982" >1982</option><option value="1981" >1981</option><option value="1980" >1980</option><option value="1979" >1979</option><option value="1978" >1978</option><option value="1977" >1977</option><option value="1976" >1976</option><option value="1975" >1975</option><option value="1974" >1974</option><option value="1973" >1973</option><option value="1972" >1972</option><option value="1971" >1971</option><option value="1970" >1970</option><option value="1969" >1969</option><option value="1968" >1968</option><option value="1967" >1967</option><option value="1966" >1966</option><option value="1965" >1965</option><option value="1964" >1964</option><option value="1963" >1963</option><option value="1962" >1962</option><option value="1961" >1961</option><option value="1960" >1960</option><option value="1959" >1959</option><option value="1958" >1958</option></select>            </p>
        </div>
    </div>

    <!-- CONTACT -->
    <div class="row">
        <div class="col-4">
            <p>
                <label for="post_email">Email <span class="text-brick-red">*</span></label>
                <input type="email" id="post_email" name="post_email" value="" placeholder="e.g. example@example.com" type="email" aria-required="true" required />

            </p>

        </div>
        <div class="col-4">
            <p>
                <label for="post_phone">Phone (Format: 123-456-7890)</label>
                <input type="tel" id="post_phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" name="post_phone" value="" placeholder="e.g. 123-456-7890" maxlength="12" />
            </p>
            <div id="client-alert-phone">
            </div>
        </div>
    </div>

    <!-- MAILING ADDRESS -->
    <div class="row">
        <div class="col-4">
            <p>
                <label for="post_mailing_address1">Address Line 1</label>
                <input type="text" id="post_mailing_address1" name="post_mailing_address1" value="" />
            </p>
        </div>
        <div class="col-4">
            <p>
                <label for="post_mailing_address2">Address Line 2</label>
                <input type="text" id="post_mailing_address2" name="post_mailing_address2" value="" />
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-4">
            <p>
                <label for="post_mailing_city">City</label>
                <input type="text" id="post_mailing_city" name="post_mailing_city" value="" />
            </p>
        </div>
        <div class="col-4">
            <p>
                <label for="post_mailing_state">State / Province</label>
                <input type="text" id="post_mailing_state" name="post_mailing_state" value="" />
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-4">
            <p>
                <label for="post_mailing_zip">Zip Code</label>
                <input type="text" id="post_mailing_zip" name="post_mailing_zip" value="" />
            </p>
        </div>
        <div class="col-4">
            <p>
                <label for="post_mailing_country">Country (If outside of the USA)</label>
                <input type="text" id="post_mailing_country" name="post_mailing_country" value="" />
            </p>
        </div>
    </div>

    <!-- CONSENT -->
    <div class="row">
        <div class="col-8">
            <div class="form-group">
                <p>
                    <label for="post_consent">
                        <span class="text-brick-red">*</span>
                        <input type="checkbox" id="post_consent" name="post_consent" aria-required="true" required />
                        I understand this information will be reviewed and published at the discretion
                        of the review committee. Submissions with language deemed abusive, inflammatory, or otherwise inappropriate will not be published.
                    </label>
                </p>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-8">
            <p>
                <label for="post_update">

                    
                    <input type="checkbox" id="post_update" name="post_update"  />
                    Please update my alumni record with the phone number, email and mailing address I have provided. The information provided
                    should be my primary contact information for CSUF updates.</label>
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-8">
            <div id="g-recaptcha" class="g-recaptcha" data-sitekey="6LdwhIUhAAAAAJv8WNikFPHy9FPayN3vzAMzK6Zf"></div>
            <div id="client-alert-recaptcha">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-6">
            <span>
                <label for="g-recaptcha-response" class="sr-only">Google Recaptcha Test</label>
                <!-- <button id="post_submit" name="submit" value="Submit Class Note" onclick="javascript:submitform();">Submit Class Note</button>  -->
                <p><input id="post_submit" type="submit" name="submit" onclick="javascript:submitform();" value="Submit Class Note" /></p>
                <!-- Spinner -->
                <span id="spinner_container">

                </span>
            </span>
            <!-- <p><input id="post_submit" type="submit" name="submit" value="Submit Class Note"/></p> -->
        </div>
    </div>




    <div class="row">
        <div class="col-8">
            <p class="form_message"></p>
        </div>
    </div>
    <!-- <input type="hidden" name="recaptcha_response" id="recaptchaResponse"> -->
</form>{"id":11,"date":"2022-08-08T21:10:54","date_gmt":"2022-08-08T21:10:54","guid":{"rendered":"https:\/\/alumniclassnotes.local\/?page_id=11"},"modified":"2025-06-11T15:07:48","modified_gmt":"2025-06-11T22:07:48","slug":"submit","status":"publish","type":"page","link":"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/","title":{"rendered":"Submit Your Class Note"},"content":{"rendered":"\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Submit Your Class Note - Alumni Class Notes<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Submit Your Class Note - Alumni Class Notes\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Alumni Class Notes\" \/>\r\n<meta property=\"article:modified_time\" content=\"2025-06-11T22:07:48+00:00\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/\",\"url\":\"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/\",\"name\":\"Submit Your Class Note - Alumni Class Notes\",\"isPartOf\":{\"@id\":\"https:\/\/alumni.fullerton.edu\/class-notes\/#website\"},\"datePublished\":\"2022-08-08T21:10:54+00:00\",\"dateModified\":\"2025-06-11T22:07:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/alumni.fullerton.edu\/class-notes\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Submit Your Class Note\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/alumni.fullerton.edu\/class-notes\/#website\",\"url\":\"https:\/\/alumni.fullerton.edu\/class-notes\/\",\"name\":\"Alumni Class Notes\",\"description\":\"Latest Notes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/alumni.fullerton.edu\/class-notes\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Submit Your Class Note - Alumni Class Notes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/","og_locale":"en_US","og_type":"article","og_title":"Submit Your Class Note - Alumni Class Notes","og_url":"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/","og_site_name":"Alumni Class Notes","article_modified_time":"2025-06-11T22:07:48+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/","url":"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/","name":"Submit Your Class Note - Alumni Class Notes","isPartOf":{"@id":"https:\/\/alumni.fullerton.edu\/class-notes\/#website"},"datePublished":"2022-08-08T21:10:54+00:00","dateModified":"2025-06-11T22:07:48+00:00","breadcrumb":{"@id":"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/alumni.fullerton.edu\/class-notes\/submit\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/alumni.fullerton.edu\/class-notes\/submit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/alumni.fullerton.edu\/class-notes\/"},{"@type":"ListItem","position":2,"name":"Submit Your Class Note"}]},{"@type":"WebSite","@id":"https:\/\/alumni.fullerton.edu\/class-notes\/#website","url":"https:\/\/alumni.fullerton.edu\/class-notes\/","name":"Alumni Class Notes","description":"Latest Notes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/alumni.fullerton.edu\/class-notes\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/alumni.fullerton.edu\/class-notes\/wp-json\/wp\/v2\/pages\/11"}],"collection":[{"href":"https:\/\/alumni.fullerton.edu\/class-notes\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alumni.fullerton.edu\/class-notes\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alumni.fullerton.edu\/class-notes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alumni.fullerton.edu\/class-notes\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":39,"href":"https:\/\/alumni.fullerton.edu\/class-notes\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":830,"href":"https:\/\/alumni.fullerton.edu\/class-notes\/wp-json\/wp\/v2\/pages\/11\/revisions\/830"}],"wp:attachment":[{"href":"https:\/\/alumni.fullerton.edu\/class-notes\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}