Đề Xuất 12/2022 # Hướng Dẫn Cách Tạo Form Liên Hệ Ở Trang Tĩnh Blogspot / 2023 # Top 19 Like | Jetstartakeontheworld.com

Đề Xuất 12/2022 # Hướng Dẫn Cách Tạo Form Liên Hệ Ở Trang Tĩnh Blogspot / 2023 # Top 19 Like

Cập nhật nội dung chi tiết về Hướng Dẫn Cách Tạo Form Liên Hệ Ở Trang Tĩnh Blogspot / 2023 mới nhất trên website Jetstartakeontheworld.com. Hy vọng thông tin trong bài viết sẽ đáp ứng được nhu cầu ngoài mong đợi của bạn, chúng tôi sẽ làm việc thường xuyên để cập nhật nội dung mới nhằm giúp bạn nhận được thông tin nhanh chóng và chính xác nhất.

Hướng dẫn cách tạo form liên hệ ở trang tĩnh blogspot

phần cần thiết trong website và năm vừa rồi google hỗ trợ thêm tính năng add widget contact form vào template nhưng khó tùy biến thêm vào trang tĩnh nên bài viết này sẻ giúp bạn thêm form liên hệ ở trang tĩnh của blogspot.

Thêm form liên hệ ở trang tĩnh blogger

Thực ra thì vài hôm trước có một bạn hỏi về cách thêm form liên hệ ở trang tĩnh như thế nào nên mình post bài này để nhiều người có thể áp dụng cách này cho blog của họ.

Bạn có thể xem demo trực tiếp

.contact-form-box{width:50%;margin:20px auto;padding:0;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 70%;height:auto;margin: 5px auto 15px;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;outline:none} #ContactForm1_contact-form-email-message{width: 95%;height: 100px;margin: 5px auto;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;} #ContactForm1_contact-form-submit {display:block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;box-shadow: 0px 4px 0px 0px #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0px 1px 0px #de5135;} #ContactForm1_contact-form-submit:hover {background-color:#f5785f;} #ContactForm1_contact-form-submit:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px #c75b45;} #ContactForm1_contact-form-submit:focus{outline:none} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:35px;text-align:left} @media screen and (max-width: 768px){ .contact-form-box{width:100%;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 96%;} } @media screen and (max-width: 480px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;} }

