Application Styling

General

LoanPro provides an application as a way to gather information and create a new loan. Customers sometimes want to control the styling of the application so it better matches their existing website. In order to make this possible, you can add custom CSS styling to the application. This article will not cover CSS options, but it will give instruction on how to access application elements.

Once here, click ADD .

Now click CUSTOM CSS.


You can enter the new CSS here, then click SAVE when you’re done.

Custom CSS

 

The custom css input can be accessed by navigating to Settings > Loan > Setup New Loan > Application.

 

HTML

Here is an example of how the HTML of the application is constructed:

<div class="container">
	<div class="starter-template">
		<h1>sample application</h1>
		<p class="lead">some description</p>
	</div>
	<form method="post" id="submitForm" action="#">
		<section class="controls js-section-1">
			<h2>Section one</h2>
			<div class="row">
				<div class="col-md-6">
					<div class="form-group js-group-Collateral.collateralType  invisible-field  required " data-strict="">
						<label class="">
							Collateral Type
						</label>
						<select class="form-control js-collection" id="Collateral.collateralType" name="Collateral.collateralType">
							<option value="collateral.type.car" selected="">
								Automobile
							</option>
							<option value="collateral.type.consumer">
								Consumer
							</option>
							<option value="collateral.type.mortgage">
								Real Estate
							</option>
							<option value="collateral.type.other">
								Other
							</option>
						}
					</select>
					<div class="help-block with-errors" style="display: none;">
						<ul class="list-unstyled">
							<li></li>
						</ul>
					</div>
				</div>
				<div class="form-group js-group-Collateral.vin   ">
					<label class="">
						VIN
					</label>
					<input type="text" class="form-control js-vin" id="Collateral.vin" name="Collateral.vin" value="" title="VIN made up of 17 characters" maxlength="17">
					<div class="help-block with-errors" style="display: none;">
						<ul class="list-unstyled">
							<li></li>
						</ul>
					</div>
				</div>
				<div class="form-group js-group-Collateral.color   ">
					<label class="">
						Color
					</label>
					<input type="text" class="form-control js-text" id="Collateral.color" name="Collateral.color" value="">
					<div class="help-block with-errors" style="display: none;">
						<ul class="list-unstyled">
							<li></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="form-group js-group-Collateral.a   ">
					<label class="">
						Year
					</label>
					<input type="text" class="form-control js-number" id="Collateral.a" name="Collateral.a" value="">
					<div class="help-block with-errors" style="display: none;">
						<ul class="list-unstyled">
							<li></li>
						</ul>
					</div>
				</div>
				<div class="form-group js-group-Collateral.b   ">
					<label class="">
						Make
					</label>
					<input type="text" class="form-control js-text" id="Collateral.b" name="Collateral.b" value="">
					<div class="help-block with-errors" style="display: none;">
						<ul class="list-unstyled">
							<li></li>
						</ul>
					</div>
				</div>
				<div class="form-group js-group-Collateral.c   ">
					<label class="">
						Model
					</label>
					<input type="text" class="form-control js-text" id="Collateral.c" name="Collateral.c" value="">
					<div class="help-block with-errors" style="display: none;">
						<ul class="list-unstyled">
							<li></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>

	<div class="form-group">
		<div class="alert alert-success" id="successAlertBox" role="alert" style="display: none;">
			Form has been submited.
		</div>
		<div class="alert alert-warning" id="errorAlertBox" role="alert" style="display: none;"></div>
		<div class="text-center">
			<button id="submitBtn" type="submit" class="btn btn-primary" style="width: 250px;">Submit</button>
		</div>
	</div>
</form>
</div>

 

This HTML will produce the following page:

Every component is identified by a class, id or name. They are divided as follows:

Header section identified by the “starter-template” class:

One ore more sections. Every section is identified by the “section” tag and the “js-section-{{index}}” class. So, for the 1st section the class name would be “js-section-1” and so on.

Every section has 2 columns (left & right) identified by the “col-md-6” class name (this class belongs to bootstrap. The form currently works with bootstrap 3.3.7):

The fields within a section embraces 2 components: an input field and a label field. And they are grouped by the js-group-{{ID}} class. The ID is displayed in the app form editor:

So, in this case:

The class name is js-group-Collateral.vin.

The input field is identified by the id, name and class attributes. The id and name matches the ID previously described (in this case, the input field name & id is “Collateral.vin”). But the class name represents the “type” of field and the name follows the next convention: js-{{type}}. For the VIN field, the class name would be “js-vin”, for the “color” field the class is “js-text” because the input field is a text, “year” field is “js-number”, etc.

Finally, the “submit” button is identified by the ID submitBtn.

Additional notes:

  • The required fields are identified by the “required” class.
  • Fields with the “invisible-field” class are fields that will be sent as part of the payload, but they are not displayed to the user. Those fields have a preset value defined in the app form editor.

The CSS editor found inside the app form editor works as any style editor. If you want to change the font size for the header you could do it like this:

.starter-template H1
{
    font-size: 40px;
}

Leave A Comment?