Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger

Diễn Đàn Tuổi Trẻ Việt Nam

Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.
Diễn Đàn Tuổi Trẻ Việt Nam

Diễn Đàn Tuổi Trẻ Việt Nam


    Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger

    minhthanh
    minhthanh
    Super Moderator
    Super Moderator

    Tiền : 0
    Tổng số bài gửi : 26
    Join date : 10/07/2015

    Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger Empty Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger

    Bài gửi by minhthanh Sat Sep 17, 2022 2:01 pm

    Biểu mẫu liên hệ/ Contact Form được tạo ra mặc định thường nằm ở cột Sitebar hoặc là Footer, đó là đều bất tiện trong việc bố trí giao diện đặc biệt hơn nó không thể hiện tính chuyên nghiệp của một blogger.

    Hôm nay windows2it sẽ giới thiệu cho bạn một vài biểu mẫu đẹp để cho bạn lựa chọn. Đây là một tiện ích thủ thuật blog cực kỳ hay, tạo sự chuyên nghiệp cho blog của bạn ngay từ cái nhìn đầu tiên. Bắt đầu thực hiện đi nhé!

               Đọc thêm:

    ● Thêm nút Share trượt dọc cho Blogspot Pro Vesrion 2 

    ● Thêm Pop Out Chat Box (Cbox) cho Blogspot (Blogger) 

    [size=17]● Tạo Sitemap (sơ đồ) cho Blogspot theo phong cách chuyên nghiệp 
    [/size]




    Tạo ra một biểu mẫu liên hệ/ Contact Form điều trải qua một bước chung:

    Bước 1: Blog => Bố cục => Thêm tiện ích => Tiện ích khác => Biểu mẫu liên hệ => Lưu lại

    Bước 2: Tới Mẫu => Chỉnh sửa HTML => Tìn tới id=‘ContactForm1’, bấm vào dấu … mở rộng hết ra và xóa các phần mình đã bôi đỏ đi. (Bước này thực hiện nhằm xóa bỏ Biểu mẫu liên hệ mặc định của blogger tạo ra)




    if cond='data:title != ""'>


    if>









    *




    *












      
    Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger Demo
    Biểu mẫu 2:

    Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger 123tailieufree.com_windows.com

    Bước 4.1: Bạn cũng vào Blog => Mẫu = > Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F và tìm kiếm ]]> và chèn đoạn mã CSS sau đây ở trên ]]>. Sau đó Lưu lại là xong!


    /* CUSTOM CONTACT FORM BY XOMISSE */
    .contact-form-widget {
    width: 500px; /* CHANGE WIDTH OF CONTAINER */
    max-width: 100%;
    padding: 10px;
    background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */
    color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */
    border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */
    margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */
    }

    .contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; /* CHANGE WIDTH OF FORM ENTRIES */ }

    .contact-form-button-submit {
    border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */
    background: #EEEEEE; /* CHANGE BACKGROUND COLOR OF SEND BUTTON */
    color: #333333; /* CHANGE TEXT COLOR OF SEND BUTTON */
    width: 30%; /* CHANGE WIDTH OF SEND BUTTON */
    margin: 10px 0px;
    }

    .contact-form-button-submit:hover{
    border: 1px solid #999999; /* CHANGE BORDER OF HOVER SEND BUTTON */
    background: #666666; /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */
    color: #FFFFFF; /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */
    }

    .contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */}
    .contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */}
    .contact-form-cross {margin-left: 5px !important;}

    .contact-form-error-message-with-border {
    background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */
    border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */
    bottom: 0;
    box-shadow: none;
    color: #666; /* CHANGE TEXT COLOR OF ERROR MSG */
    font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */
    padding: 5px;
    font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */
    text-align: center;
    }

    /* END CUSTOM CONTACT FORM BY XOMISSE */  




    Bước 4.2: Cũng làm tượng tự Blog => Trang => Trang mới => HTML => Và copy đoạn mã code dưới đây vào trong HTML => Xuất bản!






    Name:



    E-mail: *



    Message: *









      

    Tạo biểu mẫu liên hệ/ Contact Form cho Blogspot Blogger Demo
    Kết luận:

    - Biểu mẫu trong Blog chỉ chứa 3 mục Tên, Địa chỉ email liên hệ và Nội dung, có một số bạn lại thêm Tiêu đề hay Số điện thoại liên các mục này sẽ không gửi đi được đâu thêm vô cũng bằng thừa trừ khi bạn có Hosting riêng.

    - Các Biểu mẫu liên hệ trên đều có đoạn CSS riêng nên bạn có thể sửa đổi theo ý muốn của bạn (sẽ không ảnh hưởng CSS trong template của bạn).

    - Nếu bạn không hiểu vấn đề gì hãy để lại comment bên dưới để windows2it kịp thời giải đáp cho bạn.


    minhthanh

      LIKEDISLIKE
      Hôm nay: Thu Jul 25, 2024 10:46 am

      }Diễn đàn TuoitreCAND Powered by FM®Bản quyền © 2014 TuoitreCAND, All rights reserved.Phiên bản website đang chạy thử nghiệm và chờ giấy phép mạng xã hội do Bộ thông tin truyền thông cấp phép.Hiển thị tốt nhất với trình duyệt Firefox và Google Chrome và độ phân giải 1024x768.

      Đặt quảng cáo của bạn ở đây
      Liên hệ: E-Mail: tuoitrecandvn@gmail.com
      Điện thoại:
      Giá thoả thuận
      Kích thước thỏa thuận

      ----LIKEDISLIKE