<input id=”ContactForm1_contact-form-name” name=”name” placeholder=”Name” size=”30″ <input id=”ContactForm1_contact-form-email” name=”email” placeholder=”Email” size=”30″ <textarea cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” if (window.jstiming) window.jstiming.load.tick(‘widgetJsBefore’); if (typeof(BLOG_attachCsiOnload) != ‘undefined’ && BLOG_attachCsiOnload != null) { window[‘blogger_templates_experiment_id’] = “templatesV1”;window[‘blogger_blog_id’] = ‘

4764656151717031237

‘;BLOG_attachCsiOnload(”); }_WidgetManager._Init(‘//www.blogger.com/rearrange?blogIDx3d

4764656151717031237

‘,’//www.tips24h.net/’,’

4764656151717031237

‘); _WidgetManager._RegisterWidget(‘_ContactFormView’, new _WidgetInfo(‘ContactForm1’, ‘footer1’, null, document.getElementById(‘ContactForm1’), {‘contactFormMessageSendingMsg’: ‘Sending…’, ‘contactFormMessageSentMsg’: ‘Your message has been sent.’, ‘contactFormMessageNotSentMsg’: ‘Message could not be sent. Please try again later.’, ‘contactFormInvalidEmailMsg’: ‘A valid email address is required.’, ‘contactFormEmptyMessageMsg’: ‘Message field cannot be empty.’, ‘title’: ‘Contact Form’, ‘blogId’: ‘

4764656151717031237

‘, ‘contactFormNameMsg’: ‘Name’, ‘contactFormEmailMsg’: ‘Email’, ‘contactFormMessageMsg’: ‘Message’, ‘contactFormSendMsg’: ‘Send’, ‘submitUrl’: ‘https://www.blogger.com/contact-form.do’}, ‘displayModeFull’));

Chú ý đặc biệt: Bạn cần thay đổi ID

4764656151717031237

cho phù hợp với blog của bạn.

Cách xác định ID blogspot

Chỉ cần bạn đăng nhập vào trang bảng điều khiển

Hy vọng tut nhỏ tạo form liên hệ ở trang tĩnh blogspot này sẻ giúp ích cho các bạn.

Share

Share

Tweet

Share

Share

Share

Love

Donate MoMo: 035.45.48.599

Bài đăng mới hơn

Bài đăng mới hơn

Bài đăng cũ hơn

Bài đăng cũ hơn

Chia Sẻ Mẫu Form Liên Hệ Đẹp Tuyệt Cho Blogspot / 2023

Bạn đang tìm kiếm một mẫu form dùng cho trang Liên hệ dành cho trang blog của mình? Bạn chưa tìm kiếm được mẫu form nào vừa ý từ các trang blogspot khác chia sẻ?

Mẫu form Liên hệ dành cho Blogspot

Để tạo mẫu form Liên hệ giống như ở ảnh demo ở dưới, các bạn hãy làm theo hướng dẫn tạo mẫu form Liên hệ của mình ngay bên dưới: Mẫu form này tạo ở đâu cũng được, tuy nhiên, theo mình nghĩ thì các bạn nên tạo form liên hệ ở một trang riêng biệt. Ở đây, mình khuyến khích dùng phần “Trang” (Pages) trong cài đặt của Blogspot:

.post_meta, #blog-pager { display: none } form { color: #666 } form.payforpal { margin: auto; text-align: center } #kontak-arlina { margin: auto; max-width: 640px } #ContactForm1_contact-form-name, #ContactForm1_contact-form-email { display: inline-block; width: 45%; height: auto; background: #fff; margin: 20px auto; padding: 15px 12px; color: #000; border: 1px solid rgba(0, 0, 0, 0.2); float: left; transition: all 0.2s } #ContactForm1_contact-form-email { float: right } #ContactForm1_contact-form-email-message { width: 100%; height: 175px; margin: 5px 0 20px 0; padding: 15px 12px; background: #fff; color: #000; border: 1px solid rgba(0, 0, 0, 0.2); resize: none; transition: all 0.3s } #kontak-arlina br { display: none } #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus { outline: none; background: #fff; color: #000; border: 1px solid rgba(0, 0, 0, 0.2); } #ContactForm1_contact-form-submit { float: left; background: #e74c3c; color: #fff; margin: auto; vertical-align: middle; cursor: pointer; padding: 16px 20px; font-size: 15px; text-align: center; letter-spacing: .5px; border: 0; width: 100%; font-weight: 500; transition: all .2s } #ContactForm1_contact-form-submit:hover, #ContactForm1_contact-form-submit:focus { background: #c0392b; color: #fff; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message { width: 100%; margin-top: 35px } .contact-form-error-message-with-border { background: #f47669; border: 0; box-shadow: none; color: #fff; padding: 5px 0; border-radius: 3px } .contact-form-success-message { background: #4fc3f7; border: 0; box-shadow: none; color: #fff; border-radius: 3px } img.contact-form-cross { line-height: 40px; margin-left: 5px } .post-body input { width: initial } @media only screen and (max-width: 640px) { #ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-submit { width: 100%; float: none } }

– Đoạn id màu xanh dương: 5996935446171071211 bạn cần thay lại cho đúng ID của blog của bạn. – Đường dẫn màu đỏ: www.tranbadat.com thay lại bằng địa chỉ trang web của bạn.

5. Đặt tên trang là Liên hệ hay là gì tùy thích các bạn, sau đó lưu lại.

4.4

/

5

(

13

bình chọn

)

Hướng Dẫn Sử Dụng Plugin Form Contact 7 Tạo Form Liên Hệ Trong Quản Trị WordPress / 2023

Plugin Contact Form 7 là sự lựa chọn tối ưu để website của bạn trở nên chuyên nghiệp hơn trong mắt khách hàng. Plugin này sẽ giúp bạn tạo nên một form liên hệ tiện lợi và hiệu quả cho trang web WordPress. Để giúp bạn nắm rõ hơn cách sử dụng plugin này, bài viết sau sẽ hướng dẫn tạo form liên hệ trong WordPress với plugin Contact Form 7. Hy vọng những kiến thức sau giúp ích cho bạn!

1. Hướng dẫn cài đặt plugin form contact 7 cho WordPress

Để cài đặt Contact Form 7, bạn tiến hành như cài đặt các plugin thông thường. Đầu tiên, bạn tìm đến mục “Plugin”, chọn “Tạo mới” (Add new) rồi gõ “Contact Form 7” vào ô tìm kiếm. Sau khi tìm được đúng plugin cần dùng, chọn “Cài đặt” (Install) và cuối cùng là “Kích hoạt” (Activate). Sau khi kích hoạt xong, bạn hãy xem cách tạo form liên hệ trong WordPress ở ngay phần tiếp theo của bài viết!

2. Hướng dẫn tạo form liên hệ trong WordPress với plugin Contact Form 7

Bước 1: Sau khi Contact Form 7 đã được kích hoạt, trong thanh menu sẽ hiện ra một mục mới là “Contact”. Bạn kích vào đó và chọn “Add new” để tạo một form mới.

Bước 2: Nhập tiêu đề cho form liên hệ bạn muốn tạo để dễ phân biệt và quản lý. Bên dưới ô tiêu đề là các trường dữ liệu sẵn có cùng những kiểu dữ liệu mà Contact Form 7 hỗ trợ như văn bản ngắn, email, URL, số điện thoại, ngày, văn bản dài, checkbox,… Khi bạn kích vào 1 field mong muốn, bảng giá trị của nó sẽ hiện ra. Bạn có thể nhập thông tin vào đó rồi nhấn “Insert tag” và ở ô bên trái bạn sẽ thấy field vừa nhập được thêm vào.

Bước 3: Chú ý ở ô shortcode được cung cấp bên dưới tiêu đề. Đó là mã mà bạn có thể copy và dán vào nơi mà bạn muốn form đó xuất hiện. Bạn có thể dán nó vào nội dung trang liên hệ trên website và post để thấy thành quả.

Có thể thấy, cách tạo form liên hệ với Plugin Contact Form 7 khá đơn giản phải không nào! Với công cụ này, bạn sẽ được hỗ trợ tạo một form liên hệ tối ưu với những thông tin cần thiết nhất để tăng tương tác giữa khách hàng và doanh nghiệp của bạn.

3. Một số thủ thuật tối ưu hóa form liên hệ với Contact Form 7

Ngoài cách sử dụng Plugin Contact Form 7 , bạn cũng cần biết một số thủ thuật khác để giúp form liên hệ của mình được tối ưu tốt nhất có thể.

Để thêm trang cảm ơn sau khi khách hàng điền và submit form liên hệ trên website của bạn, hãy cài đặt plugin Contact Form 7 – Success Page Redirects và kích hoạt bình thường. Sau đó, vào chỉnh sửa thông tin trong form này tương tự như cách tạo form trong Contact Form 7.

Trong trường hợp email không thể gửi được qua form liên hệ, có thể nhà cung cấp host của bạn đã chặn hàm gửi email. Để không rơi vào tình trạng này, bạn nên tham khảo các host tầm trung và cao cấp của WordPress.

Sau khi khách hàng submit form liên hệ trên website của bạn, form sẽ xuất hiện một dòng chữ phản hồi, chính là thông báo tình trạng form của họ. Để chỉnh sửa các dòng thông báo này, bạn kích sang mục Message (Thông báo đáng chú ý).

Tại đây, bạn sẽ thấy các trường hợp mà khách hàng có thể gặp phải khi điền form liên hệ của bạn như đã gửi thành công, gửi lỗi, điền sai captcha, chưa điền hết các mục,… Bạn có thể sửa phần chữ tiếng Việt thành những câu thông báo bạn mong muốn.

Tạo Form Liên Hệ Trong WordPress Dễ Dàng Với Contact Form 7 / 2023

Trước đây mình đã có hướng dẫn tạo form liên hệ (hoặc bất cứ form nào) với plugin JetPack. Nhìn chung nó cũng rất chuyên nghiệp và dễ sử dụng, tuy nhiên có khá vấn đề bất cập nếu bạn làm theo cách này bởi vì đầu tiên là bạn cần phải cài plugin JetPack, thứ hai là nó khó tuỳ biến nếu bạn có nhiều kiến thức về PHP, jQuery, HTML, CSS,….

Do vậy, mình sẽ cho bạn một giải pháp tạo form chuyên nghiệp hơn mà lại dễ dàng tuỳ biến, đó chính là dùng plugin chuyên tạo form hoàn toàn miễn phí mang tên Contact Form 7. Plugin này hiện tại được đánh giá là plugin tạo form có khả năng tuỳ biến vượt trội và nó có thể phục vụ được một số việc mà những plugin trả phí có khi không làm được. Mình sẽ hướng dẫn nhiều cách tuỳ biến với form này sau.

Cài đặt plugin Contact Form 7

Các bạn tiến hành cài plugin Contact Form 7 như thông thường và kích hoạt để sử dụng.

Hướng dẫn tạo form với Contact Form 7

Sau khi ấn nút tạo form, bạn sẽ có được cửa sổ như sau:

Text field: Trường dùng để bạn nhập text thông thường, thích hợp tạo field nhập tên, tiêu đề liên hệ,…..

Email: Trường đặc biệt dùng để khách nhập email của họ vào, lúc đó các hệ thống email sẽ hiểu rằng đây là email của người liên hệ để bạn ấn reply nhanh chóng.

URL: Trường dùng để nhập liên kết.

Telephone Number: Một trường đặc biệt để nhập số điện thoại.

Number (spinbox): Trường nhập số có thêm tính năng tạo nút tăng/giảm số.

Number (slider): Trường chọn số đặc biệt, chọn theo kiểu kéo slide, kéo qua phải thì số tăng và kéo qua trái thì số giảm.

Date: Trường riêng biệt để chọn ngày tháng, có tích hợp thêm tính năng chọn theo lịch.

Text area: Trường để nhập text, nhưng khung text to hơn. Thích hợp để làm form nhập nội dung liên hệ.

Dropdown menu: Trường chọn giá trị được định sẵn thông qua menu đổ xuống.

Checkboxes: Trường chọn giá trị định sẵn thông qua việc đánh dấu.

Radio buttons: Cũng là trường đánh dấu giá trị có sẵn nhưng chỉ được chọn 1.

Quiz: Trường nhập nội dung theo kiểu quiz.

CAPTCHA: Trường nhập mã captcha kiểm tra, nếu nhập đúng thì mới có thể gửi form.

File upload: Trường cho phép upload tập tin khi gửi liên hệ qua form này.

Submit button: Chèn nút gửi form.

Quá nhiều lựa chọn phải không? Nhưng nhiêu đó chưa hết đâu, còn có thêm một số plugin hỗ trợ thêm nhiều loại field khác nữa mà mình sẽ đề cập ở một bài khác.

Để thêm một field bất kỳ, bạn ấn vào nút Generate Tag bên tay phải và chọn kiểu field cần tạo, khi ấn vào nó sẽ sổ ra bảng giá trị của field mà bạn có thể nhập (nếu hiểu) hoặc bỏ trống.

Bạn có thể thấy là mặc định họ cũng làm như thế, bởi vì làm như cách trên thì field của bạn sẽ có một cái tiêu đề nằm phía trên và phía dưới là field để nhập. Nhưng mà, bạn cũng có thể chỉnh theo kiểu gì đó mà bạn thích.

Song song với lúc đó, bạn cũng cần copy field trong khung màu xanh lá cây bỏ vào khung Message body của khung Mail phía bên dưới. Khung này có ý nghĩa là cài đặt mẫu các thư liên hệ mà khách gửi cho bạn qua form này. Nếu bạn không copy field màu xanh bỏ vào khung bên phải của phần Mail thì bạn sẽ không thể thấy nội dung mà khách nhập vào trong field đó.

Sau khi chỉnh xong, nhớ ấn nút Save.

3. Chèn form vào Post/Page

Cách chèn cực kỳ đơn giản, chỉ cần copy shortcode trong khung màu nâu ngay bên dưới tiêu đề form.

Và copy vào nội dung của post/page.

Và bạn sẽ có kết quả

Thêm trang cảm ơn cho Contact Form 7

Nếu bạn muốn thêm một trang cảm ơn mà nó sẽ tự động chuyển khách tới sau khi gửi thông tin xong thì bạn có thể cài plugin Contact Form 7 – Success Page Redirects.

Không gửi được được email?

Nếu bạn không gửi được email qua form thì là do nhà cung cấp host của bạn đã chặn hàm gửi mail, vì vậy mình khuyến khích các bạn nên dùng các host tại trang 7 Shared Host tốt nhất cho WordPress vì mình chưa bao giờ gặp các lỗi này khi sử dụng các host đó.

Hoặc bạn có thể sử dụng SMTP để thiết lập server gửi mail riêng.

Nếu bạn dùng địa chỉ email dạng tên miền riêng mà không nhận được email thì xem bài này.

Không nhận được email?

Nếu bạn thấy form đã gửi email thành công mà bạn không thấy email trong inbox thì hãy kiểm tra mục Spam và đọc bài này để khắc phục.

Bạn đang đọc nội dung bài viết Hướng Dẫn Cách Tạo Form Liên Hệ Ở Trang Tĩnh Blogspot / 2023 trên website Jetstartakeontheworld.com. Hy vọng một phần nào đó những thông tin mà chúng tôi đã cung cấp là rất hữu ích với bạn. Nếu nội dung bài viết hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!