Góc Riêng

Trích dẫn :: 1. Xem hướng dẫn về Fancybox [You must be registered and logged in to see this link.] (Tham khảo và tìm cho mình cái gì đó thích hợp)
2. Tạo Form liên hệ Email [You must be registered and logged in to see this link.] (Ai làm được cái này rồi thì khỏi đọc tiếp)

Bài này baivong sẽ hướng dẫn bạn cách làm một Form liên hệ sử dụng Fancybox iframe
Forum mình sài hàng free, vì thế chẳng tìm đâu ra chỗ để up file *.php vào đâu cả, sài host free thì cũng không biết cách Fancybox liên hệ Email người quản lý 378186

Fancybox liên hệ Email người quản lý 378186

Hôm qua lang thang trên mạng thấy cái Create a free website weebly,
đang bạn mò thì phát hiện ra chỗ liên hệ, đem về nhét vô cái Fancybox
thấy hay hay, nên giờ mới có cái chia sẽ cho bạn nè. Fancybox liên hệ Email người quản lý 83328

Fancybox liên hệ Email người quản lý 83328

Bây giờ các dân nghiệp dư bắt đầu nào...
Bước 1: Đăng ký một tài khoản trên [You must be registered and logged in to see this link.]
...Các bước đơn giản nên mình chỉ lướt nhanh thôi nhé. Bạn nào không rõ thì Click vào link hình ví dụ.

Trích dẫn:

Fancybox liên hệ Email người quản lý 1_bmp10

Điền User, pass, mail, mã xác nhận và Click Sign Up
Fancybox liên hệ Email người quản lý 2_bmp10

Điền tiêu đề web, chọn loại web và Click Continue
Fancybox liên hệ Email người quản lý 3_bmp10

Đặt URL cho web (nên chọn luôn cái mục đầu) và Click Continue
Fancybox liên hệ Email người quản lý 4_bmp10

Thế là xong, có một cái web, chuẩn bị làm một trang liên hệ thôi.

(...còn tiếp)Bước 2: Tạo trang liên hệ

Thiết kế web với
weebly hay ở chỗ chỉ cần kéo và thả những gì bạn muốn vào từ thanh công
cụ, vì thế dân nghiệp dư như tui vẫn có thể giải quyết được một cách dễ
dàng.
Đầu tiên bạn kéo cái Contact Form trong Tab Elements - Basic vào:
Fancybox liên hệ Email người quản lý 5_bmp11

Fancybox liên hệ Email người quản lý 5_bmp11

Sau đó Click vào Contact Form bạn vừa kéo vào để nó chuyển sang chế độ chỉnh sửa.
Trên thanh công cụ, chọn Tab Tab Elements - Basic và lôi vào 2 cái Two Column Layout, tạo thành 4 khung riêng biệt.
Fancybox liên hệ Email người quản lý 6_bmp11

Fancybox liên hệ Email người quản lý 6_bmp11

Bây giờ bạn Click vào từng phần của Contact Form và kéo lên trên, mục đích là làm giảm chiều dọc của trang.
Fancybox liên hệ Email người quản lý 7_bmp10

Name khung trên bên trái, Email bên phải, Comment khung dưới bên phải.
Bây giờ trong tab Elemens chọn Form Fields - Standard kéo cái Options Buttons vào khung dưới bên trái.
Fancybox liên hệ Email người quản lý 8_bmp10

Fancybox liên hệ Email người quản lý 8_bmp10

... xong phần bố cục, bây giờ bạn Click vào từng công cụ để chỉnh sửa lại
Fancybox liên hệ Email người quản lý 9_bmp10

Khung Comment bạn nên chọn Height là Small, width là Large rồi sửa lại khung.
Cuối cùng Click vào phần trống cạnh nút Sumit để chọn toàn bộ Contact Form và chỉnh sửa lại phần tên, Email nhận thư, nút gửi thư
Fancybox liên hệ Email người quản lý 10_bmp10

Fancybox liên hệ Email người quản lý 10_bmp10

Click Close để kết thúc
(...còn tiếp)Bước 3: Chỉnh sửa trang liên hệ
Fancybox liên hệ Email người quản lý 11_bmp10

Click vào tab Design - Favorites chọn Edit HTML/CSS
Fancybox liên hệ Email người quản lý 12_bmp10

Sau đó thay các code trong tab HTML và CSS bằng code sau:
HTML:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>%%TITLE%%</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="wrapper">

<div id="content">
%%CONTENT%%
</div>

</div>

<div style='padding: 20px; width:100%; text-align:center;'>%%WEEBLYFOOTER%%</div>
<div style='display:none;'>%%MENU%%</div>
</body>
</html>

CSS:

Code:: ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
margin:0;
padding:0;
}
ul{
list-style:none;
}
fieldset{
border:0;
}
a img{
border:0;
}
.clear{
clear:both;
}

body {
background: #020202 top center no-repeat;
font-family: arial, sans-serif;
font-size:12px;
color:#666666;
height: 100%;
margin:0;
padding:0;
}

