Create a public page for users to submit CSM case without logging in.

Please note, check on ServiceNow licensing before utilizing this. Licensing does change, and it may not be valid with your current agreement.

Code

WIDGETS

Get a reCaptcha Key at: https://www.google.com/recaptcha/admin
If you want to use a user like Anonymous User as the caller if email doesn’t match, substitute your sys_id for that caller.
Widgets need to be public to work

ANONYMOUS CSM Case CREATION

Name: Anonymous CSM Case Creation
Public: true

Body HTML Template

<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="panel panel- b">
  <div class="panel-heading" >
    <h4 class="panel-title" style="cursor: default">
      <span ng-if="c.options.glyph">
        <fa name="" />
      </span></h4>
  </div>
  <div class="panel-body">
    <form ng-submit="c.checkCap()">
      <div class="vsplit col-sm-6">
        <fieldset class="form-group ng-scope ng-isolate-scope">
          <label><span title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': field.mandatory_filled()}" aria-hidden="false"></span>${First name}</label>
          <input ng-required="true" ng-model="data.first_name" class="form-control" type="text" maxlength="50" autocomplete="off" ng-readonly=data.setReadonly />
        </fieldset>
        <fieldset class="form-group ng-scope ng-isolate-scope">
          <label>${Middle name}</label>
          <input ng-model="data.u_middle_name" class="form-control" type="text" maxlength="50" autocomplete="off" ng-readonly=data.setReadonly />
        </fieldset>
        <fieldset class="form-group ng-scope ng-isolate-scope">
          <label><span title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': field.mandatory_filled()}" aria-hidden="false"></span>${Last name}</label>
          <input ng-required="true" ng-model="data.last_name" class="form-control" type="text" maxlength="50" autocomplete="off" ng-readonly=data.setReadonly />
        </fieldset>
      </div>
      <div class="vsplit col-sm-6">
        <fieldset class="form-group ng-scope ng-isolate-scope">
          <label><span title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': field.mandatory_filled()}" aria-hidden="false"></span>$</label>
          <input ng-required="true" ng-model="data.email" class="form-control" type="email" maxlength="200" autocomplete="off" ng-readonly=data.setReadonly />
        </fieldset>
        <fieldset class="form-group ng-scope ng-isolate-scope">
          <label><span  title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': field.mandatory_filled()}" aria-hidden="false"></span>${Phone Number}</label>
          <input ng-required="true" ng-model="data.u_phone" class="form-control" type="text" maxlength="50" autocomplete="off" ng-readonly=data.setReadonly />
        </fieldset>
      </div>
      <div class="col-sm-12">
        <fieldset class="form-group ng-scope ng-isolate-scope">
          <label><span title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': field.mandatory_filled()}" aria-hidden="false"></span>${Short description}</label>
          <input ng-required="true" ng-model="data.short_description" class="form-control" type="text" maxlength="160" autocomplete="off" ng-readonly=data.setReadonly />
        </fieldset>
        <fieldset class="form-group ng-scope ng-isolate-scope">
          <label><span title="Mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': field.mandatory_filled()}" aria-hidden="false"></span>$</label>
          <textarea ng-required="true" ng-model="data.description" class="form-control" type="text" maxlength="4000" autocomplete="off" ng-readonly=data.setReadonly></textarea>
        </fieldset>
        <div class="g-recaptcha" style="margin-bottom:12px;" data-sitekey=""></div>
        <input class="btn btn-primary" type="submit" value="Submit" />
      </div>
    </form>
  </div>
</div>

CSS

.fa-asterisk {
  padding-right: .25em;
}

Server Script

(function() {
	//Put your Recaptcha Site key here
        data.sitekey = '';
	if (input && checkPhoneNumber()) {
		data.formData = 'Created from Anonymous CSM Case Creation:'+'\n';
		data.formData += 'First name: '+ input.first_name+'\n';
		var fullName = input.first_name+" "+input.last_name;
		if (input.middle_name != '' && input.middle_name != undefined) {
			data.formData += 'Middle name: '+ input.middle_name+'\n';
			fullName = input.first_name+" "+input.middle_name+" "+input.last_name;
		}
		data.formData += 'Last name: '+ input.last_name+'\n';
		data.formData += 'Email: '+ input.email+'\n';
		data.formData += 'Phone: '+ input.u_phone+'\n';
		data.formData += 'Short description: '+ input.short_description+'\n';
		data.formData += 'Description: '+ input.description+'\n';
		data.table = "sn_customerservice_case";

		gr = new GlideRecord(data.table);
		//Match Contact
		var grUser = new GlideRecord('sys_user');
		grUser.addQuery('email', input.email);
		grUser.query();
		if(grUser.next()){
			gr.setValue('contact', grUser.sys_id);
			gr.setValue('opened_by', grUser.sys_id);
		}
		else {
			//Set to contact of your choice here
			gr.setValue('caller_id', '10fb0f3ddbc323007212722ebf96193e');
		}
		gr.setValue('short_description', input.short_description);
		gr.setValue('description', input.description);
		gr.setValue('contact_type', 'web');

		gr.work_notes = data.formData;
		var myRecord = gr.insert();

		data.setReadonly = "true";
	}

	function checkPhoneNumber() {
		var pattern = /^\s*(?:\+?(\d))?[-. (]*(\d)[-. )]*(\d)[-. ]*(\d)(?: *x(\d+))?\s*$/;
		if(!pattern.test(input.u_phone)){
			gs.addErrorMessage('Phone enter a valid Phone Number: (999) 999-9999, 999-999-9999, 999-999-9999 x9999');
			return false;
		}
		else {
			return true;
		}
	}
})();

Client Script

function() {
	var c = this;
	c.checkCap = function() {
		c.data.captchaSession = grecaptcha.getResponse();
		if (!c.data.captchaSession) {
			alert('Nice try, robot.');
		}
		grecaptcha.reset();
		if (c.data.captchaSession) {
			c.server.update();
			document.location = "/sp?id=anon_csm_case_ty";
		}
	}
}

Fields: Title, Bootstrap color

ANONYMOUS CSM CREATION - THANK YOU

Name: Anonymous CSM Case Creation - Thank You

Public: true

Body HTML Template

<div class="panel panel- b">
  <div class="panel-heading" >
    <h4 class="panel-title" style="cursor: default">
      <span ng-if="c.options.glyph">
        <fa name="" />
      </span></h4>
  </div>
  <div class="panel-body">
     <h1 style="text-align: center;margin:100px 0px 100px 0px;"></h1>
  </div>
</div>

Fields: Bootstrap color, Glyph, Title

Option Schema: [{"name":"thank_you_message","section":"other","label":"Thank You Message","type":"string"}]