Why isn't my custom liquid code fetching user information?

i have a custom liquid block imbedded inside a collapsible row and i need it to get user information. ive got some basic code for that, but it doesnt show unless i remove style=“display: none;” then it shows regardless of the row being open or closed.

<div id="row id">
  <!-- Content of the collapsible row -->
  
  <div class="custom-content" style="display: none;">
    <h3>Contact Information</h3>
    <form id="user-input-form">
      <label for="email">Email Address:</label>
      <input type="email" id="email" name="email" required>

      <label for="website">Link to Website:</label>
      <input type="url" id="website" name="website" required>

      <label for="price">Price:</label>
      <input type="number" id="price" name="price" required>

      <button type="button" id="submit-user-input">Submit</button>
    </form>
  </div>
</div>

i also implemented some javascript


@vapevanguard HI, as per my knowledge above codes do not exist in liquid code they are all HTML and JS.

so for this code, you can create a new HTML field blow the liquid area, i hope it will work. thanks

I solved it, I moved the {{ block.settings.custom_liquid }} to inside the details of the collapsible row and removed the

style="display: none

  
    {{ block.settings.content }}
    {{ block.settings.page.content }}
    {{ block.settings.custom_liquid }}