a{
outline: none;
color: #ffc946;
text-decoration: none;
}
p {
line-height: 170%;
color: #a3a2a2;
font-size: 13px;
padding: 0px 0px 10px 0px;
}
h1 {
font-family: LucidaSans, arial;
font-size:30px;
color:#fff;
line-height:1.5;
padding: 5px 0px 5px 0px;
}
h2 {
font-family: LucidaSans, arial;
font-size:24px;
color:#fff;
font-weight: normal;
line-height:1.5;
padding: 5px 0px 5px 0px;
}

#wrapper {
width:780px;
margin: 0px auto;
}

.title{
font-family: "Times New Roman", Times, serif;
width:800px;
height: 75px;
padding: 30px 0px 0px 0px;
font-size: 40px;
color: #fff;
}

#navigation{
position: relative;
width:780px;
height: 54px;
padding: 21px 0px 0px 0px;
z-index: 2;
}

#navigation ul{
float: right;
}

#navigation li{
font-family: Georgia, arial;
float: left;
height: 32px;
z-index: 2;
color: #e2e2e2;
font-size: 17px;
padding: 0px 0px 0px 6px;
margin: 0px 0px 0px 27px;
}

#navigation li a{
display: inline-block;
height: 27px;
padding: 5px 16px 0px 10px;
z-index: 2;
color: #e2e2e2;
}

#navigation li:hover a, #navigation li a:hover, #navigation li#active a{
color: #393939;
background: url(naviliright.jpg) right no-repeat;
}

#navigation li:hover, #navigation li#active{
background: url(navlileft.jpg) left no-repeat;
}

#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 22px 0px 0px 0px; }
#weebly-menus .weebly-menu { padding: 0; margin: 0px; list-style: none; }
#weebly-menus .weebly-menu li { float: left; clear: left; width: 168px; text-align: left; }
#weebly-menus
.weebly-menu li a { position: relative; display: block; width: 150px;
background: #e8bf5d; border-top: none; border-bottom: 1px solid
#f3d07c; border-right: none; border-left: none; text-decoration: none;
font-size: 13px; font-weight: normal; line-height:1; padding: 8px 6px
8px 12px; color: #333333; }
#weebly-menus .weebly-menu li a:hover { background: #d2a12c; color: #f4f4f4; font-weight: bold;}

#content{
width:780px;
min-height:400px;
_height:400px;
padding: 30px 0px 50px 0px;
}

#footer{
width:780px;
color: #616060;
font-size: 12px;
margin: 0px 0px 20px 0px;
text-align: right;
}

[You must be registered and logged in to see this link.]Chủ đề : Re: Fancybox liên hệ Email người quản lý
--------------------------------------------------

Bước 3: Chỉnh sửa trang liên hệ
Fancybox liên hệ Email người quản lý 11_bmp10

Click vào tab Design - Favorites chọn Edit HTML/CSS
Fancybox liên hệ Email người quản lý 12_bmp10

Sau đó thay các code trong tab HTML và CSS bằng code sau:
HTML: [You must be registered and logged in to see this link.] CODE:[You must be registered and logged in to see this link.]

%%TITLE%%

                 %%CONTENT%%
                     
%%WEEBLYFOOTER%%

%%MENU%%

CSS: [You must be registered and logged in to see this link.] CODE:[You must be registered and logged in to see this link.]

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
    margin:0;
    padding:0;
}
ul{
    list-style:none;
}
fieldset{
    border:0;
}
a img{
    border:0;
}
.clear{
    clear:both;
}


body {
    background: #020202 top center no-repeat;
    font-family: arial, sans-serif;
    font-size:12px;
    color:#666666;
    height: 100%;
    margin:0;
    padding:0;
}

a{
  outline: none;
    color: #ffc946;
    text-decoration: none;
}
p {
    line-height: 170%;
    color: #a3a2a2;
    font-size: 13px;
    padding: 0px 0px 10px 0px;
}
h1 {
    font-family: LucidaSans, arial;
    font-size:30px;
    color:#fff;
    line-height:1.5;
    padding: 5px 0px 5px 0px;
}
h2 {
    font-family: LucidaSans, arial;
    font-size:24px;
    color:#fff;
    font-weight: normal;
    line-height:1.5;
    padding: 5px 0px 5px 0px;
}

#wrapper {
    width:780px;
    margin: 0px auto;
}

.title{
    font-family: "Times New Roman", Times, serif;
    width:800px;
    height: 75px;
    padding: 30px 0px 0px 0px;
    font-size: 40px;
    color: #fff;
}

#navigation{
    position: relative;
    width:780px;
    height: 54px;
    padding: 21px 0px 0px 0px;
    z-index: 2;
}

#navigation ul{
    float: right;
}

#navigation li{
    font-family: Georgia, arial;
    float: left;
    height: 32px;
    z-index: 2;
    color: #e2e2e2;
    font-size: 17px;
    padding: 0px 0px 0px 6px;
    margin: 0px 0px 0px 27px;
}

