Contact form text area enters and scrolling - html

Question

Hello im building my wordpress site, and used contact form to build contact form. I have few questions.
Text in text area is one line, and when i click ENTER contact form try to send form. How to enable enters?
How to enable scrolling in text area?
When i typing text, only big letters appear, like when i using caps-lock, how to enable small letters also?
/*contact*/
.one-half,
.one-third {
position: relative;
margin-right: 4%;
float: left;
margin-bottom: 20px;
}
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.last {
margin-right: 0 !important;
clear: right;
}
#media only screen and (max-width: 767px) {
.one-half, .one-third {
width: 100%;
margin-right: 0;
}
}
#name-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px
}
#mail-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px
}
#phone-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px;
}
#text-form {
background:0 0;
border:none;
width:100%;
border-bottom:2px solid #FFFFFF;
text-transform:uppercase;
font-weight:900;
padding-bottom:10px;
font-family: Josefin Sans, sans-serif;
margin-bottom:58px;
font-size:14px;
height:100px;
}
::placeholder {
color: white;
font-weight:900;
font-size: 15px;
font-family: Josefin Sans, sans-serif;
}
.wpcf7-form > p {
color: #FFFFFF;
font-family: Open Sans, sans-serif;
font-weight:900;
font-size: 15px;
}
.wpcf7-form input, .wpcf7-form textarea {
font-weight:900;
font-size: 15px;
color: #FFFFFF;
width: 100%;
font-family: Josefin Sans, sans-serif;
}
.wpcf7-form textarea {
font-weight:900;
font-size: 15px;
color: #FFFFFF;
font-family: Josefin Sans, sans-serif;
}
<div class="one-third">
[text* text-757 id:name-form placeholder "IMIĘ"]
</div>
<div class="one-third">
[tel tel-789 id:phone-form placeholder "TELEFON"]
</div>
<div class="one-third last">
[email* email-910 id:mail-form placeholder "E-MAIL"]
</div>
[text* text-757 id:text-form placeholder "WIADOMOŚĆ"]
[submit "Wyślij"]
I am newbie in coding so please be forgiving :)

Answer 1

You need to use <textarea> instead of <input type="text">.
You are also setting text-transform:uppercase; in the styles which will make all of the text uppercase. Remove that and it should fix your third problem.