»» In site assets, create a new file called _financing.scss
»» Add the following CSS:
.financingFormPageLayout {
font-family: 'Barlow', sans-serif;
overflow: hidden;
.stampInstructions {
display: none;
}
h3.lead-form-title {
margin-top: 70px;
padding: 2% 15%;
font-size: 40px;
color: #fff;
background: $brand-primary; /* Old browsers */
background: -moz-linear-gradient(left, #616AE7 0%, #8E54E9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #616AE7 0%, #8E54E9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #616AE7 0%, #8E54E9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616AE7', endColorstr='#8E54E9',GradientType=1 ); /* IE6-9 */
}
.financingHeader {
background: #272D31;
color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
text-align: center;
margin: 0 auto;
padding: 0 15%;
.financingLogoImg {
display: inline-block;
padding: 10px 0;
max-height: 75px;
float: left;
}
.financingAppText1 {
font-size: 18px;
padding: 0 10%;
}
.financingWhiteLock {
display: inline-block;
padding: 10px 0;
max-height: 75px;
float: right;
}
p.financingSecureText1 {
color: #e8e8e8;
font-style: oblique;
}
.financingSecureText2 {
font-size: 20px;
}
}
.Dealer Spike-form-container {
}
.alpaca-wizard-nav {
display: none;
}
.alpaca-wizard-buttons {
display: none;
}
.alpaca-field.alpaca-field-object.alpaca-optional {
.formHidden {
display: none;
}
.formColor {
background: $brand-primary; /* Old browsers */
background: -moz-linear-gradient(left, #616AE7 0%, #8E54E9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #616AE7 0%, #8E54E9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #616AE7 0%, #8E54E9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616AE7', endColorstr='#8E54E9',GradientType=1 ); /* IE6-9 */
border-radius: 0;
padding: 4% 15%;
legend.alpaca-container-label {
color: #fff;
font-size: 30px;
border-bottom: none;
}
label.control-label.alpaca-control-label {
color: #fff;
font-weight: 100;
padding: 10px 0 5px;
clear: both;
float: left;
}
}
.formWhite {
background: #fff;
border-radius: 0;
padding: 4% 15%;
legend.alpaca-container-label {
color: #000;
font-size: 30px;
border-bottom: none;
}
label.control-label.alpaca-control-label {
color: #000;
font-weight: 100;
padding: 10px 0 5px;
clear: both;
float: left;
}
}
.form-group.alpaca-field.alpaca-field-text.alpaca-optional.alpaca-autocomplete {
input {
height: 45px;
border-radius: 5px;
}
}
.form-group.alpaca-field.alpaca-field-phone.alpaca-required.alpaca-autocomplete {
input {
height: 45px;
border-radius: 5px;
}
}
.form-group.alpaca-field.alpaca-field-email.alpaca-optional.alpaca-autocomplete {
input {
height: 45px;
border-radius: 5px;
}
}
.form-group.alpaca-field.alpaca-field-text.alpaca-required.alpaca-autocomplete {
input {
height: 45px;
border-radius: 5px;
}
}
.form-group.alpaca-field.alpaca-field-select.alpaca-required {
select {
height: 45px;
border-radius: 5px;
}
}
.form-group.alpaca-field.alpaca-field-select.alpaca-optional {
select {
height: 45px;
border-radius: 5px;
}
}
.form-group.alpaca-field.alpaca-field-date.alpaca-optional {
input {
height: 45px;
border-radius: 5px;
}
}
.form-group.alpaca-field.alpaca-field-date.alpaca-required {
input {
height: 45px;
border-radius: 5px;
}
}
.alpaca-container-item.alpaca-container-item-last:after {
content: "";
display: table;
clear: both;
}
.glyphicon-star:before {
margin-right: 10px;
}
.has-error .form-control {
border-width: 3px;
}
}
.formAdditionalInfo {
.alpaca-container.alpaca-vertical.alpaca-container-has-items:after {
content: "\A Statement of Consent";
font-size: 30px;
white-space: pre;
}
&:after {
content: "\AI certify that the information provided by me is correct. I also understand that you will be checking with credit reporting agencies. I authorize an investigation of my credit and employment history and the release of information about my credit experience.\A\A Please initial below to indicate that you've read our Privacy Policy (link included at the bottom of this page).";
display: inline-block !important;
width: 100%;
padding: 2% 15px;
overflow: auto;
white-space: pre-wrap;
}
}
.alpaca-field.alpaca-field-object.alpaca-optional.formAdditionalInfo.formWhite {
padding: 4% 15% 0;
}
.alpaca-field.alpaca-field-object.alpaca-optional.formInitial.formWhite {
padding: 0 15%;
}
.alpaca-form-buttons-container {
text-align: unset;
padding: 4% 15%;
button.alpaca-form-button.alpaca-form-button-submit.btn.btn-default {
padding: 2% 4%;
border-radius: 5px;
background: $brand-primary; /* Old browsers */
background: -moz-linear-gradient(left, #616AE7 0%, #8E54E9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #616AE7 0%, #8E54E9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #616AE7 0%, #8E54E9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616AE7', endColorstr='#8E54E9',GradientType=1 ); /* IE6-9 */
color: #fff !important;
display: block;
margin: 0 auto;
}
button.alpaca-form-button.alpaca-form-button-submit.btn.btn-default:hover {
background: $brand-primary; /* Old browsers */
background: -moz-linear-gradient(right, #616AE7 0%, #8E54E9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(right, #616AE7 0%, #8E54E9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to left, #616AE7 0%, #8E54E9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8E54E9', endColorstr='#616AE7',GradientType=1 ); /* IE6-9 */
color: #fff !important;
}
}
.row.text-center {
padding: 2%;
}
.formJointTitle {
font-size: 30px;
display: table;
input {
display: none;
}
}
.financingTrustFactors {
margin: 0 auto;
text-align: center;
padding: 0 3% 2% 3%;
.financingLockImg {
float: left;
max-height: 50px;
}
.financingLockText {
line-height: 50px;
font-weight: 900;
}
.financingPoweredBy {
img {
width: 100%;
position: relative;
top: 10px;
}
}
}
}
@media (max-width: $screen-xs) {
h3.lead-form-title {
padding: 4% !important;
margin-top: 60px !important;
text-align: center;
}
.financingLogoImg {
max-height: 60px !important;
}
.financingWhiteLock {
max-height: 60px !important;
}
.formWhite {
padding: 4% 6% !important;
}
.formColor {
padding: 4% 6% !important;
}
.formAdditionalInfo.formWhite {
padding: 4% 6% 0 !important;
}
.financingFormPageLayout .alpaca-field.alpaca-field-object.alpaca-optional.formInitial.formWhite {
padding: 0 6% !important;
}
button.alpaca-form-button.alpaca-form-button-submit.btn.btn-default {
padding: 10% 20% !important;
margin-bottom: 6% !important;
}
.financingTrustFactors {
padding: 0 3% 2% 3% !important;
}
.financingFormPageLayout .financingTrustFactors .financingLockText {
line-height: unset !important;
}
}
@media (min-width: $screen-sm-min) {
@media (max-width: $screen-sm-max) {
.financingTrustFactors {
padding: 0 3% 2% 3% !important;
}
.financingFormPageLayout .financingTrustFactors .financingLockText {
line-height: unset !important;
}
.financingLockText {
padding: 2%;
}
}
}
»» Save the file and publish the site assets
»» In Layout Manager, create a new layout titled Financing Form layout, add the class financingFormPageLayout, and add include the Financing Form page in the Create Layout window
»» Open the Financing Form Layout and link the Tracking Codes section to this new layout
»» Be sure the rows and components from this stamp end up in the new layout unedited (you can do this multiple ways - reapply the stamp and remove the previous rows, add the rows from the stamp into a new section, manually recreate the rows using the new component instances, or some other way you may think to handle this step)
»» Publish the layout manager changes
»» Delete this component and its row.