Build a Form in the Portal

cnharris1 · ‎02-28-2019

Good morning everyone,

I need some guidance on creating a form in the portal (where would I go to create the form?). Basically, I want customers to go to the portal and fill out a form with five or six questions and hit the submit button. Once they hit submit, their answers are automatically recorded to a table. Also, once they hit submit, I want to have a pop up that just displays that their form was successfully submitted. Would any of this be possible in the portal?

Thanks in advance!

cnharris

Prins Kumar Gup · ‎02-28-2019

Hi,

You can do this thing using a widget like I have created a form i.e. registration. To create a new widget like below code :

HTML PART:-

<div>
<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend class="text-center"><h3>
  Registration Form
  </h3></legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="txt_first_name">First Name</label>  
  <div class="col-md-4">
  <input id="txt_first_name" ng-model="c.data.name" type="text" placeholder="Prince" class="form-control input-md">
  <span class="help-block">Please enter your fist name</span>  
  </div>
</div>


<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="txt_email">Email Id</label>  
  <div class="col-md-4">
  <input id="txt_email" ng-model="c.data.email" type="text" placeholder="name@domain.com" class="form-control input-md" required="">
  <span class="help-block">Please enter your Email Id</span>  
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Phone Number</label>  
  <div class="col-md-4">
  <input id="textinput" ng-model="c.data.phone_number" type="text" placeholder="prinsguptapkg" class="form-control input-md" required="">
  <span class="help-block">Please enter valid mobile number</span>  
  </div>
</div>


<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="btn_submit"></label>
  <div class="col-md-4">
    <button id="btn_submit" name="btn_submit" class="btn btn-primary pull-right" ng-click="c.addRecord()">Submit</button>
  </div>
</div>

</fieldset>
</form>

</div>

CLIENT CONTROLLER PART:

function($scope) {
  /* widget controller */
  var c = this;
	c.addRecord=function()
	{
		c.data.name = $scope.c.data.name;
		c.data.email = $scope.c.data.email;
		c.data.phone_number = $scope.c.data.phone_number;
		//alert(c.data.name);
		c.data.action = "addRecord"
		c.server.update().then(function(response){
			c.data={};
			alert("Thank You for contacting us...!!!!!");
		})	
		
  }
}

SERVER SCRIPT PART:

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */
	if(input){
		if(input.action=='addRecord'){
			var gr=new GlideRecord(table_name);
			gr.initialize();
			gr.field_name=input.name;
			gr.field_name=input.email;
			gr.field_name=input.phone_number;
			gr.insert();
			gs.addInfoMessage('Record Inserted');
		}
	}



})();

After you create a widget, go to the page and create one page and put the widget on that.

I hope this is helpful to you. Feel free to ask if you have any query.

Thanks,

PKG

View solution in original post

Ct111 · ‎02-28-2019

Go through this link

https://docs.servicenow.com/bundle/london-servicenow-platform/page/build/service-portal/concept/sc-forms-in-sp.html

it will give you idea.

Mark my ANSWER as CORRECT and HELPFUL if it helepd

Alikutty A · ‎02-28-2019

Hello,

You can just create a new record producer for your table with the required fields and then display the popup message upon its submission.

The record producer can then be then accessed by a click from your portal.

Thanks!

cnharris1 · ‎02-28-2019

Thanks for Ali for replying! Is it possible to call a widget from the record producer once the user hits submit?

Alikutty A · ‎02-28-2019

Yes, You can call your record producer in an icon link widget. Create a new icon link widget on your page, select its Type as catalog item and then select your record producer name under the item and it can be accessed by users.