logo
Documents & Forms
Microsoft 365 & SharePoint Tools
Classic SharePoint Tools

Vehicle Accident Report Form

Streamline the accident report process by using the free online accident report form. Gather all information about the accident: names and contact information of the drivers, description of the vehicles, road and weather conditions, and a list of witnesses. The client can draw a diagram of the accident on the scheme of the road, indicate the direction of vehicles and road signs. The client can fill out the form on any device.

Preview
Theme:
Use this template

Fields and controls

  • The form title has a bg-primary CSS class. Thus, the title background matches the primary color of the theme.
  • The form notice has a bg-danger and a text-white CSS classes. A bg-danger class sets the background of an element to red. A text-white class sets the text color to white.
  • The form content is organized using an Accordion container.
  • An Ink Sketch is added for collecting accident details. The background image is added using the JavaScript function.
  • The DriverEmail and the ClientEmail fields accept only valid email addresses. Change the pattern in the field properties.
  • The DriverMobileNumber and the ClientMobileNumber are masked input fields that accept only 11-digit numbers. Change the mask in the field properties.
  • An Ink sketch control is added for collecting an electronic signature.
  • Change the message that will be displayed after the form is submitted in the form settings.
  • The form timeout is set to 180 seconds, after which the form can be submitted again. You can change it in the form settings.

JavaScript

  • The imageURL variable stores the link to the accident diagram.
  • The image size and the Ink Sketch control canvas size is responsive to screen width.

Styling

  • h1, h4, elements' text size is responsive to screen width and is set with the min() CSS function.
  • h1 element's content is centered, and the text color is white.
  • A pseudo-element is added after h4 elements to display double lines.
  • A panel title is prefixed with the "▼" symbol if the panel is active and the "▷" symbol if the panel is inactive.