#navigation li a{
    display: inline-block;
    height: 27px;
    padding: 5px 16px 0px 10px;
    z-index: 2;
    color: #e2e2e2;
}

#navigation li:hover a, #navigation li a:hover, #navigation li#active a{
    color: #393939;
    background: url(naviliright.jpg) right no-repeat;
}

#navigation li:hover, #navigation li#active{
    background: url(navlileft.jpg) left no-repeat;
}

#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 22px 0px 0px 0px; }
 #weebly-menus .weebly-menu { padding: 0; margin: 0px; list-style: none; }
 #weebly-menus .weebly-menu li { float: left; clear: left; width: 168px; text-align: left; }
 #weebly-menus
 .weebly-menu li a { position: relative; display: block; width: 150px; 
background: #e8bf5d; border-top:  none; border-bottom: 1px solid 
#f3d07c; border-right: none; border-left: none; text-decoration: none; 
font-size: 13px; font-weight: normal; line-height:1; padding: 8px 6px 
8px 12px; color: #333333; }
 #weebly-menus .weebly-menu li a:hover { background: #d2a12c; color: #f4f4f4; font-weight: bold;}

#content{
    width:780px;
    min-height:400px;
    _height:400px;
    padding: 30px 0px 50px 0px;
}


#footer{
    width:780px;
    color: #616060;
    font-size: 12px;
    margin: 0px 0px 20px 0px;
    text-align: right;
}

Click FREVIEW xem thử, được cái hình đen thui là ổn, nhấn Save & Exit, đặt tên rồi Save lại.
Fancybox liên hệ Email người quản lý 13_bmp10

(...còn tiếp)

Bước 4: Tạo trang xác nhận gửi thư

Click vào Tab Pages chọn New page để tạo trang mới.

Đặt tên trang. VD: Xac nhan
Show in Navigation menu: No
Click vào Edit page để chỉnh sửa trang

Fancybox liên hệ Email người quản lý 15_bmp10

Trong Tab Elements - Basic kéo và thả Paragraph with title vào
Click chỉnh sửa trang, có thể dùng mẫu sau:
Fancybox liên hệ Email người quản lý 16_bmp10

Trích dẫn:

Gửi thư thành công
Thư liên hệ đã được gửi vào hòm thư người quản lý, nó sẽ được xem xét và trả lời trong thời gian sớm nhất

Quay trở lại Tab Page, Edit trang Home (Trang gửi thư liên hệ)
Fancybox liên hệ Email người quản lý 17_bmp10

Click Form Options để chỉnh sửa phần liên hệ, Click vào Set link và chọn trang Xac nhan vừa tạo lúc nãy rồi Save lại
Fancybox liên hệ Email người quản lý 18_bmp10

Fancybox liên hệ Email người quản lý 18_bmp10

Vậy là xong phần tạo trang trang liên hệ với Weebly, bạn chỉ cần xuất bản trang này, bằng cách nhấn vào nút Publish
Có thể nó yêu cầu bạn cài đật trang web, tuy nhiên bạn có thể bỏ quang bằng cách ấn Continue và Save lại. Khi nào Click vào Publish mà nó hiện ra cái link trang web như trong hình là xong.
Fancybox liên hệ Email người quản lý 19_bmp10

Fancybox liên hệ Email người quản lý 19_bmp10

(..còn tiếp)Các bước tạo trang mình viết khá chi tiết nên hơi dài, bạn nào rành rồi làm chỉ mất 5 phút là tối đa.

Bước 5: Kết hợp Fancybox để chèn vào forum

Fancybox liên hệ Email người quản lý 416764

Fancybox liên hệ Email người quản lý 416764

Demo: Tại [You must be registered and logged in to see this link.] Click vào Liên hệ Admin
Nếu làm đúng sẽ được như hình dưới đây:
Fancybox liên hệ Email người quản lý 20_bmp10

Fancybox liên hệ Email người quản lý 20_bmp10

[You must be registered and logged in to see this link.]Chủ đề : Re: Fancybox liên hệ Email người quản lý
--------------------------------------------------

Các bước tạo trang mình viết khá chi tiết nên hơi dài, bạn nào rành rồi làm chỉ mất 5 phút là tối đa.

Bước 5: Kết hợp Fancybox để chèn vào forum

Demo: Tại [You must be registered and logged in to see this link.] Click vào Liên hệ Admin
Nếu làm đúng sẽ được như hình dưới đây:
Fancybox liên hệ Email người quản lý 20_bmp10

::

Góc Riêng

Hỗ trợ FORUMOTION

Giải đáp-Thắc mắc Fm

Fancybox liên hệ Email người quản lý

Fancybox liên hệ Email người quản lý

¨‘°ºO(¯°•. Xem tiếp 1 số bài viết cùng chuyên mục!.•°¯)Oº°‘¨

Fancybox liên hệ Email người quản lý

Trả lời nhanh