added custom end page

app/models/form.server.model.js

@@ -133,6 +133,24 @@ var FormSchema = new Schema({
         },
 		buttons:[ButtonSchema]
 	},
+	endPage: {
+		showEnd:{
+			type: Boolean,
+			default: false
+		},
+		title:{
+			type: String,
+			default: 'Thank you for filling out the form'
+		},
+		paragraph:{
+			type: String
+		},
+		buttonText:{
+			type: String,
+			default: 'Go back to Form'
+		},
+		buttons:[ButtonSchema]
+	},
 
 	hideFooter: {
 		type: Boolean,

public/form_modules/forms/base/views/directiveViews/form/submit-form.client.view.html

@@ -137,20 +137,59 @@ ng-style="{'color':button.color}">
     </section>
 </div>
 
-<!-- End Page View -->
-<div ng-if="myform.submitted && !loading" class="form-submitted"
-    ng-style="{'color':myform.design.colors.buttonTextColor}"
-    style="padding-top: 5vh;">
 
-    <div class="field row text-center">
-        <div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3 text-center">{{ 'FORM_SUCCESS' | translate }}</div>
-    </div>
-    <div class="row form-actions">
-        <p class="text-center">
-            <button ng-click="reloadForm()" class="btn" type="button"
-                ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
-                <span style="font-size: 1.6em;"> {{ 'BACK_TO_FORM' | translate }}</span>
-            </button>
-        </p>
-    </div>
+<!-- Default End Page View -->
+<div ng-if="myform.submitted && !loading && !myform.endPage.showEnd" class="form-submitted"
+	 ng-style="{'color':myform.design.colors.buttonTextColor}"
+	 style="padding-top: 5vh;">
+
+	<div class="field row text-center">
+		<div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3 text-center">{{ 'FORM_SUCCESS' | translate }}</div>
+	</div>
+	<div class="row form-actions">
+		<p class="text-center">
+			<button ng-click="reloadForm()" class="btn" type="button"
+					ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
+				<span style="font-size: 1.6em;"> {{ 'BACK_TO_FORM' | translate }}</span>
+			</button>
+		</p>
+	</div>
+</div>
+
+<!-- Custom End Page View -->
+<div ng-if="myform.submitted && !loading && myform.endPage.showEnd" class="form-submitted"
+	 ng-style="{'color':myform.design.colors.buttonTextColor}"
+	 style="padding-top: 5vh;">
+	<div class="row">
+		<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
+			<h1 style="font-weight: 400; nont-size: 25px;">
+				{{myform.endPage.title}}
+			</h1>
+		</div>
+		<div class="col-xs-10 col-xs-offset-1 text-center" style="overflow-wrap: break-word;">
+			<p style="color: grey; font-weight: 100; font-size: 16px;">
+				{{myform.endPage.paragraph}}
+			</p>
+		</div>
+	</div>
+
+	<div class="row form-actions text-center" style="padding: 5px 25px 5px 25px;">
+		<button ng-click="reloadForm()" class="btn" type="button"
+				ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
+			<span style="font-size: 1.6em;">
+			{{myform.endPage.buttonText}}
+			</span>
+		</button>
+	</div>
+	<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
+		<p ng-repeat="button in myform.endPage.buttons" class="text-center" style="display:inline;">
+			<button class="btn" style="background-color:rgb(156, 226, 235)" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
+				<a href="{{button.url}}"
+				   style="font-size: 1.6em; text-decoration: none;"
+				   ng-style="{'color':button.color}">
+					{{button.text}}
+				</a>
+			</button>
+		</p>
+	</div>
 </div>

public/modules/forms/admin/config/i18n/english.js

@@ -14,6 +14,8 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
 		DISPLAY_FOOTER: 'Display Form Footer?',
 		SAVE_CHANGES: 'Save Changes',
 		CANCEL: 'Cancel',
+		DISPLAY_START_PAGE: 'Display Start Page?',
+		DISPLAY_END_PAGE: 'Display Custom End Page?',
 
 		//List Forms View
 		CREATE_A_NEW_FORM: 'Create a new form',
@@ -27,6 +29,8 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
 		OFF: 'OFF',
 		REQUIRED_FIELD: 'Required',
 		LOGIC_JUMP: 'Logic Jump',
+		SHOW_BUTTONS: 'Additional Buttons',
+		SAVE_START_PAGE: 'Save',
 
 		//Admin Form View
 		ARE_YOU_SURE: 'Are you ABSOLUTELY sure?',
@@ -51,18 +55,21 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
 		ADD_FIELD_LG: 'Click to Add New Field',
 		ADD_FIELD_MD: 'Add New Field',
 		ADD_FIELD_SM: 'Add Field',
-		PREVIEW_START_PAGE: 'Preview Welcome Screen',
-		EDIT_START_PAGE: 'Edit Welcome Screen',
-		WELCOME_SCREEN: 'Welcome Screen',
-		INTRO_TITLE: 'Intro Title',
-		INTRO_PARAGRAPH: 'Intro Paragraph',
-		INTRO_BTN: 'Intro Button',
+		EDIT_START_PAGE: 'Edit Start Page',
+		EDIT_END_PAGE: 'Edit End Page',
+		WELCOME_SCREEN: 'Start Page',
+		END_SCREEN: 'End Page',
+		INTRO_TITLE: 'Title',
+		INTRO_PARAGRAPH: 'Paragraph',
+		INTRO_BTN: 'Start Button',
+		TITLE: 'Title',
+		PARAGRAPH: 'Paragraph',
+		BTN_TEXT: 'Go Back Button',
 		BUTTONS: 'Buttons',
 		BUTTON_TEXT: 'Text',
 		BUTTON_LINK: 'Link',
 		ADD_BUTTON: 'Add Button',
 		PREVIEW_FIELD: 'Preview Question',
-		EDIT_FIELD: 'Edit Question',
 		QUESTION_TITLE: 'Title',
 		QUESTION_DESCRIPTION: 'Description',
 		OPTIONS: 'Options',

public/modules/forms/admin/css/edit-form.css

@@ -1,30 +1,30 @@
 /*
-** Edit Field Modal
+** Edit Modal
 */
-.edit-field-modal-window .modal-dialog {
+.edit-modal-window .modal-dialog {
 	width: 90%;
 }
 
-.edit-field-modal-window .modal-body {
+.edit-modal-window .modal-body {
 	padding: 0;
 }
 
-.edit-field-modal-window .edit-field-panel {
+.edit-modal-window .edit-panel {
 	background-color: #F1F1F1;
 	padding: 0 35px 0 35px;
 }
 
-.edit-field-modal-window .preview-field-panel {
+.edit-modal-window .preview-field-panel {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 }
 
-.edit-field-modal-window .preview-field-panel form {
+.edit-modal-window .preview-field-panel form {
 	padding-right: 20px;
 }
 
-.edit-field-modal-window .preview-field {
+.edit-modal-window .preview-field {
 	resize: vertical;
 }
 

public/modules/forms/admin/directives/edit-form.client.directive.js

@@ -38,23 +38,11 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
 					$scope.editFieldModal = $uibModal.open({
 						animation: true,
 						templateUrl: 'editFieldModal.html',
-						windowClass: 'edit-field-modal-window',
+						windowClass: 'edit-modal-window',
 						controller:  function($uibModalInstance, $scope) {
 							$scope.field = curr_field;
 							$scope.showLogicJump = false;
 
-
-							//Populate AddField with all available form field types
-							$scope.addField = {};
-							$scope.addField.types = FormFields.types;
-
-							$scope.addField.types.forEach(function(type){
-								type.lastAddedID = 1;
-								return type;
-							});
-
-							$scope.lastButtonID = 0;
-
 							// decides whether field options block will be shown (true for dropdown and radio fields)
 							$scope.showAddOptions = function (field){
 								if(field.fieldType === 'dropdown' || field.fieldType === 'checkbox' || field.fieldType === 'radio'){
@@ -156,15 +144,115 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
 				};
 
 				/*
-				**  Setup Angular-Input-Star Shape Dropdown
+				 ** EditStartPageModal Functions
 				 */
+				$scope.openEditStartPageModal = function(){
+					$scope.editStartPageModal = $uibModal.open({
+						animation: true,
+						templateUrl: 'editStartPageModal.html',
+						windowClass: 'edit-modal-window',
+						controller:  function($uibModalInstance, $scope) {
 
+							/*
+							 **  startPage Button Methods
+							 */
 
+							$scope.showButtons = false;
+							$scope.lastButtonID = 0;
 
+							// add new Button to the startPage
+							$scope.addButton = function(){
+
+								var newButton = {};
+								newButton.bgColor = '#ddd';
+								newButton.color = '#ffffff';
+								newButton.text = 'Button';
+								newButton._id = Math.floor(100000*Math.random());
+
+								$scope.myform.startPage.buttons.push(newButton);
+							};
+
+							// delete particular Button from startPage
+							$scope.deleteButton = function(button){
+								var currID;
+								for(var i = 0; i < $scope.myform.startPage.buttons.length; i++){
+
+									currID = $scope.myform.startPage.buttons[i]._id;
+
+									if(currID === button._id){
+										$scope.myform.startPage.buttons.splice(i, 1);
+										break;
+									}
+								}
+							};
+
+							$scope.saveStartPage = function(){
+								$scope.$parent.update(false, $scope.$parent.myform, false, true, function(){
+									$uibModalInstance.close();
+								});
+							};
+							$scope.cancel = function(){
+								$uibModalInstance.close();
+							};
+						}
+					});
+				};
+
+				/*
+				 ** EditStartPageModal Functions
+				 */
+				$scope.openEditEndPageModal = function(){
+					$scope.editEndPageModal = $uibModal.open({
+						animation: true,
+						templateUrl: 'editEndPageModal.html',
+						windowClass: 'edit-modal-window',
+						controller:  function($uibModalInstance, $scope) {
+
+							/*
+							 **  startPage Button Methods
+							 */
+
+							$scope.showButtons = false;
+							$scope.lastButtonID = 0;
+
+							// add new Button to the startPage
+							$scope.addButton = function(){
+
+								var newButton = {};
+								newButton.bgColor = '#ddd';
+								newButton.color = '#ffffff';
+								newButton.text = 'Button';
+								newButton._id = Math.floor(100000*Math.random());
+
+								$scope.myform.endPage.buttons.push(newButton);
+							};
+
+							// delete particular Button from startPage
+							$scope.deleteButton = function(button){
+								var currID;
+								for(var i = 0; i < $scope.myform.endPage.buttons.length; i++){
+
+									currID = $scope.myform.endPage.buttons[i]._id;
+
+									if(currID === button._id){
+										$scope.myform.endPage.buttons.splice(i, 1);
+										break;
+									}
+								}
+							};
+
+							$scope.saveEndPage = function(){
+								$scope.$parent.update(false, $scope.$parent.myform, false, true, function(){
+									$uibModalInstance.close();
+								});
+							};
+							$scope.cancel = function(){
+								$uibModalInstance.close();
+							};
+						}
+					});
+				};
 
-                // Accordion settings
-                $scope.accordion = {};
-                $scope.accordion.oneAtATime = true;
 
                 //Populate local scope with rootScope methods/variables
                 $scope.update = $rootScope.update;
@@ -249,6 +337,7 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
                 // Delete particular field on button click
                 $scope.deleteField = function (field_index) {
                     $scope.myform.form_fields.splice(field_index, 1);
+					$scope.update(false, $scope.myform, false, true, null);
                 };
 
                 $scope.duplicateField = function (field_index){
@@ -258,38 +347,17 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
 
                     //Insert field at selected index
                     $scope.myform.form_fields.splice(field_index+1, 0, currField);
+					$scope.update(false, $scope.myform, false, true, null);
                 };
 
+				//Populate AddField with all available form field types
+				$scope.addField = {};
+				$scope.addField.types = FormFields.types;
 
-                /*
-                **  startPage Button Methods
-                */
-
-                // add new Button to the startPage
-                $scope.addButton = function(){
-
-                    var newButton = {};
-                    newButton.bgColor = '#ddd';
-                    newButton.color = '#ffffff';
-                    newButton.text = 'Button';
-                    newButton._id = Math.floor(100000*Math.random());
-
-                    $scope.myform.startPage.buttons.push(newButton);
-                };
-
-                // delete particular Button from startPage
-                $scope.deleteButton = function(button){
-                    var currID;
-                    for(var i = 0; i < $scope.myform.startPage.buttons.length; i++){
-
-                        currID = $scope.myform.startPage.buttons[i]._id;
-
-                        if(currID === button._id){
-                            $scope.myform.startPage.buttons.splice(i, 1);
-                            break;
-                        }
-                    }
-                };
+				$scope.addField.types.forEach(function(type){
+					type.lastAddedID = 1;
+					return type;
+				});
 
 			}
         };

public/modules/forms/admin/views/directiveViews/form/configure-form.client.view.html

@@ -1,10 +1,4 @@
 <div class="config-form container">
-	<!--<div class="row">
-		<div class="col-sm-offset-2 col-sm-10">
-			<h2 class="hidden-sm hidden-xs">{{ 'ADVANCED_SETTINGS' | translate }}</h2>
-			<h3 class="hidden-lg hidden-md">{{ 'ADVANCED_SETTINGS' | translate }}</h3>
-		</div>
-	</div>-->
 	<!-- Settings -->
 	<div class="row">
         <div class="col-sm-offset-2 col-sm-4">
@@ -95,7 +89,7 @@
 
 			<div class="row field">
 				<div class="field-title col-sm-12">
-					<h5>Display Start Page?</h5>
+					<h5>{{ 'DISPLAY_START_PAGE' | translate }}</h5>
 				</div>
 
 				<div class="field-input col-sm-12">
@@ -112,6 +106,26 @@
 
 				</div>
 			</div>
+
+			<div class="row field">
+				<div class="field-title col-sm-12">
+					<h5>{{ 'DISPLAY_END_PAGE' | translate }}</h5>
+				</div>
+
+				<div class="field-input col-sm-12">
+
+					<label style="display: inline-block;">
+						<input type="radio" data-ng-value="true" ng-model="myform.endPage.showEnd"  ng-required="true" style="background-color:#33CC00;"/>
+						&nbsp;<span>{{ 'YES' | translate }}</span>
+					</label>
+
+					<label style="display: inline-block;">
+						<input type="radio" data-ng-value="false" ng-model="myform.endPage.showEnd"  ng-required="true" />
+						&nbsp;<span>{{ 'NO' | translate }}</span>
+					</label>
+
+				</div>
+			</div>
 		</div>
     </div>
     <div class="row">

public/modules/forms/admin/views/directiveViews/form/edit-form.client.view.html

@@ -1,10 +1,305 @@
 <form class="row container" name="editForm" ><!--auto-save-form auto-save-watch="myform" auto-save-callback="update">-->
 
+	<!-- Edit EndPage Modal Dialog Template -->
+	<script type="text/ng-template" id="editEndPageModal.html" class="edit-endpage-modal">
+		<div class="modal-body">
+			<div class="row">
+				<div class="edit-panel col-md-6 col-xs-12 col-sm-12 container">
+					<div class="row modal-header">
+						<h2 class="modal-title hidden-md hidden-lg">{{ 'EDIT_END_PAGE' | translate }}</h2>
+						<h3 class="modal-title hidden-xs hidden-sm">{{ 'EDIT_END_PAGE' | translate }}</h3>
+					</div>
+
+					<div class="row question">
+						<div class="col-md-4 col-sm-12">{{ 'TITLE' | translate }}:</div>
+						<div class="col-md-8 col-sm-12">
+							<input class="form-control" type="text"
+								   ng-model="myform.endPage.title" required>
+						</div>
+					</div>
+
+					<div class="row"><br></div>
+
+					<div class="row question">
+						<div class="col-md-4 col-sm-12">{{ 'PARAGRAPH' | translate }}:</div>
+						<div class="col-md-8 col-sm-12">
+                                    <textarea class="form-control" type="text"
+											  ng-model="myform.endPage.paragraph"></textarea>
+						</div>
+					</div>
+
+					<div class="row"><br></div>
+
+					<div class="row question">
+						<div class="col-md-4 col-sm-12">{{ 'BTN_TEXT' | translate }}:</div>
+						<div class="col-md-8 col-sm-12">
+							<input class="form-control" type="text"
+								   ng-model="myform.endPage.buttonText" required>
+						</div>
+					</div>
+
+					<div class="row"><br></div>
+
+					<div class="row">
+						<div class="col-md-4 col-xs-12 field-input">{{ 'SHOW_BUTTONS' | translate }}</div>
+						<div class="col-md-8 col-xs-12 field-input">
+							<label class="switch-light switch-holo" onclick="">
+								<input type="checkbox" ng-model="showButtons">
+								<span>
+									<span> {{ 'OFF' | translate }}</span>
+									<span> {{ 'ON' | translate }}</span>
+									<a></a>
+								</span>
+							</label>
+						</div>
+					</div>
+
+					<div class="row options buttons" ng-if="showButtons">
+						<div class="col-md-3 col-xs-12">Buttons:</div>
+						<div class="col-md-9 col-xs-12">
+							<div ng-repeat="button in myform.endPage.buttons track by button._id" class="row" style="padding-bottom:1em;">
+
+								<div class="col-xs-5">
+									<span>{{ 'BUTTON_TEXT' | translate }}</span>
+									<input type="text"
+										   name="{{button.text}}_buttonText_startPage"
+										   ng-model="button.text"
+										   value="{{button.text}}"
+										   placeholder="Button Text">
+								</div>
+
+
+								<div class="col-xs-5">
+									<span>{{ 'BUTTON_LINK' | translate }}</span>
+									<input type="text"
+										   name="{{button.url}}_url_startPage"
+										   ng-model="button.url"
+										   value="{{button.url}}"
+										   placeholder="http://aeouaou.com/aoeuoa">
+								</div>
+
+								<div class="col-xs-2">
+									<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteButton(button)">
+										<i class="fa fa-trash-o"></i>
+									</a>
+								</div>
+							</div>
+
+							<div class="row"><br></div>
+							<div class="row">
+								<button class="btn btn-primary btn-small col-md-offset-6 col-md-6 col-sm-4 col-sm-offset-8 col-xs-4 col-xs-offset-8" type="button" ng-click="addButton()">
+									<i class="icon-plus icon-white"></i> {{ 'ADD_BUTTON' | translate }}
+								</button>
+							</div>
+						</div>
+					</div>
+
+					<div class="modal-footer row">
+						<button type="submit" ng-click="saveEndPage()" class="btn btn-signup btn-rounded">
+							{{ 'SAVE_START_PAGE' | translate }}
+						</button>
+
+						<button ng-click="cancel()" class="btn btn-secondary btn-rounded">
+							{{ 'CANCEL' | translate }}
+						</button>
+					</div>
+				</div>
+
+				<div class="preview-field-panel col-md-6 hidden-sm hidden-xs container">
+					<form class="public-form">
+
+						<div class="row">
+							<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
+								<h1 style="font-weight: 400; font-size: 25px;">
+									{{myform.endPage.title}}
+								</h1>
+							</div>
+							<div class="col-xs-10 col-xs-offset-1 text-center" style="overflow-wrap: break-word;">
+								<p style="color: grey; font-weight: 100; font-size: 16px;">
+									{{myform.endPage.paragraph}}
+								</p>
+							</div>
+						</div>
+
+						<div class="row form-actions text-center" style="padding: 5px 25px 5px 25px;">
+							<button ng-click="reloadForm()" class="btn" type="button"
+									ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
+			<span style="font-size: 1.6em;">
+			{{myform.endPage.buttonText}}
+			</span>
+							</button>
+						</div>
+						<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
+							<p ng-repeat="button in myform.endPage.buttons" class="text-center" style="display:inline;">
+								<button class="btn" style="background-color:rgb(156, 226, 235)" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
+									<a href="{{button.url}}"
+									   style="font-size: 1.6em; text-decoration: none;"
+									   ng-style="{'color':button.color}">
+										{{button.text}}
+									</a>
+								</button>
+							</p>
+						</div>
+
+					</form>
+				</div>
+			</div>
+
+		</div>
+
+
+	</script>
+
+	<!-- Edit StartPage Modal Dialog Template -->
+	<script type="text/ng-template" id="editStartPageModal.html" class="edit-startpage-modal">
+		<div class="modal-body">
+			<div class="row">
+				<div class="edit-panel col-md-6 col-xs-12 col-sm-12 container">
+					<div class="row modal-header">
+						<h2 class="modal-title hidden-md hidden-lg">{{ 'EDIT_START_PAGE' | translate }}</h2>
+						<h3 class="modal-title hidden-xs hidden-sm">{{ 'EDIT_START_PAGE' | translate }}</h3>
+					</div>
+
+					<div class="row question">
+						<div class="col-md-4 col-sm-12">{{ 'INTRO_TITLE' | translate }}:</div>
+						<div class="col-md-8 col-sm-12">
+							<input class="form-control" type="text"
+								   ng-model="myform.startPage.introTitle"
+								   name="introTitleStartPage" required>
+						</div>
+					</div>
+
+					<div class="row"><br></div>
+
+					<div class="row question">
+						<div class="col-md-4 col-sm-12">{{ 'INTRO_PARAGRAPH' | translate }}:</div>
+						<div class="col-md-8 col-sm-12">
+                                    <textarea class="form-control" type="text"
+											  ng-model="myform.startPage.introParagraph"
+											  name="introParagraphStartPage"></textarea>
+						</div>
+					</div>
+
+					<div class="row"><br></div>
+
+					<div class="row question">
+						<div class="col-md-4 col-sm-12">{{ 'INTRO_BTN' | translate }}:</div>
+						<div class="col-md-8 col-sm-12">
+							<input class="form-control" type="text"
+								   ng-model="myform.startPage.introButtonText"
+								   name="introButtonText" required>
+						</div>
+					</div>
+
+					<div class="row"><br></div>
+
+					<div class="row">
+						<div class="col-md-4 col-xs-12 field-input">{{ 'SHOW_BUTTONS' | translate }}</div>
+						<div class="col-md-8 col-xs-12 field-input">
+							<label class="switch-light switch-holo" onclick="">
+								<input type="checkbox" ng-model="showButtons">
+								<span>
+									<span> {{ 'OFF' | translate }}</span>
+									<span> {{ 'ON' | translate }}</span>
+									<a></a>
+								</span>
+							</label>
+						</div>
+					</div>
+
+					<div class="row options buttons" ng-if="showButtons">
+						<div class="col-md-3 col-xs-12">Buttons:</div>
+						<div class="col-md-9 col-xs-12">
+							<div ng-repeat="button in myform.startPage.buttons track by button._id" class="row" style="padding-bottom:1em;">
+
+								<div class="col-xs-5">
+									<span>{{ 'BUTTON_TEXT' | translate }}</span>
+									<input type="text"
+										   name="{{button.text}}_buttonText_startPage"
+										   ng-model="button.text"
+										   value="{{button.text}}"
+										   placeholder="Button Text">
+								</div>
+
+
+								<div class="col-xs-5">
+									<span>{{ 'BUTTON_LINK' | translate }}</span>
+									<input type="text"
+										   name="{{button.url}}_url_startPage"
+										   ng-model="button.url"
+										   value="{{button.url}}"
+										   placeholder="http://aeouaou.com/aoeuoa">
+								</div>
+
+								<div class="col-xs-2">
+									<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteButton(button)">
+										<i class="fa fa-trash-o"></i>
+									</a>
+								</div>
+							</div>
+
+							<div class="row"><br></div>
+							<div class="row">
+								<button class="btn btn-primary btn-small col-md-offset-6 col-md-6 col-sm-4 col-sm-offset-8 col-xs-4 col-xs-offset-8" type="button" ng-click="addButton()">
+									<i class="icon-plus icon-white"></i> {{ 'ADD_BUTTON' | translate }}
+								</button>
+							</div>
+						</div>
+					</div>
+
+					<div class="modal-footer row">
+						<button type="submit" ng-click="saveStartPage()" class="btn btn-signup btn-rounded">
+							{{ 'SAVE_START_PAGE' | translate }}
+						</button>
+
+						<button ng-click="cancel()" class="btn btn-secondary btn-rounded">
+							{{ 'CANCEL' | translate }}
+						</button>
+					</div>
+				</div>
+
+				<div class="preview-field-panel col-md-6 hidden-sm hidden-xs container">
+					<form class="public-form">
+
+						<div class="field row">
+							<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
+								<h1>{{myform.startPage.introTitle}}</h1>
+							</div>
+							<div class="col-xs-10 col-xs-offset-1 text-left" style="overflow-wrap: break-word;">
+								<p style="color:#ddd;">{{myform.startPage.introParagraph}}</p>
+							</div>
+						</div>
+						<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
+							<p ng-repeat="button in myform.startPage.buttons" class="text-center" style="display:inline;">
+								<button class="btn btn-info" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
+									<a href="{{button.url}}" style="font-size: 1.6em; text-decoration: none; color: inherit;" >
+										{{button.text}}
+									</a>
+								</button>
+							</p>
+						</div>
+						<div class="row form-actions">
+							<button class="btn btn-info btn btn-info col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3" type="button">
+										<span style="color:white; font-size: 1.6em; text-decoration: none;">
+											{{myform.startPage.introButtonText}}
+										</span>
+							</button>
+						</div>
+
+					</form>
+				</div>
+			</div>
+
+		</div>
+
+
+	</script>
+
 	<!-- Edit Field Modal Dialog Template -->
 	<script type="text/ng-template" id="editFieldModal.html" class="edit-field-modal">
 		<div class="modal-body">
 			<div class="row">
-				<div class="edit-field-panel col-md-6 col-xs-12 col-sm-12 container">
+				<div class="edit-panel col-md-6 col-xs-12 col-sm-12 container">
 					<div class="row modal-header">
 						<h2 class="modal-title hidden-md hidden-lg">{{ 'EDIT_FIELD' | translate }}</h2>
 						<h3 class="modal-title hidden-xs hidden-sm">{{ 'EDIT_FIELD' | translate }}</h3>
@@ -242,137 +537,15 @@
 	<!-- Current Fields Element -->
 	<div class="col-xs-10 col-sm-8 current-fields container">
 		<!-- Start Page -->
-        <div class="row">
+        <div class="row" ng-if="myform.startPage.showStart">
             <div class="col-sm-12">
-                <div class="panel panel-default startPage">
-                    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-target="#collapseStart">
+                <div class="panel panel-default startPage" ng-click="openEditStartPageModal()">
+                    <div class="panel-heading">
                         <h4 class="text-center">
                             {{ 'WELCOME_SCREEN' | translate }}
-                            <span class="pull-right">
-                                <i class="fa fa-chevron-right" ng-hide="startPage.isOpen">
-                                </i>
-                                <i class="fa fa-chevron-down" ng-show="startPage.isOpen">
-                                </i>
-                            </span>
                         </h4>
                     </div>
-
-                    <div id="collapseStart" class="panel-collapse collapse">
-                        <div class="panel-body">                      
-
-                            <div class="row hidden-sm hidden-xs">
-                                <div class="col-md-12">
-                                    <h4>{{ 'PREVIEW_START_PAGE' | translate }}</h4>
-                                </div>
-                                <ul class="col-md-12 container" style="list-style:none; border:2px lightgray solid; padding-bottom: 2em;">
-   
-                                    <div class="field row">
-                                        <div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
-                                            <h1>{{myform.startPage.introTitle}}</h1>
-                                        </div>
-                                        <div class="col-xs-10 col-xs-offset-1 text-left" style="overflow-wrap: break-word;">
-                                            <p style="color:#ddd;">{{myform.startPage.introParagraph}}</p>
-                                        </div>
-                                    </div>
-                                    <div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
-                                        <p ng-repeat="button in myform.startPage.buttons" class="text-center" style="display:inline;">
-                                            <button class="btn btn-info" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
-                                                <a href="{{button.url}}" style="font-size: 1.6em; text-decoration: none; color: inherit;" > 
-                                                    {{button.text}}
-                                                </a>
-                                            </button>
-                                        </p>
-                                    </div>
-                                    <div class="row form-actions">
-                                        <button class="btn btn-info btn btn-info col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3" type="button">
-                                            <span style="color:white; font-size: 1.6em; text-decoration: none;">
-                                                {{myform.startPage.introButtonText}}
-                                            </span>
-                                        </button>
-                                    </div>
-								</ul>
-                            </div>
-
-                            <div class="row">
-                                <div class="col-xs-12">
-                                    <h4>{{ 'EDIT_START_PAGE' | translate }}</h4>
-                                    <br>
-                                </div>
-                            </div> 
-
-                            <div class="row question">
-                                <div class="col-md-4 col-sm-12">{{ 'INTRO_TITLE' | translate }}:</div>
-                                <div class="col-md-8 col-sm-12">
-                                    <input type="text" 
-                                    ng-model="myform.startPage.introTitle" 
-                                    name="introTitleStartPage" 
-                                    value="{{myform.startPage.introTitle}}" required>
-                                </div>
-                            </div>
-
-                            <div class="row question">
-                                <div class="col-md-4 col-sm-12">{{ 'INTRO_PARAGRAPH' | translate }}:</div>
-                                <div class="col-md-8 col-sm-12">
-                                    <textarea type="text"
-                                    ng-model="myform.startPage.introParagraph" 
-                                    name="introParagraphStartPage"></textarea>
-                                </div>
-                            </div>
-            
-                            <div class="row question">
-                                <div class="col-md-4 col-sm-12">{{ 'INTRO_BTN' | translate }}:</div>
-                                <div class="col-md-8 col-sm-12">
-                                    <input type="text"
-                                    ng-model="myform.startPage.introButtonText"
-                                    name="introButtonText"
-                                    value="{{myform.startPage.introButtonText}}" required>
-                                </div>
-                            </div>
-
-                            <div class="row"><br><br></div>
-
-                            <div class="row options buttons">
-                                <div class="col-md-3 col-xs-12">Buttons:</div>
-                                <div class="col-md-9 col-xs-12">
-                                    <div ng-repeat="button in myform.startPage.buttons track by button._id" class="row" style="padding-bottom:1em;">
-
-                                        <div class="col-xs-5">
-                                            <span>{{ 'BUTTON_TEXT' | translate }}</span>
-                                            <input type="text" 
-                                            name="{{button.text}}_buttonText_startPage" 
-                                            ng-model="button.text" 
-                                            value="{{button.text}}" 
-                                            placeholder="Button Text">
-                                        </div>
-
-
-                                        <div class="col-xs-5">
-                                            <span>{{ 'BUTTON_LINK' | translate }}</span>
-                                            <input type="text" 
-                                            name="{{button.url}}_url_startPage" 
-                                            ng-model="button.url" 
-                                            value="{{button.url}}" 
-                                            placeholder="http://aeouaou.com/aoeuoa">
-                                        </div>
-
-                                        <div class="col-xs-2">  
-                                            <a class="btn btn-danger btn-mini right" type="button" ng-click="deleteButton(button)">
-                                                <i class="fa fa-trash-o"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-
-                                    <div class="row"><br></div> 
-                                    <div class="row">                                   
-                                        <button class="btn btn-primary btn-small col-md-offset-6 col-md-6 col-sm-4 col-sm-offset-8 col-xs-4 col-xs-offset-8" type="button" ng-click="addButton()">
-                                            <i class="icon-plus icon-white"></i> {{ 'ADD_BUTTON' | translate }}
-                                        </button>
-                                    </div>
-                                </div>
-                            </div> 
-                        </div>
-                    </div>
-                </div>
+				</div>
             </div>
         </div>
         <div class="row">
@@ -435,6 +608,19 @@
                 </div>
             </div>
 		</div>
+
+		<!-- End Page -->
+		<div class="row" ng-if="myform.endPage.showEnd">
+			<div class="col-sm-12">
+				<div class="panel panel-default startPage" ng-click="openEditEndPageModal()">
+					<div class="panel-heading">
+						<h4 class="text-center">
+							{{ 'END_SCREEN' | translate }}
+						</h4>
+					</div>
+				</div>
+			</div>
+		</div>
     </div>
 
 </form>

public/modules/forms/base/views/directiveViews/form/submit-form.client.view.html

@@ -144,8 +144,8 @@ ng-style="{'color':button.color}">
     </section>
 </div>
 
-<!-- End Page View -->
-<div ng-if="myform.submitted && !loading" class="form-submitted"
+<!-- Default End Page View -->
+<div ng-if="myform.submitted && !loading && !myform.endPage.showEnd" class="form-submitted"
     ng-style="{'color':myform.design.colors.buttonTextColor}"
     style="padding-top: 5vh;">
 
@@ -161,3 +161,41 @@ ng-style="{'color':button.color}">
         </p>
     </div>
 </div>
+
+<!-- Custom End Page View -->
+<div ng-if="myform.submitted && !loading && myform.endPage.showEnd" class="form-submitted"
+	 ng-style="{'color':myform.design.colors.buttonTextColor}"
+	 style="padding-top: 5vh;">
+	<div class="row">
+		<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
+			<h1 style="font-weight: 400; nont-size: 25px;">
+				{{myform.endPage.title}}
+			</h1>
+		</div>
+		<div class="col-xs-10 col-xs-offset-1 text-center" style="overflow-wrap: break-word;">
+			<p style="color: grey; font-weight: 100; font-size: 16px;">
+				{{myform.endPage.paragraph}}
+			</p>
+		</div>
+	</div>
+
+	<div class="row form-actions text-center" style="padding: 5px 25px 5px 25px;">
+		<button ng-click="reloadForm()" class="btn" type="button"
+				ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
+			<span style="font-size: 1.6em;">
+			{{myform.endPage.buttonText}}
+			</span>
+		</button>
+	</div>
+	<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
+		<p ng-repeat="button in myform.endPage.buttons" class="text-center" style="display:inline;">
+			<button class="btn" style="background-color:rgb(156, 226, 235)" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
+				<a href="{{button.url}}"
+				   style="font-size: 1.6em; text-decoration: none;"
+				   ng-style="{'color':button.color}">
+					{{button.text}}
+				</a>
+			</button>
+		</p>
+	</div>
+</div>