Nếu Bạn muốn gửi mail form trên wordpress thì có khá nhiều Plugin làm được điều đó chẳng hạn như plugin Contact Form 7 (CF7) là sự lựa chọn tốt nhất, dễ sử dụng nhất. Bạn có thể gửi bằng hàm mail php hoặc SMTP Gmail, smtp của mail server bất kỳ.
Vậy hãy cũng Chiasefree.com tìm hiểu về CF7 và cùng nhau tùy biến giao diện cho nó sinh động tí nhé 😀
Nội dung chính
Contact Form 7 là gì?
Contact Form 7 là 1 plugins trên wordpress được viết bởi Takayuki Miyoshi. Contact Form 7 có thể quản lý nhiều Form gửi mail khác nhau. Ngoài ra bạn có thể tùy chỉnh hình thức và nội dung email rất dễ dàng. Form hỗ trợ Ajax-powered submitting, CAPTCHA, Bộ lọc Spam Akismet của wordpress.
Hiện tại thời điểm mình viết bài viết này thì theo mình thấy trên WordPress thì lượt tải của plugin CF7 này đã hơn 5 triệu lượt tải rồi, quá hot phải không các bạn.
Làm đẹp giao diện CF7
Trước tiên các bạn phải cài đặt plugin CF7 qua theo địa chỉ này , sau đó active lên và cấu hình những thứ cần thiết.
Mặc định form CF7 rất đơn giản nếu biết chút css thì các bạn có thể tùy biến cho nó đẹp mắt hơn.
Bạn chỉ cần copy đoạn code css sau vào Custom CSS nếu theme bạn có hộ trợ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 128 129 130 131 132 133 134 135 136 137 138 |
/***********basic************/ /*Form width*/ .wpcf7 { text-align: left; width: 90%; } /*Input Field widths*/ .wpcf7-text, .wpcf7-textarea { width: 100%; border: 1px solid #e4e4e4; border-radius: 4px; } .wpcf7-text { height: 50px; padding-left: 10px; } .wpcf7-text:focus, .wpcf7-textarea:focus { border-color: #129FEA; } /*Label Font*/ .wpcf7-form p { font-size: 16px; font-family: 'Roboto', sans-serif; } /*Submit button Font*/ .wpcf7-submit { width: 85%; font-size: 15px !important; background: #4a97c2 !important; color: #fff !important; padding: 20px; } /*Submit button Hover*/ .wpcf7-submit:hover { background: #3b86b0 !important; } /*Response messages - Error & Success*/ .wpcf7-response-output { margin-bottom: 30px !important; } /***********borders************/ /*Form border*/ .wpcf7 { 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: #1d2731 !important; border: 2px solid #5A5050 !important; color: #5A5050 !important; font-weight: bold !important; } /*Submit button Hover styles*/ .wpcf7-submit:hover { background-color: rgba(29, 39, 49, 0.66) !important; border-color: #4CAF50 !important; color: #4CAF50 !important; } /*Label Text color*/ .wpcf7-form p { color: #FFF; } .wpcf7-form label{ /*display: none;*/ } /*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 { /*display: none;*/ /*color: #000000;*/ } /*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; } |
Lưu lại và xáo cache đi xem thành quả nhé.
Lời kết
Với hướng dẫn trên thì các bạn đã thay bộ áo mới cho CF7 rồi đó, nếu trong quá trình gặp lỗi gì thì để lại 1 comment phía dưới mình sẽ hỗ trợ cho các bạn nhé.
Add Comment