Kevin Powell - Community•13mo ago

Need some help with my form

Hi guys anyone got an idea why my form is not getting the result it has in the picture, text area is not getting how it should be My code: https://codepen.io/Boeroe/pen/oNmzBBg

Boeroe

CodePen

oNmzBBg

...

11 Replies

13eck•13mo ago

Check your HTML, line 25 in the codepen:

<div class="textarea-field"></div>
    <textarea name="" id="" cols="30" rows="10" placeholder="Your Message" required></textarea>
    <span class="focus"></span>

<div class="textarea-field"></div>
    <textarea name="" id="" cols="30" rows="10" placeholder="Your Message" required></textarea>
    <span class="focus"></span>

You're closing the .textarea-field and the textarea is outside the div, so your (extremely specific) CSS isn't applying to the element. And what's with all the position: relative going on? Those aren't needed if you're using flexbox :p

BoeroeOP•13mo ago

I deleted the positions yes, sometimes i can't find the errors anymore after coding for too long lmao, knew it was something simple. How can i makes sure my textarea is as long as the boxes. Also when my screen is getting smaller its getting like the second picture so not really responsive. Should i use shrink to make it work better?

13eck•13mo ago

I'm working on that right now 😉 Ok, after some serious surgery, this is what I came up with:

<section class="contact" id="contact"> 
  <h2 class="heading">Contact <span>Me!</span></h2>
  <form action="#">
    <div class="input-box">
        <input type="text" placeholder="Full Name" required>
        <input type="text" placeholder="Email Address" required>
        <input type="number" placeholder="Mobile Number">
        <input type="text" placeholder="Email Subject" required>
      <textarea placeholder="Your Message" required></textarea>
    </div>
  </form>
</section>

<section class="contact" id="contact"> 
  <h2 class="heading">Contact <span>Me!</span></h2>
  <form action="#">
    <div class="input-box">
        <input type="text" placeholder="Full Name" required>
        <input type="text" placeholder="Email Address" required>
        <input type="number" placeholder="Mobile Number">
        <input type="text" placeholder="Email Subject" required>
      <textarea placeholder="Your Message" required></textarea>
    </div>
  </form>
</section>

body { 
  background-color: rgb(52, 0, 84);
  margin: 0;
  font-family: 'Glory', sans-serif;
  box-sizing: border-box;
}

form {
  width: min(100% - 4em, 50em);
  margin-inline: auto;
}

form .input-box {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.input-box > input {
  flex-basis: 40%;
  flex-shrink: 1;
  flex-grow: 1;
}

.input-box > textarea {
  flex-basis: 100%;
  flex-shrink: 1;
  flex-grow: 1;
  height: 10em;
}

.input-box input,
.input-box > textarea {
  padding: 1.5rem;
  font-size: 1.3rem;
  color: white;
  background: transparent;
  border-radius: .6rem;
  border: .2rem solid orange;
}

body { 
  background-color: rgb(52, 0, 84);
  margin: 0;
  font-family: 'Glory', sans-serif;
  box-sizing: border-box;
}

form {
  width: min(100% - 4em, 50em);
  margin-inline: auto;
}

form .input-box {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.input-box > input {
  flex-basis: 40%;
  flex-shrink: 1;
  flex-grow: 1;
}

.input-box > textarea {
  flex-basis: 100%;
  flex-shrink: 1;
  flex-grow: 1;
  height: 10em;
}

.input-box input,
.input-box > textarea {
  padding: 1.5rem;
  font-size: 1.3rem;
  color: white;
  background: transparent;
  border-radius: .6rem;
  border: .2rem solid orange;
}

Basically what I did was: * Redo the CSS selectors—yours were overly specific * put the textarea height in the CSS instead of in the HTML * Collapsed the form inputs into one parent container * Changed your width to a CSS min() function so there's always at least 2em of margin on the left and right * flex-basis…flex-grow…flex-shrink FTW! (though that could be a flex: 1 1 40%; using the shorthand…)

BoeroeOP•13mo ago

This looks way better and seems way faster to do this! Ty! One last question where should i add color: white; to make the placeholder text white

13eck•13mo ago

Add this pretty much anywhere in your CSS file:

*::placeholder {
  color: white;
}

*::placeholder {
  color: white;
}

That will target all placeholders on the page and (according to MDN) that pseudo-element only appears on input and textarea elements, so you shouldn't have any issues with it messing up other elements! Might also want to add font-family: sans-serif; to .input-box > textarea so it's not mono-space font :p

BoeroeOP•13mo ago

Thank you so much! The form is in the body why doesnt it just take the body font i used? Just wondering Also my btn is not going in the center, not with justify not with align, i can get it with margin-left only then its not responsive when i make the screen smaller .btn { display: inline-block; margin-top: 2rem; text-decoration: none; padding: 1.2rem 2.8rem; background: orange; border-radius: .6rem; box-shadow: 0 .2rem .5rem rgb(25, 25, 25); font-size: 1.3rem; color: white; font-weight: 600; border: .2rem solid transparent; transition: .6 ease; }
.btn:hover { background: transparent; color: orange; border-color: orange; } Also my <span class="focus"></span> is gone, can i add that just under <textarea placeholder="Your Message" required></textarea> in your code to have the same result?

13eck•13mo ago

It's because textarea is what's called a replaced element:

In CSS, a replaced element is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model. Put in simpler terms, they're elements whose contents are not affected by the current document's styles.

I removed the focus spans b/c they didn't do anything in the codepen you shared. If you want them added back in (what are they used for?) there's a bit more code that needs be added Not sure what you're doing with the button since there's no button in the code you shared. If you edit your codepen (or share a new one) I can have a look

BoeroeOP•13mo ago

https://codepen.io/Boeroe/pen/oNmzBBg there you go, updated with button, my fault. What i try to make with the span is some effects on the form see attachment

Boeroe

CodePen

oNmzBBg

...

BoeroeOP•13mo ago

@thevanilla13eck any idea?

13eck•13mo ago

Sorry, in the middle of a move and not gonna be near my computer for a while

BoeroeOP•13mo ago

Thats okay, fixed the button wil wait patiently for the span feedback. Good luck with moving!

Gaming

Programming

Need some help with my form