Hướng dẫn CSS cho Contact Form 7 đẹp hơn, gọn gàng hơn

Contact Form 7 được biết đến là plugin form lấy thông tin khách hàng, thông tin liên hệ phổ biến nhất trên nền tảng WordPress. Vì vậy, tùy chỉnh CSS cho Contact Form 7 đẹp hơn, gọn gàng hơn là cần thiết với tất cả các website.

Khi cài đặt và kích hoạt ban đầu, CF7 chỉ cho ra form rất cơ bản gồm các trường thông tin như tên, email, tiêu đề, nội dung liên hệ,.. và giao diện cũng không được bắt mắt. Hãy sử dụng các đoạn CSS dưới đây để tùy chỉnh Contact Form 7 trên website của bạn nhé.

Bạn hãy thay đổi giá trị để form phù hợp với giao diện website

CSS background và border

/ * CSS background và border Contact Form 7
----------------------------------------------- * /

.wpcf7 {
     background: #A3A3A3;
     border: 1 px solid #494949 ;
     text-align: left;
     width: 700 px; //%
}

/ * CSS background và border Contact Form 7

----------------------------------------------- * /

.wpcf7 {

background: #A3A3A3;

border: 1 px solid #494949 ;

text-align: left;

width: 700 px; //%

}

CSS canh lề cho CF7

/ * canh lề contact form 7
------------------------- * / 

.wpcf7 form{ 
     margin-left: 25px;
     margin-right: 25px;
     margin-top: 25px;
}

/ * canh lề contact form 7

------------------------- * /

.wpcf7 form{

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

}

CSS các trường thông tin cơ bản

/ * CSS các trường thông tin nhập vào
--------------------------------- * /

.wpcf7 input[type = "text"],
.wpcf7 input[type = "email"],
.wpcf7 input[type = "tel"],
textarea
{
    font-size: 16px;
    background: #f5f5f5 ;
    <span class="pl-c1">border</span>: <span class="pl-c1">1<span class="pl-smi">px</span></span> solid <span class="pl-pds"><span class="pl-kos">#</span>e4e4e4</span>;
    color: #000 ;
    width: 95%;
    padding: 2%;
}
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #129FEA;
}

/ * CSS các trường thông tin nhập vào

--------------------------------- * /

.wpcf7 input[type = "text"],

.wpcf7 input[type = "email"],

.wpcf7 input[type = "tel"],

textarea

{

font-size: 16px;

background: #f5f5f5 ;

border: 1px solid #e4e4e4;

color: #000 ;

width: 95%;

padding: 2%;

}

.wpcf7-text:focus, .wpcf7-textarea:focus {

border-color: #129FEA;

}

CSS cho nút call-to-action của form

Input – Trạng thái của nút ‘nguyên trạng’ trước khi thực hiện bất kỳ hành động nào trên đó.
Input: hover – Trạng thái của nút khi con trỏ được di chuột qua đầu con trỏ.
input: active – Trạng thái của nút khi ai đó nhấp vào nút đó.

/*Label Font*/.wpcf7-form p {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

/*Submit button Font*/.wpcf7-submit {
    width: 100%;
    font-size: 15px !important;
    background: #4a97c2 !important;
    color: #fff !important;
}
/*Submit button Hover*/.wpcf7-submit:hover {
    background: #3b86b0 !important;
}

/*Label Font*/

.wpcf7-form p {

font-size: 14px;

font-family: 'Roboto', sans-serif;

}

/*Submit button Font*/

.wpcf7-submit {

width: 100%;

font-size: 15px !important;

background: #4a97c2 !important;

color: #fff !important;

}

/*Submit button Hover*/

.wpcf7-submit:hover {

background: #3b86b0 !important;

}

/ * Button submit Contact Form 7 
------------------------------- * /

.wpcf7 input[type = "submit"] {
    color: #ffffff;
    font-size: 18 px;
    font-weight: 700;
    background: #9ED9330;
    padding: 15px 25px 15px 25px;
    border: none;
    border-radius: 5px;
    width: auto;
    text-decoration: none;
    text-transform: uppercase;
}

.wpcf7 input:hover[type = "submit"] {
    background: #494949;
    transition: all 0,4s ease 0s;
}

.wpcf7 input:active[type = "submit"] {
    background: #000000;
}

/ * Button submit Contact Form 7

------------------------------- * /

.wpcf7 input[type = "submit"] {

color: #ffffff;

font-size: 18 px;

font-weight: 700;

background: #9ED9330;

padding: 15px 25px 15px 25px;

border: none;

border-radius: 5px;

width: auto;

text-decoration: none;

text-transform: uppercase;

}

.wpcf7 input:hover[type = "submit"] {

background: #494949;

transition: all 0,4s ease 0s;

}

.wpcf7 input:active[type = "submit"] {

background: #000000;

}

CSS thông báo

/*Response messages - Error & Success*/.wpcf7-response-output {
    margin-bottom: 30px !important;
}

/*Response messages - Error & Success*/

.wpcf7-response-output {

margin-bottom: 30px !important;

}

CSS tổng hợp

/***********basic************/
/*Form width*/.wpcf7 {
    text-align: left;
    width: 40%;
}

/*Input Field widths*/.wpcf7-text, .wpcf7-textarea {
    width: 100%;
    border: 1px solid #e4e4e4;
    background: #f7f7f7;
}

.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #129FEA;
}

