Tạo biểu mẫu liên hệ để thu thập chi tiết liên hệ và ý kiến ​​của người dùng về trang web của bạn. Làm theo các bước và tạo biểu mẫu liên hệ với CSS một cách đơn giản.

Bạn đang xem : tạo kiểu biểu mẫu liên hệ css

Bạn đã bao giờ tự hỏi tại sao mình cần biểu mẫu liên hệ trên trang web của mình chưa?

Có nhiều lý do tại sao một trang web nên có biểu mẫu liên hệ. Nếu bạn muốn biết khách truy cập nghĩ gì về trang web, các bài báo, blog của bạn hoặc thu thập chi tiết liên hệ của họ và xây dựng mối quan hệ với họ, thì cần phải có biểu mẫu liên hệ!

Trong đoạn mã này, chúng tôi sẽ trình bày cách tạo mã cho biểu mẫu liên hệ HTML và tạo kiểu cho biểu mẫu này với sự trợ giúp của CSS .

Tạo HTML

  • Tạo thẻ & lt; h2 & gt; cho tiêu đề và thêm phần tử & lt; div & gt; với

    class

    “vùng chứa”.

  • Tạo phần tử & lt; form & gt; và thêm thuộc tính

    action

    bằng url “/ form / submit”.

  • Tạo bốn phần tử & lt; label & gt; với các thuộc tính

    id

    sau: “fname”, “lname”, “mail” và “country “và” tin nhắn “.

  • Tạo danh sách tùy chọn thả xuống cho “quốc gia” bằng thẻ & lt; select & gt; .
  • Tạo thẻ & lt; textarea & gt; để xác định trường, nơi người dùng có thể nhập văn bản nhiều dòng.
  • Xác định các trường để người dùng nhập liệu bằng thuộc tính

    text

    của thẻ & lt; input & gt; .

  • Tạo nút “Gửi” bằng thuộc tính

    submit

    của thẻ

    & lt; input & gt;

    .

  & lt; h2 & gt; Biểu mẫu liên hệ & lt; / h2 & gt;
& lt; div class = "container" & gt;
  & lt; form action = "/ form / submit" method = "POST" & gt;
    & lt; label for = "fname" & gt; Tên & lt; / label & gt;
    & lt; input type = "text" id = "fname" name = "name" placeholder = "Nhập tên của bạn .." & gt;
    & lt; label for = "lname" & gt; Họ & lt; / label & gt;
    & lt; input type = "text" id = "lname" name = "surname" placeholder = "Nhập họ của bạn .." & gt;
    & lt; label for = "mail" & gt; Địa chỉ Email & lt; / label & gt;
    & lt; input type = "text" id = "mail" name = "e-mail" placeholder = "Nhập e-mail của bạn .." & gt;
    & lt; label for = "country" & gt; Country & lt; / label & gt;
    & lt; select id = "country" name = "country" & gt;
      & lt; option value = "italy" & gt; Ý & lt; / option & gt;
      & lt; option value = "spain" & gt; Tây Ban Nha & lt; / option & gt;
      & lt; option value = "france" & gt; Pháp & lt; / option & gt;
    & lt; / select & gt;
    & lt; label for = "message" & gt; Message & lt; / label & gt;
    & lt; textarea id = "message" name = "message" placeholder = "Nhập tin nhắn của bạn .." style = "height: 200px" & gt; & lt; / textarea & gt;
    & lt; input type = "submit" value = "Gửi" & gt;
  & lt; / form & gt;
& lt; / div & gt;  

Thêm CSS

  • Tạo kiểu cho & lt; select & gt; & lt; textarea & gt; bằng cách đặt width , padding , margin-top margin-bottom .
  • Làm tròn một chút đường viền bằng thuộc tính border-radius .
  • Đặt

    textarea

    chỉ thay đổi kích thước theo chiều dọc với thuộc tính resize .

  • Tạo kiểu cho nút “Gửi” với đường viền background-color , color , padding

    thuộc tính -radius

    .

  • Xác định loại con trỏ .
  • Đặt

    background-color

    , màu này sẽ thay đổi khi bạn di chuột.

  

input

[type = text]

, lựa chọn,

textarea

{

width

:

100%

;

padding

:

8px

;

border

:

1px

solid

# eeeeee

;

border-radius

:

4px

;

kích thước hộp

: border-box;

margin-top

:

8px

;

margin-bottom

:

16px

;

thay đổi kích thước

: vertical; }

input

[type = submit]

{

background-color

:

# 4cd9c6

;

color

:

# ffffff

;

padding

:

12px

20px

;

border

: none;

border-radius

:

7px

;

con trỏ

: con trỏ; }

input

[type = submit]

: hover

{

background-color

:

# 6fe8d7

; }

Đây là mã đầy đủ của biểu mẫu liên hệ.

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

font-family

: Arial, Helvetica, sans-serif; } * {

kích thước hộp

: border-box; }

