I'm in the process of creating a contact form for my website. I've utilized grid-template-areas to organize the form input fields. However, upon adding the grid area to the form input, all the form fields disappear except for the last one. Could someone please advise me on what I might be doing incorrectly?
Does anyone have any suggestions?
#home-f .contact-wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
}
#home-f .contact-text p {
width: 90%;
font-size: 1rem;
margin: 1rem 0;
}
#home-f .contact-form {
display: -ms-grid;
display: grid;
grid-template-areas: 'name email'
'service'
'message';
grid-gap: 1.2rem;
}
#home-f .contact-form #name {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: name;
}
#home-f .contact-form #email {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: email;
}
#home-f .contact-form #service {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: service;
}
#home-f .contact-form #message {
-ms-grid-row: 3;
-ms-grid-column: 1;
grid-area: message;
} <section id="home-f" class="py-4">
<div class="container">
<div class="contact-wrapper">
<div class="contact-text">
<h2 class="m-heading">How May We Help You!</h2>
<p>
Grursus mal suada faci lisis Lorem ipsum consectetur elit. Grursus
mal suada faci lisis Lorem ipsum consectetur elit.
</p>
<form action="">
<div class="contact-form">
<input
type="text"
name="name"
placeholder="Your Name *"
id="name"
class="form-control"
/>
<input
type="text"
name="email"
placeholder="Email Address *"
id="email"
class="form-control"
/>
<select name="service" id="service" class="form-control">
<option value="">Select a service...</option>
<option value="website-development">
Website Development
</option>
<option value="speed-optimization">Speed Optimization</option>
<option value="lead-generation">Lead Generation</option>
<option value="video-editing">
Video Editing / Voice over
</option>
<option value="graphics">Graphics & Design</option>
<option value="other">Other</option>
</select>
<textarea
name="message"
placeholder="Your Message"
id="message"
class="form-control"
></textarea>
</div>
</form>
</div>
<div class="contact-img">
<img src="assets/img/contact.png" alt="" />
</div>
</div>
</div>
</section>