How to create a layout similar to this design with CSS? - Html

Sanguinarias
April 10, 2023
166 views
1 vote
2 Answers

I’m trying to create my website to show my work, and I’m creating a "Contact Me" form. Now, I’m focusing on the aspect of it. I made a design of what it should look like, but last time I worked with HTML and CSS was like 8 years ago.

Here is the design:
The design

Here is the actual result:
The result right now

/* ---------- Footer ---------- */

#contact {
    margin: 10vh auto;
    max-width: 1800px;
    width: 90%;
    padding: 2%;
    border-radius: 10px;
}

.contact-highlight {
    font-size: 1.5em;
}

.form-element {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-component {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    border-radius: 5px;
    border: none;
    background-color: #DAD8DD;
    color: #0D0221;
    width: 25vw;
    height: 5vh;
}

.form-text-area {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    border-radius: 5px;
    border: none;
    background-color: #DAD8DD;
    color: #0D0221;
    width: 25vw;
    height: 20vh;
}

.form-submit {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    border-radius: 10px;
    border: none;
    background-color: #F50056;
    color: #ffffff;
    font-size: 1em;
    width: 10vw;
    height: 5vh;
}

.footer-text {
    color: #ffffff;
    text-align: center;
}

<!-- The page's footer. -->
    <footer>

        <!-- The contact infos. -->
        <div id="contact" class="white-section">

            <!-- Contact text. -->
            <p class="highlight contact-highlight">Si vous aimez mes travaux ou souhaitez simplement me contacter,</p>
            <p>vous pouvez remplir ce formulaire. Je vous répondrais aussi vite que possible !</p>

            <!-- Contact form. -->
            <form class="form-element" action="php/contact.php" method="post">

                <p>Prénom-Nom<em class="highlight">*</em></p>
                <input class="form-component" type="text" name="name" autocomplete="off" required>

                <p>Email<em class="highlight">*</em></p>
                <input class="form-component" type="email" name="email" autocomplete="off" required>

                <p>Objet<em class="highlight">*</em></p>
                <input class="form-component" type="text" name="subject" autocomplete="off" required>

                <p>Message<em class="highlight">*</em></p>
                <textarea class="form-text-area" name="message" autocomplete="off" required></textarea>

                <input class="form-submit" type="submit" value="Send">

            </form>

        </div>

        <!-- Footer credits. -->
        <p class="footer-text">© Basset Etienne | All rights reserved.</p>
    </footer>

I already used "CSS grid" to create the Projects part, and I understand how "display: flex" works, but I don’t know how to approach this problem. I tried to check online for a way to put elements in a certain order, but I’m afraid it would be a pain to put it responsive.

Answers

- VitorLacerda
- April 10, 2023 at 8:07 pm
- 0 votes
0
I would do like this:
Inside the form put a div to be a flexbox container, then put two other divs, one for the name, email and object fields and the other for the message field

Login or Signup to reply.

display: grid is what you need.

By observation, we can see that our grid have four rows and two columns, as visualized below (not to scale):

┌───────────┬───────────────┐
│ Input:    │ Textarea:     │
│ ┌───────┐ │ ┌───────────┐ │
│ └───────┘ │ │           │ │
├───────────┤ │           │ │
│ Input:    │ │           │ │
│ ┌───────┐ │ │           │ │
│ └───────┘ │ │           │ │
├───────────┤ │           │ │
│ Input:    │ │           │ │
│ ┌───────┐ │ │           │ │
│ └───────┘ │ └───────────┘ │
├───────────┴───────────────┤
│        ┌─────────┐        │
│        │ Button  │        │
│        └─────────┘        │
└───────────────────────────┘

This can be translated to HTML and CSS as (simplified for ease of explanation):

<div id="contact">
  <form class="form-element">

    <!-- Use <label> to mark a field instead of <div> -->
    <label class="form-field">
      <span>Prénom-Nom</span>
      <input type="text" required>
    </label>

    <label class="form-field">
      <span>Email</span>
      <input type="email" required>
    </label>

    <label class="form-field">
      <span>Objet</span>
      <input type="text" required>
    </label>

    <label class="form-field">
      <span>Message</span>
      <textarea name="message" required></textarea>
    </label>

    <div class="form-field">
      <input type="submit" value="Send">
    </div>
  </form>
</div>

.form-element {
  display: grid;
  /* Four rows with the same height. */
  grid-template-rows: repeat(4, 1fr);
  /* The right column is twice as wide as the left one. */
  grid-template-columns: 1fr 2fr;
}

The message box lies on the second column and span 3 rows, while the submit field span both columns. We specify that in our CSS as well:

.form-field:has([name="message"]) {
  grid-row: 1 / span 3; /* Starts at row 1, span 3 rows */
  grid-column: 2; /* Starts at column 2, span 1 by default */
}

.form-field:has([type="submit"]) {
  grid-row: 4; /* Starts at row 4, span 1 by default */
  grid-column: 1 / -1; /* Starts at column 1, span through the last column */
  /* or 1 / 3, 1 / span 2 */
}

Try it:

.form-element {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: 1fr 2fr;
  gap: 1em 2em;
}

.form-field:has([name="message"]) {
  grid-row: 1 / span 3;
  grid-column: 2;
}

.form-field:has([type="submit"]) {
  grid-row: 4;
  grid-column: 1 / -1;
}


/* Demo only */

#contact {
  margin: 1em auto;
  width: min(90%, 1000px);
  font-family: system-ui;
}

.form-element > .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.form-element > .form-field > span:has(+ :required)::after {
  content: '*';
  color: #f20b62;
}

.form-component,
.form-text-area {
  border: none;
  border-radius: 5px;
  background-color: #dad8dd;
  color: #0d0221;
}

.form-component,
.form-submit {
  padding: 0.5em 1em;
}

.form-text-area {
  flex: 1;
  padding: 1em;
  resize: none;
}

.form-submit {
  align-self: center;
  border: none;
  border-radius: 10px;
  background-color: #f50056;
  color: #fff;
  font-size: 1em;
}

<footer>
  <div id="contact">
    <form class="form-element">

      <label class="form-field">
        <span>Prénom-Nom</span>
        <input class="form-component" type="text" autocomplete="off" required>
      </label>

      <label class="form-field">
        <span>Email</span>
        <input class="form-component" type="email" autocomplete="off" required>
      </label>

      <label class="form-field">
        <span>Objet</span>
        <input class="form-component" type="text" autocomplete="off" required>
      </label>

      <label class="form-field">
        <span>Message</span>
        <textarea class="form-text-area" name="message" autocomplete="off" required></textarea>
      </label>

      <div class="form-field">
        <input class="form-submit" type="submit" value="Send">
      </div>
    </form>
  </div>
</footer>

Please signup or login to give your own answer.

Click here to cancel reply.

How to create a layout similar to this design with CSS? – Html

Answers