CODEWITHSUNDEEP
javascripthtmlcss
White8Tiger
White8Tiger

Reputation: 294

Only last Input works

I have this huge form I'm making and there's an also huge problem with it.

In some "areas". only the last input works.

For example here:

[...]
<div class="main_data">
   <span class="info">main data</span><br>
   <input type="text" name="name" placeholder="Name" required>
   <input type="email" name="email" placeholder="Email" required>
   <input type="text" name="website" placeholder="Website" required>
   <input type="text" name="telephone" placeholder="Telephone" required>
   <input type="text" name="address" placeholder="Address" required>
   <input type="text" name="city" placeholder="City" required>
   <input type="text" name="country" placeholder="Country" required>
</div>
[...]

Every input appears to be disabled(?) and I can only write on Country.

This also happens on some other areas of the form, for example here:

[...]
<div class="detailed_info">
   <span class="info">detailed info</span>
   <input type="text" name="activity_areas" placeholder="Activity Areas" required>
   <input type="text" name="company_valences" placeholder="Description of Company Valences" required>
   <input type="text" name="where_operates" placeholder="Markets / Countries where it operates" required>
   <input type="text" name="where_operates" placeholder="Annual Turnover (Value EUR)" required>
[...]

I can only write on Annual Turnover.

I tried switching z-index's to check out if it was something over it but I didn't find anything wrong.

I'll paste the css of only the first part, I belive if I find what's happening on the first one I'll be able to correct the second.

.main_data{
    width: 100%;
    padding: 30px 0;
    background: rgba(238, 238, 238, 0.9);
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    text-align: center;
}
.main_data .info{
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
    font-size: 20px;
    font-family: 'Futura-Light-Italic', sans-serif;
}
.main_data input{
    border: 0;
    padding: 5px 0;
    margin: 0;
    width: 80%;
    background: #FFF;
    color: #000;
    text-align: center;
    font-family: 'Futura', sans-serif;
}
.main_data input:focus{
    border: 0;
}

I'm still afraid that it might not have nothing to do with the form so I'll leave you guys a link to the page so can try inspecting some elements if you want.

To bring up the form you click Join the City as One of Us: link

I'm really needing help as this form must be ready today.

Please ask questions if you don't understand something! I will obviously try to help you helping me.

EDIT: I'm using Google Chrome

Upvotes: 1

Views: 112

Answers (2)

Ruddy
Ruddy

Reputation: 9923

Change the line-height on .oneofus.

.oneofus {
  width: 88%;
  position: absolute;
  z-index: 12;
  top: 0;
  line-height: 1px; /* this is the problem remove it or make it bigger (74px or more) */
}

Upvotes: 1

adamjld
adamjld

Reputation: 310

Set the position of the inputs to relative..

.main_data input {
  position: relative;
}

Upvotes: 0

Related Questions