Share code tạo form html đẹp dành cho blogspot

Kỳ trước Gia Bảo đã chia sẻ cách tạo form đăng ký, liên hệ cho blogspot bằng cách sử dụng google form. Trong nội dung bài viết lần này Gia Bảo chia sẻ code html tạo mẫu form đẹp  dành cho các bạn làm web tìm kiếm thành viên tham gia, đăng ký khoá học, like trang fanpage, subscribe kênh youtube, login,  sign up, submit, like share các kiểu,...

Form là thành phần quan trọng trên website giúp kết nối chủ web với các thành viên và độc giả yêu thích nội dung trên blog/web của bạn.

Để thiết kế blogspot đẹp, đầy đủ các loại tiện ích hỗ trợ người dùng tạo sợi dây kết nối giữa chủ sở hữu web/blog không thể thiếu tiện ích blogspot mang nhiều tên gọi khác nhau như form đăng ký, form subscribe, form like fanpage, form share video youtube,.... Và có tên gọi chung là form blogspot được thiết kế bằng bộ 3 code cơ bản làm nên trang giao diện html đẹp , chuẩn ui ux vô cùng ấn tượng trên website của bạn.

Sau đây là bộ sưu tập code css , html tạo  form đẹp mắt giúp bạn gây ấn tượng với người xem, thông qua đó thuyết phục người dùng điền thông tin mà bạn mong muốn trực tiếp trên form, sau đó nhấn nút và gửi nó đến email của bạn.

💥 Mẫu Form đăng ký màu tím đẹp ngất ngây con gà tây.

<!--Glassmorphic Sign in Form-->

<link href="https://cdn.shopify.com/s/files/1/2027/2569/files/Ads-Blogspot-Form-Glassmorphic-Sign-in.css?v=1636270416" rel="stylesheet">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">


<div class="container">
  <form >
    <p>Welcome</p>
    <input type="email" placeholder="Email"><br>
    <input type="password" placeholder="Password"><br>
    <input type="button" value="Sign in"><br>
    <a href="#">Forgot Password?</a>
  </form>

  <div class="drops">
    <div class="drop drop-1"></div>
    <div class="drop drop-2"></div>
    <div class="drop drop-3"></div>
    <div class="drop drop-4"></div>
    <div class="drop drop-5"></div>
  </div>
</div>
<!--End Glassmorphic Sign in Form-->

Minh Họa Form :

 

 

  💥 Mẫu Form đăng ký thiết kế hiện đại

<!--Form  Slicing Design Subcribe Modal--> 
<link href="https://cdn.shopify.com/s/files/1/2027/2569/files/Ads-Blogspot-Form-Slicing-Design-Subcribe-Modal.css?v=1636270778" rel="stylesheet">
   
<div class="container">
    <div class="container-close">&times;</div>
    <img
      src="https://images.unsplash.com/photo-1534670007418-fbb7f6cf32c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
      alt="image">
    <div class="container-text">
      <h2>Ideas and UI components in your <br>inbox</h2>
      <p>Sign up to receive ideas, free <br> components and free resources plus 15% on all of our <br> pro UI kits.</p>
      <input type="email" placeholder="Email address">
      <button type="submit">Subscribe</button>
      <span>No spams included</span>
    </div>
  </div> 
<!--End Form Slicing Design Subcribe Modal--> 

 Minh họa Form :

  💥 Mẫu Form đăng ký màu đen sang chảnh :

<!--Daily UI 001 Sign Up Form-->

<link href="https://cdn.shopify.com/s/files/1/2027/2569/files/Ads-Blogspot-Form-Daily-UI-001-Sign-Up.css?v=1636272174" rel="stylesheet">

<script src='https://cdn.shopify.com/s/files/1/2027/2569/files/Ads-Blogspot-Form-Daily-UI-001-Sign-Up.js?v=1636272310' type='text/javascript'></script>


<div class="signupSection">
  <div class="info">
    <h2>Mission to Deep Space</h2>
    <i class="icon ion-ios-ionic-outline" aria-hidden="true"></i>
    <p>The Future Is Here</p>
  </div>
  <form action="#" method="POST" class="signupForm" name="signupform">
    <h2>Sign Up</h2>
    <ul class="noBullet">
      <li>
        <label for="username"></label>
        <input type="text" class="inputFields" id="username" name="username" placeholder="Username" value="" oninput="return userNameValidation(this.value)" required/>
      </li>
      <li>
        <label for="password"></label>
        <input type="password" class="inputFields" id="password" name="password" placeholder="Password" value="" oninput="return passwordValidation(this.value)" required/>
      </li>
      <li>
        <label for="email"></label>
        <input type="email" class="inputFields" id="email" name="email" placeholder="Email" value="" required/>
      </li>
      <li id="center-btn">
        <input type="submit" id="join-btn" name="join" alt="Join" value="Join">
      </li>
    </ul>
  </form>
</div>
<!--End Daily UI 001 Sign Up Form-->

Minh họa Form :