/*Label Font*/.wpcf7-form p {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

/*Submit button Font*/.wpcf7-submit {
    width: 100%;
    font-size: 15px !important;
    background: #4a97c2 !important;
    color: #fff !important;
}

/*Submit button Hover*/.wpcf7-submit:hover {
    background: #3b86b0 !important;
}

/*Response messages - Error & Success*/.wpcf7-response-output {
    margin-bottom: 30px !important;
}

/***********borders************/
/*Form border*/.wpcf7 {
    border: 1px solid #B7B7B7;
    padding: 20px 25px !important;
    padding-bottom: 0px !important;
}

/*Input Field borders*/.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #8F8F8F !important;
}

/*Submit button Background*/.wpcf7-submit {
    background: #7E7E7E !important;
    color: #fff !important;
}

/*Submit button Hover*/.wpcf7-submit:hover {
    background: #5F5F5F !important;
}

/***********colors************/
/*Submit button background & border*/.wpcf7-submit {
    background-color: transparent !important;
    border: 2px solid #5A5050 !important;
    color: #5A5050 !important;
    font-weight: bold !important;
}

/*Submit button Hover styles*/.wpcf7-submit:hover {
    background-color: transparent !important;    
border-color: #4CAF50 !important;
color: #4CAF50 !important;
}

/*Label Text color*/.wpcf7-form p {
    color: #9E9E9E;
}

/*Input Field Text color*/.wpcf7-text, .wpcf7-textarea {
color: #777;
}

/****background-images********/
/*Form background*/.wpcf7 {
    background-image: url(http://i.imgur.com/iAFPf0G.jpg);
    background-color: rgba(255, 255, 255, 0.2);
    background-position: center;
    background-size: cover;
}

/*Label Text color*/.wpcf7-form p {
    color: #FFFFFF;
}

/*Submit button background & border*/.wpcf7-submit {
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
}

/*Submit button Hover styles*/.wpcf7-submit:hover {
    border-color: transparent !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #FFFFFF !important;
}

/*Input Field border*/.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #5A3D3D !important;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

/***********basic************/

/*Form width*/

.wpcf7 {

text-align: left;

width: 40%;

}

/*Input Field widths*/

.wpcf7-text, .wpcf7-textarea {

width: 100%;

border: 1px solid #e4e4e4;

background: #f7f7f7;

}

.wpcf7-text:focus, .wpcf7-textarea:focus {

border-color: #129FEA;

}

/*Label Font*/

.wpcf7-form p {

font-size: 14px;

font-family: 'Roboto', sans-serif;

}

/*Submit button Font*/

.wpcf7-submit {

width: 100%;

font-size: 15px !important;

background: #4a97c2 !important;

color: #fff !important;

}

/*Submit button Hover*/

.wpcf7-submit:hover {

background: #3b86b0 !important;

}

/*Response messages - Error & Success*/

.wpcf7-response-output {

margin-bottom: 30px !important;

}

/***********borders************/

/*Form border*/

.wpcf7 {

border: 1px solid #B7B7B7;

padding: 20px 25px !important;

padding-bottom: 0px !important;

}

/*Input Field borders*/

.wpcf7-text:focus, .wpcf7-textarea:focus {

border-color: #8F8F8F !important;

}

/*Submit button Background*/

.wpcf7-submit {

background: #7E7E7E !important;

color: #fff !important;

}

/*Submit button Hover*/

.wpcf7-submit:hover {

background: #5F5F5F !important;

}

/***********colors************/

/*Submit button background & border*/

.wpcf7-submit {

background-color: transparent !important;

border: 2px solid #5A5050 !important;

color: #5A5050 !important;

font-weight: bold !important;

}

/*Submit button Hover styles*/

.wpcf7-submit:hover {

background-color: transparent !important;

border-color: #4CAF50 !important;

color: #4CAF50 !important;

}

/*Label Text color*/

.wpcf7-form p {

color: #9E9E9E;

}

/*Input Field Text color*/

.wpcf7-text, .wpcf7-textarea {

color: #777;

}

/****background-images********/

/*Form background*/

.wpcf7 {

background-image: url(http://i.imgur.com/iAFPf0G.jpg);

background-color: rgba(255, 255, 255, 0.2);

background-position: center;

background-size: cover;

}

/*Label Text color*/

.wpcf7-form p {

color: #FFFFFF;

}

/*Submit button background & border*/

.wpcf7-submit {

border: 2px solid #FFFFFF !important;

color: #FFFFFF !important;

}

/*Submit button Hover styles*/

.wpcf7-submit:hover {

border-color: transparent !important;

background-color: rgba(0, 0, 0, 0.2) !important;

color: #FFFFFF !important;

}

/*Input Field border*/

.wpcf7-text:focus, .wpcf7-textarea:focus {

border-color: #5A3D3D !important;

}

Tham khảo: https://gist.github.com/codehandling/0483efbc2e76890a3e6a9ae6737792bb

Chia sẻ code

Hướng dẫn CSS cho Contact Form 7 đẹp hơn, gọn gàng hơn

Để lại một bình luận Hủy

Main Headline

Smaller Headline

ĐĂNG KÝ NHẬN TƯ VẤN