.contact-form {
  transition: .3s;
  margin-top: 120px;
  /*border: 2px solid black;*/
  background-color: rgb(243, 243, 243);
  border-radius: 6px;
  box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
  width: 475px;
  height: 550px;
  margin-left: 11px;
  text-align: left;
  align-items: center;
  position: sticky;
  left: 60%;
  top: -20%;
  user-select: all;
  z-index: 4;
}

.benefit-card {
  margin: 20px;
  background-color: white;
  text-align: center;
  border: 1px solid black;
  width: 300px;
  height: 450px;
  top: 0%;
  left: 22%;
  box-shadow: 2px 2px 12px 2px black;
  user-select: none;
}

.benefit-card-header {
  border-bottom: 3px dotted black;
  padding-bottom: 11px;
}

.benefit-card-image {
  -webkit-user-drag: none;
  padding-top: 11px;
  padding-bottom: 19px;
  width: 200px;
  filter: drop-shadow(2px 2px 6px black);
}

#help-me {
  position: relative;
  z-index: 8;
  margin-top: -515px;
}

<div class="contact-form">
  <h2 class="contact-form-header">Get Your Quote Today!</h2>
  <form class="form-bg-pls-send-help">
    <label class="contact-input-header" for="email">Email<span class="important-contact-field"> *</span></label>
    <br>
    <input class="contact-input" name="email" type="email" autocomplete="off" required placeholder="Your company email" />

    <label class="contact-input-header" for="company">Company</label>
    <br>
    <input class="contact-input" name="company" type="text" required placeholder="Who do you work for?" />

    <label class="contact-input-header" for="subject">Subject</label>
    <input class="contact-input" name="subject" type="text" placeholder="Subject " />

    <label class="contact-input-header" for="about">About</label>
    <textarea class="long-input contact-input" name="about" type="text" placeholder="What does your company do?"></textarea>
    <br><br>
    <input class="getquote-button" type="submit" value="Get Quote" />
  </form>
</div>
<div id="help-me">
  <div class="benefit-card" id="bc">
    <h1 class="benefit-card-header" id="bch">World Wide</h1>
    <h3 class="benefit-card-description" id="bcd">No matter where you're from or where you're located we will help you grow your company!</h3>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I am building a sample website of a company. I have a contact form set up, but the inputs are not clickable when they are in a div tag, but I need the form in one so I can properly style the form. The form is supposed to require the input, when I click on the Get Quote button it allows me to edit the first input tag. This has never happened to me before and I have tried user-select, checking if the disabled attribute was used, and just about everything I can think of.

CodePudding user response：

Update your css file to:

#help-me{
    position: relative;
    z-index: -1;
    margin-top: -515px;
}

This element is covering the whole screen. Update the z-index when you need to show it.

CodePudding user response：

Your inputs are not clickable because #help-me covers all of .contact-form due to the way you have used margin-top to position it higher compared to where it would naturally sit.

Consider using flexbox to achieve your layout instead.

.layout {
  display: flex
}

.contact-form {
  flex: 1 1 auto;
  background-color: rgb(243, 243, 243);
  border-radius: 6px;
  box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
}

#help-me {
  flex: 1 1 auto;
}

<div class="layout">
  <div id="help-me">
    #help-me
  </div>
  <div class="contact-form">
    .contact-form
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>