Rental Application Form

Fields and controls

• Fields are divided into sections using Grid containers. Containers have a bg-secondary CSS class to set the background color to gray.
• The Email field accepts only valid email addresses. Change the pattern in the field properties.
• The MobileNumber is a masked input field that accepts only 11-digit numbers. Change the mask in the field properties.
• The Pets field is required.
• The PetInformation field is shown/hidden dynamically depending on the Pets field value.
• The Occupants data table is shown/hidden and made required dynamically depending on the NumberOfTenants field value.
• Change options for the Language and the Relationship columns in the column properties.
• PDf file is embedded on the form using HTML control.
• The Ink sketch control is added for collecting a signature.

JavaScript

• The toggleOccupants() function shows/hides occupants table and adds table validation dynamically depending on the NumberOfTenants field value. The function is called on the form load and when the NumberOfTenants field value changes.
• The togglePetInfo() function shows/hides the PetInformation filed and makes it required depending on the Pets field value. The function is called on the form load and when the Pets field value changes.
• The minimum date for the MoveInDate field calendar is two days from the current date.

Styling

• The primary button font-weight is set to 600.
• h1, h4, p elements' text size is responsive to screen width and is set with the min() CSS function.
• h1, p element's content is centered.
• A pseudo-element is added before and after h4 elements to display horizontal lines.