Create Message Form With HTML And CSS




Its features:

  • You can attach more information lines as needed.

  • You can change the model color via CSS if you want.

  • It is completly responsive account form.

  • You can use different type font styles as you wish.

Try to create like yourself by following the codes below :

Step 1) Add to head : <link href='https://fonts.googleapis.com/css?family=Belgrano' rel='stylesheet'>
Step 2) Add to html : <h2>Create Message Form With HTML And CSS</h2> <div class="fifteen"> <form class="form-style" action="" method="post"> <div class="sixteen"> <label for="field1"> <span>Enter Your Name</span><input type="text" name="field1" required="true" /> </label> <label for="field2"> <span>Email Address</span><input type="email" name="field2" required="true" /> </label> <label for="field3"> <span>Short Subject</span><input type="text" name="field3" required="true" /> </label> <label for="field4"> <span>Message to Us</span><textarea name="field4" onkeyup="adjust_textarea(this)" required="true"></textarea> </label> <label> <span> </span><input type="submit" value="Send Message" /> </label> </div> </form> </div>
Step 3) Add to css : .fifteen{ width: 545px; height:260px; margin:0 auto; display: flex; justify-content: center; align-items: center; border-radius:10px; background:linear-gradient(#d2c447,#a98804,#d2c447); float:; } .form-style{ width: 510px; height:225px; font-size: 16px; margin:0 auto; background:linear-gradient(#a98804,#c6af31,#a98804); border-radius:10px; } .sixteen{ margin-top:30px; margin-left:30px; } .form-style input[type=submit], .form-style input[type=button], .form-style input[type=text], .form-style input[type=email], .form-style textarea, .form-style label { font-family: 'Belgrano';font-size: 16px; color:black; } .form-style label { display:block; margin-bottom: 10px; } .form-style label > span{ display: inline-block; float: left; width: 150px; } .form-style input[type=text], .form-style input[type=email] { background: transparent; border: none; border-bottom: 1px dashed black; width: 275px; outline: none; padding: 0px 0px 0px 0px; font-style: italic; } .form-style textarea{ font-style: italic; padding: 0px 0px 0px 0px; background: transparent; outline: none; border: none; border-bottom: 1px dashed black; width: 275px; overflow: hidden; resize:none; height:20px; } .form-style textarea:focus, .form-style input[type=text]:focus, .form-style input[type=email]:focus, .form-style input[type=email] :focus { border-bottom: 1px dashed #D9FFA9; } .form-style input[type=submit], .form-style input[type=button]{ background:black; border: none; padding: 8px 10px 8px 10px; border-radius: 5px; color:white; } .form-style input[type=submit]:hover, .form-style input[type=button]:hover{ background: #394D61; }
Step 4) Add to script : <script type="text/javascript"> function adjust_textarea(h) { h.style.height = "20px"; h.style.height = (h.scrollHeight)+"px"; } </script>

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.