Question 44939 in Html Question posted in
Some basic documentation can be found here.

Styling form so that they are side by side horizontally – Html

I’m trying to make a contact form and I wanted to get both first name and last name. I know an easier solution would be just make 1 input for full name but I didn’t want to do that. Something similar to this image here, but I can figure it out and I’m really out of clue how to do it. Please help! Thank you!

HTML:

<section id="contact-form">
    <form method="POST" action="#">
        <h3>You can either contact me via these channels or fill in the form below</h3>
        <ul id="contact-list">
            <li>
                <a href="#" target="_blank" rel="noopener" aria-label="Message me on WhatsApp (Open in a new tab)"><i class="fa-brands fa-whatsapp"></i> 
                +1234567890</a>
            </li>
            <li>
                <a href="#" target="_blank" rel="noopener" aria-label="Send me an email (Open in a new tab)"><i class="fa-regular fa-envelope"></i>
                [email protected]</a>
            </li>
        </ul>

        <label for="fname" class="names">First name:</label>
        <label for="lname" class="names">Last name:</label>
        <br>
        <input type="text" name="first-name" id="fname" required>
        <input type="text" name="last-name" id="lname" required>
        <br>
        <label for="email">Email:</label>
        <br>
        <input type="email" name="e-mail" id="email" required>
        <br>
        <label for="message">Your Massage:</label>
        <br>
        <textarea name="user-message" id="message" cols="30" rows="10" placeholder="Your message here ..."></textarea>
    </form>

CSS:

form {
    border: 3px solid #81a97b;
    border-radius: 5px;
    width: 50%;
    margin: 0 auto;
    height: 450px;
    min-width: 320px;
    text-align: center;
    padding: 3em;
}

#contact-list li{
    display: inline-block;
    margin: 20px 12px;
}

#contact-list a{
    color: #4d4d4d;
    font-size: 130%;
}

input, textarea{
    border: 1px solid #ffb30f
}

.names {
    float:left;
    margin-left: 103px;
}

#fname, #lname {
    width: 40%;
    margin: 5px 20px;
}

#email {
    width: 100%;
}

textarea {
    resize: none;
}

I tried display:inline-block; floatl:left, text-align:left; and cant seem to get what I’m have in mind

Tags:

2

Answers


  1. 0

    Make use of css flexbox .

    form {
    border: 3px solid #81a97b;
    border-radius: 5px;
    width: 50%;
    margin: 0 auto;
    /*height: 450px;*/
    min-width: 320px;
    text-align: center;
    padding: 3em;
}

#contact-list li{
    display: inline-block;
    margin: 20px 12px;
}

#contact-list a{
    color: #4d4d4d;
    font-size: 130%;
}

input, textarea{
    border: 1px solid #ffb30f
}

.names {
    float:left;
    margin-left: 103px;
}

#email {
    width: 100%;
}

textarea {
    resize: none;
}

/*Added CSS*/
.set-left{
  width: 100%;
  display: inline-block;
  text-align: left;
}

.flex-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-container>span{
  display: flex;
  flex-direction: column;
  text-align: left;
}

#fname, #lname {
    width: 80%;
}
    <section id="contact-form">
        <form method="POST" action="#">
            <h3>You can either contact me via these channels or fill in the form below</h3>
            <ul id="contact-list">
                <li>
                    <a href="#" target="_blank" rel="noopener"
                        aria-label="Message me on WhatsApp (Open in a new tab)"><i class="fa-brands fa-whatsapp"></i> +1234567890</a>
                </li>
                <li>
                    <a href="#" target="_blank" rel="noopener"
                        aria-label="Send me an email (Open in a new tab)"><i class="fa-regular fa-envelope"></i>
                         [email protected]</a>
                </li>
            </ul>
            <label class="set-left">Name:</label>
            <div class="flex-container">
              <span>
                <input type="text" name="first-name" id="fname" required>
                <label for="fname">First</label>
              </span>
              <span>
                <input type="text" name="last-name" id="lname" required>
                <label for="lname">Last</label>
               </span>
            </div>
            <br>
            <label for="email">Email:</label>
            <br>
            <input type="email" name="e-mail" id="email" required>
            <br>
            <label for="message">Your Massage:</label>
            <br>
            <textarea name="user-message" id="message" cols="30" rows="10" placeholder="Your message here ..."></textarea>
</form>
    Login or Signup to reply.
  2. 0

    I used both Flexbox and Grids in this example. I hope it helps.

    * {
  box-sizing: border-box;
}

form {
  border: 3px solid #81a97b;
  border-radius: 5px;
  width: 50%;
  margin: 0 auto;
  min-width: 320px;
  padding: 2rem;
}

h3 {
  margin-top: 0;
  text-align: center;
}

#contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  justify-content: center;
}

#contact-list a {
  color: #4d4d4d;
  font-size: 130%;
}

.container {
  margin-top: 3rem;
  display: grid; 
  gap: 1rem; 
  grid-template-columns: 1fr 1fr; 
  grid-template-areas:
    "fname lname"
    "email email"
    "message message";
}

label[for='fname'] {
  grid-area: fname;
}
label[for='lname'] {
  grid-area: lname;
}
label[for='email'] {
  grid-area: email;
}
label[for='message'] {
  grid-area: message;
  /* justify-self: center; */
}

label p{
  margin: 0;
}
textarea {
  resize: none;
}
input {
  width: 100%;
}
input, textarea {
  border: 1px solid #ffb30f;
}
      <section id="contact-form">
    <form method="POST" action="#">
      <h3>You can either contact me via these channels or fill in the form below</h3>
      <ul id="contact-list">
        <li>
          <a href="#" target="_blank" rel="noopener" aria-label="Message me on WhatsApp (Open in a new tab)"><i
              class="fa-brands fa-whatsapp"></i> +1234567890</a>
        </li>
        <li>
          <a href="#" target="_blank" rel="noopener" aria-label="Send me an email (Open in a new tab)"><i
              class="fa-regular fa-envelope"></i>
            [email protected]</a>
        </li>
      </ul>

      <div class="container">
        <label for="fname" class="names">
          <input type="text" name="first-name" id="fname" required>
          <p>First name:</p>
        </label>
        <label for="lname" class="names">
          <input type="text" name="last-name" id="lname" required>
          <p>Last name:</p>
        </label>
        <label for="email">
          <p>Email:</p>
          <input type="email" name="e-mail" id="email" required>
        </label>
        <label for="message">
          <p>Your Message:</p>
          <textarea name="user-message" id="message" cols="30" rows="10" placeholder="Your message here ..."></textarea>
        </label>
      </div>

    </form>
  </section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search