Correcting a FileBound Form Issue with a Horizontal Rule Blocking an Input Field

If a horizontal rule on a FileBound form obstructs access to an input field, follow these steps to resolve the issue:

Solution: Applying Custom CSS Styling to Fix the Form

Follow these steps to resolve the issue by adding custom CSS:

1. Open the forms designer.
2. Select the HTML View option.
3. Add the following code at the top of the form's HTML but after line 1:

This custom style code is designed to provide a generalized solution, ensuring compatibility with most common input types—not just radio buttons and text fields. The script below has been crafted to include most common input fields, ensuring that horizontal lines remain consistently in the background.

The code is applicable to any form containing the input types listed below:

<style>
hr {
   position: relative; /* Keeps it within the document flow */
   z-index: 0;         /* Base layer */
   width: 100%;       /* Full width */
   border: none;       /* Removes default border */
   height: 2px;       /* Adjust height as needed */
   background-color: #ccc; /* Background color */
   pointer-events: none; /* Prevents interaction issues */
}

input[type="radio"],
input[type="text"],
input[type="checkbox"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="color"],
input[type="file"],
select,
textarea {
   position: relative; /* Ensures they are above the hr */
   z-index: 1;         /* Places them above the hr */
}
</style>

See video below demonstrating the solution.