input

[type = text]

, lựa chọn,

textarea

{

width

:

100%

;

padding

:

8px

;

border

:

1px

solid

# eeeeee

;

border-radius

:

4px

;

kích thước hộp

: border-box;

margin-top

:

8px

;

margin-bottom

:

16px

;

thay đổi kích thước

: vertical; }

input

[type = submit]

{

background-color

:

# 4cd9c6

;

color

:

# ffffff

;

padding

:

12px

20px

;

border

: none;

border-radius

:

7px

;

con trỏ

: con trỏ; }

input

[type = submit]

: hover

{

background-color

:

# 6fe8d7

; }

. container

{

border-radius

:

8px

;

background-color

:

# e6e6e6

;

padding

:

15px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Biểu mẫu liên hệ

& lt; /

h2

& gt;

& lt;

div

class

=

" container "

& gt;

& lt;

form

action

=

" / form / submit "

method

=

" POST "

& gt;

& lt;

label

cho

=

" fname "

& gt;

Tên

& lt; /

nhãn

& gt;

& lt;

input

type

=

" text "

id

=

" fname "

name

=

" name "

placeholder

=

" Nhập tên của bạn .. "

& gt;

& lt;

label

cho

=

" lname "

& gt;

Họ

& lt; /

nhãn

& gt;

& lt;

input

type

=

" text "

id

=

" lname "

tên

=

" họ "

trình giữ chỗ

=

" Nhập họ của bạn .. "

& gt;

& lt;

label

cho

=

" lname "

& gt;

Địa chỉ Email

& lt; /

label

& gt;

& lt;

input

type

=

" text "

id

=

" mail "

name

=

" e-mail "

placeholder

=

" Nhập e-mail của bạn .. "

& gt;

& lt;

label

cho

=

" ci "

& gt;

Quốc gia

& lt; /

label

& gt;

& lt;

chọn

id

=

" country "

name

=

" country "

& gt;

& lt;

option

value

=

" italy "

& gt;

Ý

& lt; /

option

& gt;

& lt;

option

value

=

" spain "

& gt;

Tây Ban Nha

& lt; /

option

& gt;

& lt;

option

value

=

" france "

& gt;

Pháp

& lt; /

tùy chọn

& gt;

& lt; /

chọn

& gt;

& lt;

label

cho

=

" message "

& gt;

Tin nhắn

& lt; /

label

& gt;

& lt;

textarea

id

=

" message "

name

=

" message "

placeholder

=

" Nhập tin nhắn của bạn .. "

style

=

"height: 200px"

& gt;

& lt; /

textarea

& gt ;

& lt;

input

type

=

" submit "

value

=

" Gửi "

& gt;

& lt; /

biểu mẫu

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Tên

Họ

Địa chỉ email

Quốc gia

Thông điệp

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

nhãn

{

font-family

:

'Open Sans'

sans-serif;

color

:

# fff

;

margin

:

0

; }

. container

{

display

: block;

border

:

8px

solid

# 414178

;

border-radius

:

10px

;

margin

:

0

auto;

padding

:

0

0

10px

10px

;

max-width

:

330px

;

background-color

:

# ac9dd1

; }

. title

{

display

: inline-block; }

. title

h2

{

padding

:

0

10px

0

0px

;

margin

:

5px

0

;

color

:

# FBFBFB

; }

biểu mẫu

{

padding

:

10px

10px

0

0

; } giờ {

width

:

100%

;

display

: block;

margin

:

5px

0

;

height

:

5px

;

border

:

0

;

background-color

:

# ffffff

; }

input

,

textarea

{

width

:

100%

;

border

:

5px

solid

# FFFFFF

;

border-radius

:

3px

;

thay đổi kích thước

: none;

padding

:

0

5px

;

kích thước hộp

: border-box;

font-family

:

'Open Sans'

sans-serif;

font-size

:

16px

;

color

:

# 000000

; }

input

[type =

"text"

]

,

input

[type =

"email"

]

{

padding

:

0

1px

;

height

:

40px

;

width

:

100%

; }

input

: focus

,

textarea

: tiêu điểm

{

outline

: none; }

. form-input

{

margin

:

5px

0

10px

0

; }

. form-textarea

{

margin

:

5px

0

;

width

:

100%

;

height

:

100px

; }

input

[type =

"submit"

]

{

width

:

100%

;

height

:

50px

;

background-color

:

# 414178

;

border

:

0

;

color

:

# fff

;

border

:

5px

solid

# 414178

;

border-radius

:

8px

;

margin

:

10px

0

0

0

;

font-family

:

'Open Sans'

sans-serif;

font-size

:

22px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" wrapper "

& gt;

& lt;

div

class

=

" container "

& gt;

& lt;

div

class

=

" title "

& gt;

& lt;

h2

& gt;

Liên hệ chúng tôi

& lt;

giờ

& gt;

& lt; /

h2

& gt;

& lt; /

div

& gt;

& lt;

form

class

=

" form "

action

=

" / form / submit "

phương thức

=

"ĐĂNG"

& gt;

& lt;

label

cho

=

" name "

& gt;

Tên

& lt; /

nhãn

& gt;

& lt;

input

class

=

" form-input "

type

=

" text "

tên

=

" tên "

id

=

" tên "

& gt;

& lt;

label

cho

=

" email "

& gt;

Email

& lt; /

label

& gt;

& lt;

input

class

=

" form-input "

type

=

" email "

tên

=

" email "

id

=

" email "

& gt;

& lt;

label

& gt;

Thông báo

& lt; /

nhãn

& gt;

& lt;

textarea

class

=

" form-textarea "

type

=

" text "

& gt;

& lt; /

textarea

& gt;

& lt;

input

type

=

" submit "

value

=

" Gửi "

& gt;

& lt; /

biểu mẫu

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề tạo kiểu cho một biểu mẫu liên hệ css

Dựng layout với CSS cho người mới bắt đầu – Lớp Frontend Buổi 4

  • Tác giả: SUNTECH VIỆT NAM
  • Ngày đăng: 2020-03-27
  • Đánh giá: 4 ⭐ ( 2205 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở SUNTECH học viên được học dựng giao diện bằng cả 3 kỹ thuật: Float, Flex, Grid

    Nhiều bạn nói là bây giờ mà còn dựng giao diện với Float nữa là lỗi thời.
    Chắc chắn là bạn đã nhầm. Float vẫn có vai trò quan trọng khi dựng layout mặc dù Flex đang được lựa chọn nhiều hơn

    Và một điều quan trong, là một Frontend Developer mà không biết dựng giao diện bằng Float thì chứng tỏ kỹ năng của bạn chưa hoàn thiện
    – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
    Đăng ký kênh để nhận thông báo video mới nhất từ SUNTECH: https://goo.gl/1ZxwCS
    – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
    Danh sách video khóa học lập trình Laravel tại SUNTECH
    https://www.youtube.com/watch?v=YV25kxBt2Sg&list=PLh5At4osX60LuzjTR3NWhAXiFGVRogFoe
    – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
    hoclaptrinh hoclaptrinhmienphi suntechvietnam
    – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
    Mọi chi tiết xin liên hệ:
    Name: Phạm Kỳ Khôi
    Email: daotaolaptrinhsuntech@gmail.com
    Phone: 0942 668 586
    Zalo: 0942 668 586
    Website: https://suntech.edu.vn
    Fan-page: https://www.facebook.com/suntech.edu.vn
    Group: https://www.facebook.com/groups/hoclaptrinhmienphi.vn

Biểu Mẫu Liên Hệ

  • Tác giả: www.liveagent.vn
  • Đánh giá: 4 ⭐ ( 6142 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ẩn địa chỉ email của bạn để tránh Spam, tạo ra nhiều địa chỉ khách hàng tiềm năng hơn bằng việc đem lại phương thức liên hệ dễ dàng với tính năng của LiveAgent – Biểu Mẫu Liên Hệ. Tìm hiểu thêm về nó.

Hướng dẫn cách tạo, tùy chỉnh, thiết kế, CSS form bằng contact form 7 – Công Ty TNHH Truyền Thông & Công nghê Tuệ Lâm Soft

  • Tác giả: tuelamsoft.com
  • Đánh giá: 4 ⭐ ( 2560 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 36: Forms – Biểu mẫu trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 4 ⭐ ( 2975 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giao diện của một biểu mẫu HTML có thể được cải thiện hơn với CSS: Nội dungTạo kiểu cho các trường đầu vàoĐịnh dạng padding cho trường đầu vàoĐịnh dạng đường viền cho trường…

Biểu mẫu trong CSS (CSS form)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 4 ⭐ ( 1249 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo kiểu cho trường đầu vào, Tạo kiểu cho menu chọn, Tạo kiểu cho các nút, Biểu mẫu đáp ứng

Cách tạo Biểu mẫu liên hệ HTML5 / CSS3 dựa trên Ajax / Mã hóa

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 4 ⭐ ( 1303 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biểu mẫu liên hệ là rất cần thiết cho bất kỳ trang web nào, vì nó hoạt động như một trình nhắn tin chuyển ý kiến ​​hoặc yêu cầu của khách truy cập đến quản trị trang web. Ở đây có

Trang Liên hệ sử dụng Google Biểu mẫu – Init HTML

  • Tác giả: www.inithtml.com
  • Đánh giá: 4 ⭐ ( 7307 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở template-contact.php lần trước, chúng ta còn Biểu mẫu liên hệ chưa hoạt động. Bài viết này giới thiệu cách nhúng Google Biểu mẫu vào…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Hướng dẫn cơ bản về lệnh gọi lại JavaScript - gọi lại javascript là gì

By ads_php