Iklan

›
Home  ›  Design Web

Membuat Halaman Contact Form CSS By DoNz

Membuat Halaman Contact Form CSS – Contact form adalah formulir yang bertujuan untuk mengirimkan pesan dengan melalui formulir yang sudah di sediakan oleh website masing-masing. Contact form juga sangat berguna bagi seluruh website dikarenakan contact form yang ada di website akan memudahkan visitor atau pengunjung untuk mengirimkan pesan kepada pembuat atau pemilik websitenya sendiri.

Mungkin saya kali ini akan memberikan template contact form dengan secara gratis alias free tentunya untuk kalian semua, untuk fitur-fitur contact form template ini cukup sangat bagus dan cukup sangat simple bagi yang mau menggunakannya.
Fitur-fitur Contact Form Template :
  1. Responsive
  2. Google Maps
  3. Footer dengan Icon Social Media
  4. Informasi Kontak dan Alamat
  5. Tedapat shadow di bagian form, maps, dan icon kontak
Untuk kalian yang ingin menggunakannya kalian bisa ambil code di bawah ini. Buat file HTML dan pastekan kode dibawah ini,
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Contact Form | Codelatte.org</title>
  5. <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  6. <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  7. <link rel="stylesheet" type="text/css" href="css/form.css">
  8. <link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
  9. <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  10. </head>
  11. <body>
  12. <center>
  13. <h1 style="font-family: 'Teko', sans-serif; font-size: 70px;">Contact Form By DoNz | Codelatte.org</h1>
  14. </center>
  15. <div class="my-5"></div>
  16. <div id="particles-js">
  17. <section class="container">
  18. <p class="pb-4"></p>
  19. <div class="row">
  20. <div class="col-lg-5 mb-4">
  21. <div class="card">
  22. <div class="card-header p-0">
  23. <div class="bg">
  24. <h3><i class="fa fa-envelope"></i> Contact Us :</h3>
  25. <p class="m-0">We'll write rarely, but only the best content.</p>
  26. </div>
  27. </div>
  28. <div class="card-body p-3">
  29. <div class="form-group">
  30. <label><i class="fa fa-user text-primary"></i> Your name</label>
  31. <div class="input-group">
  32. <div class="input-group-addon rounded-2"></div>
  33. <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
  34. </div>
  35. </div>
  36. <div class="form-group">
  37. <label><i class="fa fa-envelope text-primary"></i> Your email</label>
  38. <div class="input-group mb-2 mb-sm-0">
  39. <div class="input-group-addon"></div>
  40. <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
  41. </div>
  42. </div>
  43. <div class="form-group">
  44. <label><i class="fa fa-tag prefix text-primary"></i> Service</label>
  45. <div class="input-group mb-2 mb-sm-0">
  46. <div class="input-group-addon"></div>
  47. <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
  48. </div>
  49. </div>
  50. <div class="form-group">
  51. <label><i class="fa fa-pencil text-primary"></i> Message</label>
  52. <div class="input-group mb-2 mb-sm-0">
  53. <div class="input-group-addon"></div>
  54. <textarea class="form-control" placeholder="Message"></textarea>
  55. </div>
  56. </div>
  58. <div class="text-center">
  59. <button class="btn btn-block rounded-0 py-2"><i class="fa fa-paper-plane"></i> Submit</button>
  60. </div>
  62. </div>
  64. </div>
  65. </div>
  66. <div class="col-lg-7">
  67. <div class="mb-4">
  68. </div>
  69. <div class="row text-center">
  70. <div class="col-md-4">
  71. <a class="icon px-3 py-2 rounded text-white mb-2 d-inline-block"><i class="fa fa-map-marker"></i></a>
  72. <p>Purwadadi Timur,Subang<br> Indonesia</p>
  73. </div>
  74. <div class="col-md-4">
  75. <a class="icon px-3 py-2 rounded text-white mb-2 d-inline-block"><i class="fa fa-phone"></i></a>
  76. <p>+ 01 234 567 89, <br> Mon - Fri, 8:00-22:00</p>
  77. </div>
  78. <div class="col-md-4">
  79. <a class="icon px-3 py-2 rounded text-white mb-2 d-inline-block"><i class="fa fa-envelope"></i></a>
  80. <p>info@gmail.com <br> sale@gmail.com</p>
  81. </div>
  82. </div>
  83. <div id="maps" class="col-lg-7">
  84. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1178.6708338625388!2d107.69161632595083!3d-6.450449318836345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e693feb3c8669ed%3A0xe1b5235884b5e5ae!2sAl+Mu&#39;awwanah!5e0!3m2!1sid!2sid!4v1532890413014" width="600" height="350" frameborder="0" style="border:0; border-radius: 6px; box-shadow: 2px 2px 4px black;" allowfullscreen></iframe>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </section>
  91. <footer class="footer bg-dark text-white">
  92. <div class="bg">
  93. <div class="container">
  94. <div class="row py-4">
  95. <div class="col-md-6 col-lg-7">
  96. <h4 class="mb-0 white-text">Get connected with us on social networks!</h4>
  97. </div>
  98. <div class="col-md-6 col-lg-5 text-right">
  99. <a title="facebook" href="#"><i id="icon" class="fa fa-facebook-square white-text mr-lg-4 fa-2x"> </i></a>
  100. <a title="twitter" href="#"><i id="icon" class="fa fa-twitter-square white-text mr-lg-4 fa-2x"> </i></a>
  101. <a title="Google Plus" href="#"><i id="icon" class="fa fa-google-plus-square white-text mr-lg-4 fa-2x"> </i></a>
  102. <a title="linkedin" href="#"><i id="icon" class="fa fa-linkedin-square white-text mr-lg-4 fa-2x"> </i></a>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </footer>
  108. <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" charset="utf-8"></script>
  109. <script type="text/javascript">
  110. particlesJS.load('particles-js','particles.json', function() {
  111. console.log('particles.json loaded...');
  112. })
  113. </body>
  114. </html>
  1. @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css');
  2. body {
  3. background-color: #00a3aa;
  4. background-repeat: no-repeat;
  5. }
  6. .btn {
  7. background-color: #50677b;
  8. color: white;
  9. }
  10. .btn:hover {
  11. background-color: #666666;
  12. color: white;
  13. }
  14. .card {
  15. box-shadow: 2px 2px 4px black;
  16. background-color: #464646;
  17. color: white;
  18. border-radius: 6px;
  19. }
  20. .bg {
  21. background-color: #50677b;
  22. text-align: center;
  23. border-top-right-radius: 6px;
  24. border-top-left-radius: 6px;
  25. }
  26. .icon {
  27. background-color: #50677b;
  28. color: white;
  29. box-shadow: 2px 2px 4px black;
  30. }
  31. .bg-dark {
  32. background-color: #343a40;
  33. }
  34. #icon:hover {
  35. color: black;
  36. transition: 2px;
  37. }
  38. #icon {
  39. color: white;
  40. }
  41. #maps {
  42. width: 200px;
  43. }
Mungkin itu saja semoga bermanfaat buat kalian dan jangan lupa untuk share kepada teman-teman kalian jika menurut kalian artikel ini bermanfaat buat semuanya.

Article Top Ads

Central Ads Article 1

Middle Ads Article 2

Article Bottom Ads