Đăng bởi Huy Tập lúc 28/10/2016 0

Hướng dẫn tạo Form liên hệ từ google biểu mẫu:
Form biểu mẫu google hiện nay được các bạn làm blogger sử dụng khá nhiều làm form liên hệ, form thông tin nhận tài liệu khách hàng , ...
Sau đây mình hướng dẫn qua cho  những bạn chưa biết tạo biểu mẫu google:
Đầu tiên các bạn vào https://drive.google.com/drive/my-drive => Đăng nhập tài khoản Google => Làm theo các bước sau:

Tạo Form liên hệ từ google biểu mẫu
Tạo Form liên hệ từ google biểu mẫu

Bước tiếp theo sẽ hiển thị ra 1 cửa sổ để bạn tạo các trường như họ tên, số điện thoại, email, ... theo ý các bạn:
tạo các trường như họ tên, số điện thoại, email  trong google biểu mẫu
tạo các trường như họ tên, số điện thoại, email  trong google biểu mẫu
Tiếp theo bạn click vào Gửi để hoàn tất việc tạo form liên hệ
Hoàn tất tạo form liên hệ từ google biểu mẫu
Hoàn tất tạo form liên hệ từ google biểu mẫu
Ở đây các bạn chú ý đến 3 cách chia sẻ mà google tạo ra cho chúng ta:
  1. Gửi mail cho 1 người cụ thể
  2. Chia sẻ link form liên hệ
  3. Tạo ra mã nhúng để dán trực tiếp vào vị trí muốn hiển thị form liên hệ trong blog các bạn
Ở đây để tùy biến form biểu mẫu liên hệ từ google form được đẹp mắt tôi sử dụng kiểu chia sẻ thứ 2 là link form liên hệ, xem tiếp ..

Tùy biến Form liên hệ từ Google biểu mẫu:
Như ở trên đã giới thiệu ở trên, google sẽ tạo ra 1 link liên hệ dạng:
https://docs.google.com/forms/d/e/1FAIpQLSe5QI7w9gMikwEpHFad8lB1ykCPtMufFL3ahfFNvFp8JF6AaQ/viewform
Để tùy biến chúng ta Ctrl +U để view code và Copy đoạn code có dạng sau:
<form .... đến chỗ </form>
Ví dụ:
view link copy đoạn code FORM
view link copy đoạn code FORM

Sau đó Copy toàn bộ đoạn code đó => Vào bài đăng => Tạo bài mới (để chế độ HTML) => Paste đoạn code vừa copy => Chuyển sang Text => Chuyển lại chế độ HTML => Chỉnh sửa 1 số thông số sau:
tìm đoạn <span class="quantumWizButtonPaperbuttonLabel exportLabel">Gửi</span>
sửa thành 
<span class="quantumWizButtonPaperbuttonLabel exportLabel"><button>Gửi</button></span>
Sau đó tiến hành CSS cho đoạn code trên:
Các bạn có thể thêm ID cho từng trường để ngắn gọn CSS, ở đây mình ko rút gọn mà CSS trực tiếp để đáp ứng dc nhiều form giống nhau.
Mình code sẵn ra đây bạn nào cần có thể sử dụng đoạn CSS sau: (chèn trước ]]></b:skin> )


