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

ɡɩλ✿ßảσ︵²ᵏ⁶ : Viết Blog Truyền Thông, Thiết Kế Đồ Họa Quảng Cáo, Làm Video Marketing.

Quảng bá sản phẩm Thớt Gỗ

Giới thiệu công ty cung cấp, ván ghép theo yêu cầu , tới các doanh nghiệp chuyên sản xuất đồ gỗ nội thất, mộc gia dụng & đơn vị chuyên thi công lắp đặt Nhà Gỗ.

Thông Điệp : Vật Liệu Xanh, Bảo Vệ Môi Trường.

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 :

🦊 1 Phút Dành Cho Quảng Cáo 🦊

Flagship, giá hời, đời cũ, cấu hình ngon, xem phim, chơi game, nghe nhạc cực đã. :

+ Iphone 11 : Xem Tại Đây
+ Iphone 12 : Xem Tại Đây
+ Iphone 13 : Xem Tại Đây

+ Samsung Galaxy S20 FE : Xem Tại Đây
+ Samsung Galaxy S22 Ultra 5G : Xem Tại Đây

+ Vivo V23 5G 8GB/128GB : Xem Tại Đây
+ Vivo V25e 4G 8GB/128GB : Xem Tại Đây

+ Redmi Note 11 Pro 5G : Xem Tại Đây
+ Xiaomi 12 Pro : Xem Tại Đây

Điện Thoại Giá Rẻ, Chạy Grab, Tài Xế Công Nghệ :

+ Poco M4 Pro : Xem Tại Đây
+ Oppo A54 : Xem Tại Đây
+ Xiaomi Redmi Note 11 : Xem Tại Đây
+ Samsung Galaxy A23 : Xem Tại Đây

Smartphone Gaming Giá Rẻ, Tải App Kiếm Tiền Online, Cài Đặt Ứng Dụng Học Tập, Giải Trí, Xem Phim Nghe Nhạc, Chơi Game Online, :

+ Tecno Poca 3 : Xem Tại Đây
+ Realme narzo 50i Prime : Xem Tại Đây