Hello, I am encountering some challenges with formatting my form. As a beginner in web coding, I apologize for what may seem like a simple issue - this is the first form I am attempting to code.
My objective is as follows:
- On screens and tablets: have form labels aligned right and justified next to form elements
- On phones: align form labels left and justified above the left-aligned and justified elements
- Ensure the submit button is right-aligned and justified
I am using flexboxes to achieve all of these requirements.
Here is the progress I've made so far:
/* Contact Page Styling */
.contact_left {
flex-direction: row;
flex: 1;
align-content: center;
text-align: center;
}
.contact_right {
display: flex;
flex-direction: row;
flex: 1;
justify-content: space-between;
}
.contact_form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
max-width: 90%;
margin: auto;
}
.contact_form div {
flex: 25%;
}
.contact_form div {
flex: 50%;
}
.form_label {
text-align: right;
}
@media screen and (max-width: 1024px) {
section {
width: 80%;
}
}
@media screen and (max-width: 800px) {
section {
flex-direction: column;
text-align: center;
width: 100%;
margin: 2px;
}
.contact_form {
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
}
.contact_form div { /* Change div elements to 100% */
flex: 100%;
justify-content: flex-start;
align-content: flex-start;
}
.form_label { /* Align the text left */
text-align: left;
}
.contact_input {
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
flex: 100%;
}
}<section>
<div class="contact_right">
<form class="contact_form" id="contact_form">
<div class="form_label">
<label for="contact_name">Full Name:</label>
</div>
<div>
<input class="contact_input" type="text" id="contact_name" name="contact_name" placeholder="Name">
</div>
<div class="form_label">
<label for="contact_email">Email Address:</label>
</div>
<div>
<input type="email" id="contact_email" name="contact_email" placeholder="Email">
</div>
<div class="form_label">
<label for="contact_number">Mobile Number:</label>
</div>
<div>
<input type="tel" id="contact_number" name="contact_number" placeholder="Mobile Number">
</div>
<div class="form_label">
<label for="contact_message">Message:</label>
</div>
<div>
<textarea rows="4" cols="40" id="contact_message" name="contact_message" value=""></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>
</section>In the snippet provided above, the formatting appears better than what it looks like on the actual webpage: Link to image showing full website coding with formatting issues
If you have some free time and would like to give feedback, I have uploaded everything here: Link to contact form webpage
Wireframes depicting the intended look of the website
Thank you for your assistance—any feedback is greatly appreciated!