.freebirdFormviewerViewHeaderTitle{font-size:40px;font-weight:700}
.freebirdFormviewerViewHeaderDescription{font-size:16px}
.freebirdFormviewerViewHeaderRequiredLegend{display:none}
.freebirdFormviewerViewItemsItemItemTitle,.quantumWizTextinputPaperinputPlaceholder.exportLabel,.freebirdFormviewerViewNavigationPasswordWarning{display:none}
input.quantumWizTextinputPaperinputInput.exportInput{background:#eee;color:#333;width:100%;min-height:30px;margin:15px 0;padding:10px;border-radius:5px;border:none}
.quantumWizTextinputPapertextareaPlaceholder.exportLabel{display:none}
.quantumWizTextinputPapertextareaInput.exportTextarea{width:100%;min-height:70px;background:#eee !important;border-radius:5px}
.quantumWizButtonPaperbuttonEl.quantumWizButtonPaperbuttonFlat.quantumWizButtonPaperbuttonDark.quantumWizButtonPaperbutton2El2.freebirdFormviewerViewNavigationSubmitButton button{background:#ff9014;padding:5px 30px;border:2px solid #ccc;font-size:30px;border-radius:7px}
.view-demo .btn-group-lg>.btn,.view-demo .btn-lg{padding:2px;font-size:14px;line-height:14px;border-radius:6px;background:none;border:none;font-family:Arial;color:#fff;font-weight:600}
.btn-default{color:#fff;background-color:#337ab7;border-color:#ccc}
.quantumWizButtonPaperbuttonEl.quantumWizButtonPaperbuttonFlat.quantumWizButtonPaperbuttonDark.quantumWizButtonPaperbutton2El2.freebirdFormviewerViewNavigationSubmitButton{text-align:center;margin:10px}
.quantumWizButtonPaperbuttonEl.quantumWizButtonPaperbuttonFlat.quantumWizButtonPaperbuttonDark.quantumWizButtonPaperbutton2El2.freebirdFormviewerViewNavigationSubmitButton button{font-size:18px;padding:5px 40px;border-radius:8px;color:#fff;background:#f89c00}
Nếu bạn muốn hiển thị chuyên nghiệp hơn có thể sử dụng thêm thuộc tính placeholder="Họ và tên" trong thẻ Input.
Ví dụ 
<input aria-describedby="i.desc.1343066907 i.err.1343066907" aria-label="Họ và tên" autocomplete="off" class="quantumWizTextinputPaperinputInput exportInput" data-initial-dir="auto" data-initial-value="" dir="auto" jsname="YPqjbf" name="entry.1301114386" tabindex="0" type="text" value="" placeholder="Họ và tên"/>
Như vậy là các bạn đã tạo ra 1 form liên hệ biểu mẫu khá chuyên nghiệp giống thế này: 

Hiển thị Popup liên hệ hoặc tải bảng giá giữa màn hình:

Bạn đã vừa tạo ra 1 form liên hệ khá đẹp theo ý bạn, giờ bạn muốn hiển thị nó dạng popup giữa màn hình, bạn chỉ việc thay đoạn code trên theo hướng dẫn của bài viết sau: Hướng dẫn tạo popup quảng cáo giữa màn hình website, blog


Các bạn cũng có thể xem cách làm bằng video hướng dẫn sau:
Chúc các bạn thành công

Tags:

Không có nhận xét nào:

Lưu ý: Khi để lại Nhận xét bạn nên click vào ô "Thông báo cho tôi" ở dưới để nhận phản hồi từ Admin

Đó chưa phải tất cả ... Chúng tôi còn 100 mẫu blog đẹp khác. View all Mẫu Template Blogger

Hãy nhanh tay gọi điện ngay đến chúng tôi theo số 0988227905 hoặc đặt hàng thiết kế ngay hôm nay theo mẫu form bên dưới.

Chúng tôi sẽ hoàn thành trong thời gian sớm nhất cho quý khách

Hãy truy cập để trải nghiệm dịch vụ của chúng tôi
Đã có
lượt Khách Hàng quan tâm đến dịch vụ của chúng tôi

Sử dụng nội dung ở trang này và dịch vụ tại Share123.vn có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách phát triển của chúng tôi.

www.Share123.vn - Website chuyên thiết kế blogspot, zip blogger, thiết kế blog chuẩn seo, blogger responsive, Thủ thuật Blogspot, Free Template Blogspot, kho giao diện blog đẹp, premium template blogger, free template blogger, Với kinh nghiệm nhiều năm trong nghề thiết kế Temple, design skin web chúng tôi cam kết tạo ra những sản phẩm chất lượng, tối ưu đến tay người dùng, thiết kế theo yêu cầu của quý khách, cùng đội ngủ support chuyên nghiệp nhiệt tình, ...

Copyright 2013 © Share123.vn - Blogger Team. All right Reserved - Hotline: 0988.227.905 - 0904.227.905 - Email: nguyenhuytap@gmail.com - website: www.share123.vn