Creating a form with Laserfiche Forms doesn’t require any coding knowledge, but users can enter their own custom JavaScript and CSS to add powerful functionality. Here is how JavaScript can be used with Laserfiche Electronic Forms to perform calculations, split a form into tabs and duplicate information by checking a box.

Keep the following in mind while reading the rest of the article:

  • Laserfiche Forms includes a JavaScript library called jQuery (version 1.10) that makes writing JavaScript a lot faster and easier. The code examples provided in this article use jQuery.
  • This article is written for those who are interested in using JavaScript, but have limited experience with it. As such, the code examples shown here are CSS class based. Getting these examples to work for a form is as straightforward as adding a few CSS classes to fields and then copying the code into the CSS and JavaScript page.

Perform calculations

Some forms contain fields, like Order Total or Sales Tax, that need to be calculated based on information entered by the user. If used correctly, JavaScript can automatically perform these calculations faster and more accurately than people.

For example, a non-profit organization relies on membership to function. Potential members use Laserfiche Forms to fill out their applications, on which they can select their membership level and provide an additional donation. As they enter their information, the form automatically totals the donations for them.

advanced_forms1

Several fields are involved in calculating the correct donation amount:

  • Select the Membership Type
  • Would you like to give an additional donation?
  • Donation Amount
  • Total Due

Each of these fields needs to be given an appropriate CSS class for the JavaScript to work. CSS classes are assigned in the Advanced tab when editing a field. See this help page to learn more about adding CSS classes to fields.

  • Give the Select the Membership Type field the membershipType class.
  • Give the Would you like to give an additional donation? field the additionalDonation class.
  • Give the Donation Amount field the donation class.
  • Give the Total Due field the total class.

Here is what adding the class to the Total Due field looks like:

advanced_forms2

When configuring the Select the Membership Type field, make sure to check the “Assign values to choices” option and give each option the correct value for the membership type.

advanced_forms3

After giving these fields the appropriate CSS classes, paste the following code in the JavaScript section of the CSS and JavaScript page and click Save.

$(document).ready(function () {
$('.donation input, .additionalDonation input, .membershipType input').change(function () {
if ($('.additionalDonation input:checked').val() == 'Yes') {
$('.total input').val(Number($('.membershipType input:checked').val()) + Number($('.donation input').val()));
} else {
$('.total input').val($('.membershipType input:checked').val());
}
});
});

This is just one of many ways to create field calculations in Laserfiche Forms. See this help page for other calculation examples.

Break a long form’s content into several tabs

JavaScript can also change the layout of a form, making it more attractive and easier to read. For example, a job application is not as overwhelming when it is presented as four smaller sections:

  • Your Info
  • Work Experience
  • Education
  • Supplemental

advanced_forms4

A tab for each section appears at the top. Clicking a tab displays only the fields associated with that section.

To configure these tabs:

1. Add four sections to the form and fill each one with the appropriate content.
2. Give the first section the section1 CSS class, the second section the section2 CSS class and so on for each section.
3. Add the following code to the JavaScript section of the CSS and JavaScript page. This code will create the navigation to enable users to jump between tabs.
$(document).ready(function () {
var section1 = $('.section1 h1:first').text();
var section2 = $('.section2 h1:first').text();
var section3 = $('.section3 h1:first').text();
var section4 = $('.section4 h1:first').text();
$('<div class="navbar"><div class="navitem info">' + section1 + '</div><div class="navitem work">' + section2 + '</div><div class="navitem edu">' + section3 + '</div><div class="navitem sup">' + section4 + '</div></div>').insertBefore('#q1');
$('<input class="navitem work" value="Next: ' + section2 + '" type="button">').appendTo('.section1');
$('<input class="navitem info" value="Previous: ' + section1 + '" type="button"> <input class="navitem edu" value="Next: ' + section3 + '" type="button">').appendTo('.section2');
$('<input class="navitem work" value="Previous: ' + section2 + '" type="button"> <input class="navitem sup" value="Next: ' + section4 + '" type="button">').appendTo('.section3');
$('<input class="navitem edu" value="Previous: ' + section3 + '" type="button">').appendTo('.section4');
$('.navitem').on('touchstart click', function () {
$('.section1, .section2, .section3, .section4, .Submit').hide();
$('.navbar').find('.navitem').removeClass('selected');
if ($(this).hasClass('info')) {
$('.section1').show();
$('.navbar').find('.info').addClass('selected');
}
else if ($(this).hasClass('work')) {
$('.section2').show();
$('.navbar').find('.work').addClass('selected');
}
else if ($(this).hasClass('edu')) {
$('.section3').show();
$('.navbar').find('.edu').addClass('selected');
}
else if ($(this).hasClass('sup')) {
$(".section4, .Submit").show();
$('.navbar').find('.sup').addClass('selected');
}
})
$('.navitem.info').trigger('click');
});

4. Copy and paste the following CSS rules in the CSS section of the CSS and JavaScript page, then click Save.

.navbar {
text-align:center;
}
.navbar div {
padding-top: 12px;
cursor: pointer;
width: 130px;
height: 30px;
border-radius: 6px;
background-color: #e5e5e5;
text-align: center;
margin: auto;
border: 2px white solid;
display:inline-block;
}
.navbar div:hover, .navbar .selected {
background-color: #C0C0C0;
}
.cf-form {padding: 0px 10px 40px;}
#cf-formtitle {margin-bottom:0px;}

Duplicate information by checking a box

Many order forms will have both a billing address and a mailing address. The mailing address frequently matches the billing address. It is possible to set up a form so that, when a customer indicates the mailing address is the same as the billing address, the mailing address is automatically filled with the specified billing address.

advanced_forms5

This example uses two address fields (given the addressOne and addressTwo classes) and one checkbox field (given the check class) that allows the user to choose whether the information will be duplicated by selecting Yes. After configuring these fields, insert the following code in the JavaScript section of the CSS and JavaScript page.

$(document).ready(function () {
$('.check').change(function () {
var firstAddress = $('.addressOne').find('input');
var secondAddress = $('.addressTwo').find('input');
if ($(this).find('input[value="Yes"]').is(':checked')) {
for (i = 0; i < 6; i++) {
$(secondAddress[i]).val($(firstAddress[i]).val());
}
} else {
secondAddress.val('');
}
});
});

Further resources

More information about extending Laserfiche Forms functionality with JavaScript can be found in the following locations:

Benefits of using JavaScript in Laserfiche Forms

Adding custom JavaScript and CSS to Laserfiche Forms results in the following benefits:

  • User error is reduced by automating calculations.
  • The form layout and appearance can be easily modified to suit the organization’s specific needs.
Some of the products and services listed on the Laserfiche Solution Exchange were not developed by Laserfiche. The recommendations and opinions expressed on the Laserfiche Solution Exchange are those of the person or persons posting the recommendations only, and they do not necessarily represent Laserfiche's opinion or recommendation of the product or service being reviewed. Laserfiche disclaims all liability resulting from your purchase or use of any non-Laserfiche software product or service listed on the site.