Theo yêu cầu của bạn Hảo Hán mình sẽ hướng dẫn cách tạo form Đăng Ký Tác Giả giống blog Troll VL
DemoTạo Form Đăng Ký Tác Giả Cho Blog
Để tạo phần đăng ký tác giả như blog của mình trước hết bạn phải tạo một form nhập email
- Nhập các thông số như hình dưới sau đó click vào Save
- Sửa lời thoại thông báo khi đăng ký làm tác giả thành công bạn vào More actions > Edit Confirmation > Nhập lời thoại vào > Save
- Để thêm vào blog bạn vào More actions > Embed và copy code ở khung hiện lên dán vào bài viết trên blog
- Muốn style đẹp bạn cần làm thêm các bước sau nữa
Tạo style đẹp cho khung đăng ký và button
- Lấy formkey của khung đăng ký
<iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=dDJQd01FXzVZXzNoVDRIN1NnZEZPYkE6MQ" width="760" height="825" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
- Đoạn màu đỏ chính là formkey bạn thay nó vào phần màu đỏ đoạn code bên dưới sau đó dán vào trình viết website và lưu dưới dạng HTML rồi upload lên host
<title>Đăng Ký</title>
<link href='https://huyco-troll.googlecode.com/static/spreadsheets/client/css/2761485455-embedded_form_compiled.css' type='text/css' rel='stylesheet'>
<style type="text/css">
</style></head>
<body class="ss-base-body" dir="ltr" itemscope itemtype="http://schema.org/CreativeWork/FormObject"><meta itemprop="name" content="Untitled form">
<meta itemprop="url" content="https://docs.google.com/spreadsheet/viewform?formkey=dDJQd01FXzVZXzNoVDRIN1NnZEZPYkE6MQ">
<meta itemprop="embedUrl" content="https://docs.google.com/spreadsheet/embeddedform?formkey=dDJQd01FXzVZXzNoVDRIN1NnZEZPYkE6MQ">
<meta itemprop="faviconUrl" content="//ssl.gstatic.com/docs/spreadsheets/forms/favicon_jfk2.png">
<p></p><form id="ss-form" method="POST" style="color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;" action="https://docs.google.com/spreadsheet/formResponse?formkey=dDJQd01FXzVZXzNoVDRIN1NnZEZPYkE6MQ&embedded=true&ifq">
<input class="ss-q-short txt-white" id="entry_0" name="entry.0.single" placeholder="Nhập email của bạn vào đây ... " type="text" value style="height: 26; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border: 1px solid rgb(204, 204, 204); -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; width: 408;padding-left:5px; padding-right:35px; padding-top:5px; padding-bottom:5px"><span class="Apple-converted-space"> </span><input class="btn-orange" name="submit" type="submit" value="Đăng ký" style="color: white; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; font-size: 12px; text-align: center; text-transform: uppercase; text-shadow: white 0px 0px 1px; border: 1px solid rgb(255, 102, 0); margin: 0px 0.5em; padding: 11px; background-color: rgb(255, 153, 0); background-image: url('-webkit-linear-gradient(top,%20rgb(255,%20153,%200')"></form>
<br style="color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(244, 244, 244);">
<br style="color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(244, 244, 244);">
Xem yêu cầu ở đâu?
Bạn vào
https://drive.google.com/#my-drive sau đó click vào form đã đăng ký ở các bước trên xem có ai gửi yêu cầu không
Bạn có thể áp dụng bài viết này để phát triển các tiện ích khác ví dụ như Đăng Bài, Góp Ý ...
6 comments
khi nhập Email vào ô và kích nút ĐĂNG KÝ thì nó không bật lên một cửa sổ mới mà nó lại chuyển sang trang của google.
Vậy làm cách nào mà khi người dùng đăng ký thì sẽ bật lên cửa sổ mới vậy bạn?
http://www.azblogviet.com/lam-tac-gia/
Thanks!
yahoo : timnhoxpekute
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&Convert
'Convert
"Convert
<Convert
>