Here is the factory code for the Create Ticket page for the Customer Hub. If you would like to use this code on your page, you can hit the red “Revert” button on your page. If you do not see the “Revert” button, that means your code is up to date.

If you have customized your code and would like to compare it with the factory code below, we recommend using a text compare tool such as DiffNow.

<div class="row row-centered">
	<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 col-centered">
		<div class="panel panel-default accountContainer">
			<div class="panel-body">
				<form id="ticket_Form" name="ticketForm" ng-submit="submitNewTicket(ticket)" novalidate>
					<div class="row" ng-if="!settings.UserInfo.isAuthenticated">
						<div class="col-md-6 col-sm-6 col-xs-6">
							<div class="form-group" ng-class="{ 'has-error': ticketForm.AnonymousFullName.$touched && ticketForm.AnonymousFullName.$invalid }">
								<label>First and Last Name</label>
								<input type="text" class="form-control" ng-model="ticket.AnonymousContactModel.FullName" name="AnonymousFullName" pattern="\w+ \w+" required>
								<div class="help-block" ng-messages="ticketForm.AnonymousFullName.$error" ng-if="ticketForm.AnonymousFullName.$touched">
									<p ng-message="required">Name is required</p>
									<p ng-message="pattern">Enter valid first and last name</p>
								</div>
							</div>
						</div>
						<div class="col-md-6 col-sm-6 col-xs-6">
							<div class="form-group" ng-class="{ 'has-error': ticketForm.AnonymousEmail.$touched && ticketForm.AnonymousEmail.$invalid }">
								<label>Email address</label>
								<input type="text" class="form-control" ng-model="ticket.AnonymousContactModel.EmailAddress" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" name="AnonymousEmail" required>
								<div class="help-block" ng-messages="ticketForm.AnonymousEmail.$error" ng-if="ticketForm.AnonymousEmail.$touched">
									<p ng-message="required">Email address required</p>
									<p ng-message="pattern">Invalid email address</p>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="form-group" ng-class="{ 'has-error': ticketForm.title.$touched && ticketForm.title.$invalid }">
								<label>Title (Subject)</label>
								<input type="text" class="form-control" ng-model="ticket.TicketName" name="title" required>
								<div class="help-block" ng-messages="ticketForm.title.$error" ng-if="ticketForm.title.$touched">
									<p ng-message="required">Ticket title required</p>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-sm-6 col-xs-6" ng-show="settings.Features.EnableTicketGroupSelection">
							<div class="form-group" style="margin-top:10px;">
								<label>Group</label>
								<select name="Group" class="form-control" ng-model="ticket.GroupID" ng-options="Group.ID as Group.Value for Group in orgTicketInfo.DropdownCollection[1].DropdownItems">
									<option value="">Select a Group</option>
								</select>
							</div>
						</div>
						<div class="col-md-6 col-sm-6 col-xs-6">
							<div class="form-group" style="margin-top:10px;" ng-class="{ 'has-error': ticketForm.TicketType.$touched && ticketForm.TicketType.$invalid }" ng-if="orgTicketInfo.DropdownCollection[2].DropdownItems.length > 1">
								<label>Ticket Type</label>
								<select placeholder="Select a Type" name="TicketType" class="form-control" ng-model="ticket.TicketTypeID" ng-options="TicketType.ID as TicketType.Value for TicketType in orgTicketInfo.DropdownCollection[2].DropdownItems" ng-required="orgTicketInfo.DropdownCollection[2].Required">
									<option value="" disabled>Select a Type</option>
								</select>
								<div class="help-block" ng-messages="ticketForm.TicketType.$error" ng-if="ticketForm.TicketType.$touched">
									<p ng-message="required">Ticket type required</p>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 sol-sm-6 col-xs-6" ng-if="settings.Features.EnableTicketProductSelection">
							<div class="form-group" style="margin-top:10px;" ng-class="{ 'has-error': ticketForm.Product.$touched && ticketForm.Product.$invalid }">
								<label>Product</label>
								<select name="Product" class="form-control" ng-model="ticket.ProductID" ng-options="Product.ID as Product.Value for Product in orgTicketInfo.DropdownCollection[0].DropdownItems" ng-required="orgTicketInfo.DropdownCollection[0].Required">
									<option value="">Select a Product</option>
								</select>
								<div class="help-block" ng-messages="ticketForm.Product.$error" ng-if="ticketForm.Product.$touched">
									<p ng-message="required">Product required</p>
								</div>
							</div>
						</div>
						<div class="col-md-6 sol-sm-6 col-xs-6" ng-if="settings.Features.EnableTicketProductVersionSelection && (versions.length > 0)">
							<div class="form-group" style="margin-top:10px;" ng-class="{ 'has-error': ticketForm.Version.$touched && ticketForm.Version.$invalid }">
								<label>Version</label>
								<select name="Version" class="form-control" ng-model="ticket.VersionID" ng-options="Version.ProductVersionID as Version.VersionNumber for Version in versions | orderBy:'-VersionNumber'" ng-required="orgTicketInfo.DropdownCollection[3].Required">
									<option value="">Select a Version</option>
								</select>
								<div class="help-block" ng-messages="ticketForm.Version.$error" ng-if="ticketForm.Version.$touched">
									<p ng-message="required">Product version required</p>
								</div>
							</div>
						</div>
					</div>
                    <div class="row">
                        <div class="col-md-6 sol-sm-6 col-xs-6" ng-repeat="CustomField in ticket.customFields">
                            <div class="form-group" style="margin-top:10px;">
                                <label>{{CustomField.Name}}</label>
                                <span ng-if="CustomField.FieldType == 0">
                                    <input name="{{CustomField.Name}}" type="text" class="form-control" ng-if="CustomField.Mask == ''" ng-model="CustomField.Value" ng-required="CustomField.IsRequired" />
                                    <input name="{{CustomField.Name}}" type="text" class="form-control" ng-if="CustomField.Mask !== ''" mask='{{CustomField.Mask}}' ng-model="CustomField.Value" ng-required="CustomField.IsRequired" />
                                </span>
                                <span ng-if="CustomField.FieldType == 1">
                                    <input name="{{CustomField.Name}}" class="form-control" ng-model="CustomField.Value" date-picker="CustomField.Value" ng-required="CustomField.IsRequired" datetimepicker />
                                </span>
                                <span ng-if="CustomField.FieldType == 2">
                                    <div class="checkbox">
                                        <label>
                                            <input name="{{CustomField.Name}}" type="checkbox" ng-model="CustomField.Value">
                                        </label>
                                    </div>
                                </span>
                                <span ng-if="CustomField.FieldType == 3">
                                    <input name="{{CustomField.Name}}" type="number" class="form-control" ng-required="CustomField.IsRequired" ng-model="CustomField.Value" />
                                </span>
                                <span ng-if="CustomField.FieldType == 4">
                                    <select name="{{CustomField.Name}}"
                                            class="form-control"
                                            ng-change="getConditionalCustomFields(ticket, CustomField.CustomFieldID, CustomField.Value)"
                                            ng-init="CustomField.Value = CustomField.ListValues.split('|')[0]"
                                            ng-model="CustomField.Value"
                                            ng-required="CustomField.IsRequired">
                                        <option ng-repeat="Option in CustomField.ListValues.split('|')" ng-disabled="($first && CustomField.IsFirstIndexSelect)">{{Option}}</option>
                                    </select>
                                </span>
                                <span ng-if="CustomField.FieldType == 5">
                                    <input name="{{CustomField.Name}}" class="form-control" ng-model="CustomField.Value" ng-required="CustomField.IsRequired" datepicker />
                                </span>
                                <span ng-if="CustomField.FieldType == 6">
                                    <input name="{{CustomField.Name}}" class="form-control" ng-model="CustomField.Value" ng-required="CustomField.IsRequired" timepicker />
                                </span>
                            </div>
                        </div>
                        <span>{{customFields}}</span>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group" style="margin-top:10px;">
                                <label>Description</label>
                                <summernote height="140" name="description" ng-model="ticket.Description" config="options"></summernote>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div screen-recording></div>
                    </div>
                    <div class="row">
                        <div video-recording></div>
                    </div>
					<div class="row">
						<div class="col-sm-12">
							<div ngf-drop="addFiles($files)" ngf-select="addFiles($files)" class="drop-box"
								 ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true" ngf-max-size="25MB">
								<i class="fa fa-cloud-upload fa-4x" style="color:#3D6DA7"></i><br />
								<label>Drop files here or click to upload</label><br />
								<small>Images can be pasted into the description as well</small><br />
							</div>
							<ul class="list-group">
								<li class="list-group-item" ng-repeat="f in files">{{f.name}}<a ng-click="deleteFile($index)" class="pull-right"><i class="fa fa-trash"></i></a></li>
							</ul>
							<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
							{{errorMsg}}
						</div>
					</div>
					<div class="form-group" style="text-align:right;">
						<input type="submit" class="btn btn-primary" value="Submit Ticket" ng-disabled="ticketSubmitting">
					</div>
				</form>
			</div>
			<div class="panel-footer" ng-show="DeflectionResults.length > 0">
				<div class="list-group">
                    <h4>Suggested Solutions</h4>
					<a ng-click="ShowDeflection(Result)" class="list-group-item" ng-repeat="Result in DeflectionResults">{{Result.Ticket.Name}}</a>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="deflectionModal" tabindex="-1" role="dialog" aria-labelledby="deflectionModalLabel">
	<div class="modal-dialog modal-lg" " role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="deflectionModalLabel">{{ActiveDeflection.Ticket.Name}}</h4>
			</div>
			<div class="modal-body">
				<div ng-repeat="ArticleBody in ActiveDeflection.ArticleBodies">
					<div ng-bind-html="ArticleBody.Description"></div>
				</div>
			</div>
			<div class="modal-footer">
				<label>Did this resolve your issue?</label>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="LogAnswer(true)">Yes</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="LogAnswer(false)">No</button>
			</div>
		</div>
	</div>
</div>
<modal title="Ticket Submission Confirmation" visible="ticketCreatedSuccess">
	<div>
		Your ticket has been submitted succesfully and you will receive an email confirmation shortly.
	</div>
	<div style="text-align:right;">
		<button type="submit" class="btn btn-primary" ng-click="closeModal()">Ok</button>
	</div>
</modal>
<style>
	.drop-box {
		background: #F8F8F8;
		border: 5px dashed #DDD;
		text-align: center;
		margin: 10px 0px 10px 0px;
		border-radius: 5px;
		font-weight: 400;
		padding: 15px;
	}

	.dragover {
		border: 5px dashed #3d6da7;
	}
	md-chips.md-default-theme.md-chips.md-focused, md-chips .md-chips.md-focused {
		border-color: red;
		box-shadow: 0 2px lightgrey;
	}
</style> 

Need more help with this?
Don’t hesitate to contact us here.

Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.