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

Prins Kumar Gup · ‎03-01-2019

Okay, see the below code:

HTML Part:

<div>
<sn-record-picker field="c.obo" table="'sys_user'" display-fields="'name,email'" default-query="'active=true^emailISNOTEMPTY^nameISNOTEMPTY'" value-field="'sys_id'" search-fields="'name'" 
display-field="'name'" page-size="20">
 </sn-record-picker>
</div>

Client Controller:

function($scope) {
  /* widget controller */
  var c = this;
	 c.obo = {
               displayValue: $scope.data.obo_gv,
               value: $scope.data.obo,
               name: 'obo'
	 }
}

Server Script:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
    data.obo = gs.getUserID();
    data.obo_gv = gs.getUserDisplayName();
})();

Output:

Thanks,

PKG

cnharris1 · ‎03-01-2019

Thanks PKG! That works! You have really helped me out! Thanks again!

Prins Kumar Gup · ‎03-01-2019

Your welcome cnharris.!!

Prasad Rao Kall · ‎12-28-2020

I have selected all 3 columns name, email, phone number as mandatory but this Form is inserting the records even if 1 or 2 fields empty. Please advise.