No Coding Experience Required: Capture the Time of Day Using Laserfiche Forms

3 min read
  • Information Technology
  • Document & Records Management

Automation from the point of capture is a persuasive value proposition for people seeking to improve enterprise-wide processes. Beginning a document’s life cycle with Laserfiche Forms allows organizations to expedite business processes, ensure information accuracy and take control of the information being collected from users. For instance, HR departments often use electronic forms to gather legally required employee information in a timely, efficient manner. Here is a useful example of how to add a Time of Day field to forms. Laserfiche Forms has a simple drag-and-drop interface that allows users to add many different field types to forms and collect the information that drives business processes.

  • Does the form submitter need to enter his or her name? A Single Line field would work just fine!
  • What about an address? Use the Address field!

What if the user needs to capture a time? This is a field that does not come out of the box with Laserfiche Forms, but it can still be useful for travel requests or processes involving appointment scheduling. What options does the user have? One reason Laserfiche Forms has a wide range of possible uses is because it contains a section that allows form customization with CSS and JavaScript. For those who do not have coding experience, there is no need to worry! This article introduces a new way for any user to look like a programming expert. Here is an example of what a form looks like before and after CSS customization.


Laserfiche Forms keeps track of all the fields in a particular form by individually numbering them. These field selectors are labeled in the CSS and JavaScript sections of the Forms Designer.

  • Notice that the first field added to the form is labeled q1, the next will be labeled q2 and so on.
  • This example shows the top 4 fields in the form, which is why they are labeled 1, 2, 3 and 4.

When the user modifies fields that are halfway down a large form, the numbers will look something like this from the CSS and JavaScript page: This example shows one date field followed by three dropdown fields, which is the optimal format for capturing time with Laserfiche Forms. Below is the CSS code used to modify form fields. Notice that the script includes the field selectors used in the image above (q1, q2, etc.).

#q1, #q2, #q3, #q4 {display: inline-block;}
#q1 {width: 40%;}
#q2 {width: 10%;}
#q3 {width: 10%;}
#q4 {width: 10%;}
#q2 .cf-small {width: 50px;}
#q3 .cf-small {width: 50px;}
#q4 .cf-small {width: 50px;}

To modify this code in a form, follow these steps:

  1. Match the field selectors to the field selectors in your form.
  2. Replace the values in the script with the numbers you found.

There are many interesting ways to modify the fields in a form, including:

  • Adding fields and displaying the sum in another field.
  • Finding the day of the week selected from a date field.
  • Creating a form that allows searches in Laserfiche WebLink.

Get the complete guide to Laserfiche Forms and see how electronic forms have helped organizations get rid of paper and inefficiency.

Watch a 2-Minute Demo

Discover how your organization can go paperless, manage digital content, automate day-to-day processes and more.

Take a Product Tour

Enable the teams closest to your business processes to evolve and transform how your organization gets things done.


Related Blogs

Digitization, AI and the Cloud — Laserfiche Predictions for Government and Education in 2024
Cost-Efficiency, ML and Interoperability — Laserfiche Predictions for Manufacturing and Healthcare in 2024
Hyperautomation, Integrations and AI — Laserfiche Predictions for Financial Services in 2024
AI, Digital Transformation and Better Processes — Laserfiche Leadership Makes Predictions for 2024
New SME Market Research Reveals Manufacturing Leaders’ Priorities in the Next Investment of Digital Transformation

Book a Personalized Laserfiche Consultation Today