Cập nhật thông tin chi tiết về Hướng Dẫn Cách Tạo Form Liên Hệ Ở Trang Tĩnh Blogspot mới nhất trên website Bothankankanhatban.com. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để 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
Hướng Dẫn Tạo Form Liên Hệ Với Contact Form 7 Đơn Giản
Với form liên hệ đẹp sẽ giúp website của bạn trở nên chuyên nghiệp hơn với khách hàng, dễ dàng thu hút sự tương tác hơn. Hôm nay mình sẽ hướng dẫn các bạn sử dụng plugin Contact Form 7 để tạo ra những form tuyệt đẹp cực kỳ đơn giản.
Việc đầu tiên chúng ta cần là cài đặt plugin Contact Form 7, (các bạn nào không biết cách cài đặt thì các bạn có thể xem lại bài hướng dẫn cài plugin mình đăng ở đây). Các bạn có thể tìm kiếm plugin ngay tại giao diện tải plugin với từ khóa Contact Form 7 hoặc vào tải trực tiếp tại địa chỉ dưới: https://vi.wordpress.org/plugins/contact-form-7/
Sau khi cài đặt và kích hoạt bên menu sẽ xuất hiện Contact
Biểu mẫu: Nơi thiết kế mẫu gửi form
Thiết lập email: Cấu hình người nhận, người gửi, thư gửi đến email…
Các thông báo cho người dùng biểu mẫu: Nơi cài đặt thông báo khi người dùng gửi mail thành công hoặc thất bại..
Chúng ta tìm hiểu phần đầu tiên là biểu mẫu ( phần quan trọng nhất). Ở phần này chúng ta sẽ có những tag html như sau:
Text: Nhập giá trị là chữ
Email: Nhập giá trị là email
Url: Nhập giá trị là url
Tel: Nhập giá trị định dạng theo số điện thoại
Number: Nhập định dạng là số
Date: Tạo khung chọn ngày tháng hiện hàng
Text area: Tạo lớn nhập nội dung
Dropdown-menu: Tạo menu xổ xuống
Checkboxes: Tạo ra các ô check
Radio buttons: Tạo ra các radio chọn nó tương tự như checkboxes
File: Tạo upload file đính kèm
Submit: Xác nhận gửi thư
ReCAPTCHA: Mã CAPTCHA chống spam ( các bạn xem hướng dẫn tạo ReCAPTCHA cho Contact Form 7)
Ở đây mình chỉ liệt kê những tag html thường dùng, nếu các bạn chưa biết thì về các tag html này thì có thể tham khảo series html căn bản của mình ở những kỳ trước. Mình sẽ tạo demo từ tag html Text, mấy cái còn lại các bạn có thể dựa vào mà làm. Sau khi chọn 1 tag html sẽ xuất hiện bảng sau
Field type: Nếu các bạn bắt buộc người dùng không được bỏ trống giá trị thì hãy check vào ô Required field ( thường áp dụng cho Tên, Số điện thoại, Email). Ở đây mình check luôn
Tên: Tên của tag html ( các bạn phải nhớ tên này vì chúng ta sẽ sử dụng nó ở phần cài đặt tiếp theo, ở đây mình đặt tên là username
Giá Trị Mặc Định: Mình ghi là Hãy nhập họ và tên, ở đây mình sẽ vào ô Use this text as the placeholder of the field để nhắc nhở người dùng biết.
Id attribute: Id của html, ở đây mình nhập là idname
Class attribute: Thuộc tính class của tag html, mình đặt là classname
Xong tất cả rồi các bạn kéo xuống, pluign sẽ tự sản sinh cho chúng ta một đoạn mã: [text* username “Hãy nhập họ và tên”], các bạn nhấn insert Tag để chèn vào sử dụng.
Tương tự như vậy mình sẽ tạo ra thêm 3 tag html nữa là: Email, Số điện thoại và Submit để gửi form.
Chúng ta lưu lại và tiếp tục qua tab cuối là các thông báo cho người dùng biểu mẫu, ở tab này chỉ đơn giản là chứa những đoạn thông báo, các bạn chỉ việc dịch lại hoặc điền theo ý mình thích là được.
Cuồi cùng chúng ta lưu lại thêm 1 lần nữa và copy đoạn shortcode và dán vào bài viết hoặc widgets mà mình muốn xuất hiện. Vậy là bạn đã có được 1 form liên hệ tuyệt đẹp, viết thì có vẻ lâu nhưng làm thì rất nhanh và đơn giản nha. Các bạn có thể xem lại video về contact form 7 mình hướng dẫn để hiểu rõ hơn.
Videos
Những mẫu form liên hệ của contact form 7 tuyệt đẹp
Cách tạo popup cho contact form 7 đơn giản
Sửa lỗi không gửi email được với plugin Easy WP SMTP
Tạo Form Liên Hệ Trong WordPress Với Contact Form 7
Trong bài hôm nay mình sẽ chọn cho bạn một giải pháp tạo form chuyên nghiệp hỗ trợ nhiều ngôn ngữ (bao gồm tiếng việt) mà lại dễ dàng tùy biến, đó là plugin chuyên tạo form hoàn toàn miễn phí có tên Contact Form 7 . Plugin này hiện tại được đánh giá là plugin tạo form có khả năng tùy biến vượt trội và có thể làm được một số việc mà những plugin trả phí không làm được.
Cài đặt plugin Contact Form 7
Các bạn tiến hành cài đặt 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
Trước khi tạo form, bạn tiến hành chọn ngôn ngữ sử dụng trên form, ở đây chúng ta chọn ngôn ngữ tiếng việt “Vietnamese” từ danh sách rồi nhấn nút Add New. Hoặc nếu sử dụng mặc định ngôn ngữ tiếng anh thì nhấn Add New.
Sau khi nhấn nút tạo form, bạn sẽ có được cửa sổ như sau:
Text field: trường nhập text thông thường, như tạo field nhập têm, tiêu đề liên hệ,..
Email: trường đặc biệt dùng để khách nhập email của họ vào. Email này sẽ được các hệ thống email hiểu rằng đây là email của người liên hệ để bạn nhấn reply nhanh chóng.
URL: trường dùng để nhập liên hệ.
Telephone Number: dùng trường này để nhập số điện thoại.
Number (spinbox): trường nhập số có thêm nút tăng giảm số.
Number (slider): trường nhập số đặc biệt có dạng slider, chọn số bằng cách kéo thả slide.
Date: trường chọn ngày tháng, có thể chọn theo lịch.
Textarea: trường dùng để nhập một đoạn text có nhiều dòng. Thích hợp để tạo nội dung liên hệ.
Dropdown menu: trường chọn giá trị được định sẵn từ danh sách đổ xuống.
Checkboxes: trường có kiểu checkbox.
Radio buttons: Cũng là trường đánh dấu nhưng chỉ chọn được một.
Quiz: trường nhập nội dung theo kiểu câu hỏi quiz
CAPTCHA: trường nhập mã captcha, dùng trường này để ngăn chặn spam vào form liên hệ.
File Upload: trường cho phép upload tập tin khi gửi liên hệ qua form.
Submit button: nút gửi dữ liệu form.
Có rất nhiều lựa chọn phải không, nhưng nếu bạn muốn sử dụng các kiểu trường khác thì còn có một số plugin hỗ trợ tạo thêm trường cho contact form 7 mà mình sẽ đề cập ở một số bài khác.
Sau khi chỉnh sửa xong cho field bạn nhìn thấy 2 shortcode của field sinh ra, nhìn bên trái bạn sẽ sử dụng shortcode đó để thêm vào nội dung trường của form. Bạn nên dùng cấu trúc mặc định của field có html dạng:
Chú ý: Copy shortcode đầu tiên. Sử dụng cấu trúc này 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. Tuy vậy bạn có thể sử dụng tùy biến HTML tùy ý.
Tiếp đó, 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. Đây là nội dung email bạn nhận được khi có khách hàng gửi liên hệ, nếu ban không copy vào nội dung khung này thì bạn sẽ không thể thấy nội dung của field đó mà khách hàng nhập.
Chèm form vào Post/Page
Sau khi nhấn Save bạn nhìn thấy một shortcode của form được sinh ra , copy nội dung shortcode này và đặt vào trong post/page nơi bạn muốn form hiển thị .
Copy vào nội dung post/page:
Kết quả nhận được:
Bạn có thể sử dụng form này ở bất kỳ việc gì bạn muốn.
Thêm thuộc tính class và id cho thẻ form
Bạn có thể thêm thuộc tính ‘id’ và ‘class’ cho form bằng cách thêm thuộc tính html_id và html_class vào shortcode [ contact-form-7 ]. Ví dụ:
[ contact-form-7 title="Contact form 1" html_id="contact-form-1234" html_class="form contact-form" ]Thay đổi vị trí hiển thị thông báo Messsages
Thông báo trả về của form Mặc định sau khi nhấn nút submit form, nội dung thông báo trả về của form được hiển thị bên dưới phần nội dung form.
Bạn có thể di chuyển thông báo này ở bất kỳ vị trí nào bằng cách đặt shortcode [ response ] trong form template. Bạn được phép sử dụng nhiều lần ở nhiều vị trí trùng lặp đều hiển thị chung nội dung messages. Ví dụ:
[response] Your Name (required) [ text* your-name ] Subject [ text your-subject ] Your Message [textarea your-message] [response] [submit "Send"]Thông báo lỗi validation yêu cầu cho trường form (require) Xem hướng dẫn này: Tùy biến thông báo lỗi validation – Contact Form 7
Hướng dẫn Tạo Form Field
[ text sanpham id:sanpham class:class1 ]Trừ thuộc tính số gồm ‘size’ và ‘maxlength’ theo thứ tự này mỗi giá trị thuộc tính ngăn bởi dấu ‘/’, ví dụ:
– Thiết lập giá trị mặc định cho field.
[ text name "gia tri mac dinh" ]Ví dụ tạo các option cho thẻ select. [ code lang=”plain”] [select YOUR_VALUE id:YOUR_VALUE “1” “2” “3” ] [/code] Sử dụng thuộc tính ID bạn có thể thiết lập giá trị cho field thông qua javascript.
Tạo captcha
Để chèn captcha gồm field và ảnh hiển thị nội dung captcha vào form, bạn nhấn Generate Tag và chọn CAPTCHA tuy nhiên để có thể tạo ảnh captcha bạn phải thêm plugin Really Simple CAPTCHA.
Có 2 shortcode, sinh ra một cái tạo trường input nhập captcha và shortcode thứ 2 hiển thị ảnh chứa nội dung ký tự captcha. Ví dụ:
[captchar captcha-498] [captchac captcha-498]Chép vào template form cột trái và save lại form. Mở lại trang chứa form kết quả captcha như thế này.
Ngoài các thiết lập chung cho field, còn Có một số thuộc tính cài đặt riêng cho hình captcha như: mầu chữ, mầu nền, kích thước.
Đọc tiếp: Sử lý dữ liệu trong contact form 7
Tạo Form Liên Hệ Cực Đẹp WordPress 2022
Form liên hệ hay còn gọi là khu vực giao tiếp giữa khách hàng và quản trị website thông quan giao thức trực tiếp trên website. Bạn có thể cài đặt bất kỳ plugin tạo form liên hệ nào cho wordpress đều được.
Tuy nhiên nó mất khá nhiều thời gian và công sức đối với những người mới bắt đầu với wordpress vì thế bài viết này tôi sẽ hướng dẫn cách để tạo form liên hệ trong wordpress thông qua plugin Ninja Forms.
Ninja Forms là một plugin tạo mẫu liên hệ miễn phí tốt nhất cho WordPress. Việc xây dựng các biểu mẫu liên hệ chỉ trong vòng vài phút thao tác, bằng cách sử dụng công cụ mẫu kéo và thả đơn giản nhưng mạnh mẽ. Việc cài đặt và cấu hình vô cùng nhanh chóng và dễ dàng mà không cần bắt bạn phải biết đến code.
Những tính năng chính của Ninja Forms
Giao diện ở phiên bản (2017) thay đổi hoàn toàn.
Không giới hạn số lượng biểu mẫu, trường, email.
Thêm ô dành riêng email, ngày tháng (w/datepicker), số điện thoại, địa chỉ và hơn thế nữa.
Sửa đổi trường của riêng bạn rồi lưu lại làm mục yêu thích để sử dụng lại sau.
Buộc các trường bắt buộc và định dạng dữ liệu chính xác.
Cung cấp cho người dùng của bạn một thông báo thành công.
Quản lý, Chỉnh sửa và xuất biểu mẫu người dùng.
Xuất khẩu và hình thức nhập khẩu và các lĩnh vực yêu thích.
Gửi dữ liệu biểu mẫu qua email cho quản trị viên mỗi khi một mẫu được xử lý.
Tùy chỉnh email và thêm HTML cho ảnh, video bằng trình chỉnh sửa HTML Summernote.
Một số tùy chọn chống thư rác bao gồm Google reCaptcha, câu hỏi các lĩnh vực.
Gửi biểu mẫu thông qua AJAX cho phép trải nghiệm người dùng liền mạch mà không cần làm mới trang.
Hướng dẫn tạo form liên hệ trong wordpress
Để tạo form liên hệ trên website trước tiên cần cài đặt và kích hoạt plugin ninja forms bằng 2 cách cài đặt trong khu vực quản trị của website hoặc upload trực tiếp vào đường dẫn content/plugin như hình ảnh bên dưới.
2. Hướng dẫn sử dụng Ninja Forms
Blank Form: Biểu mẫu trống cho phép bạn tạo bất kỳ loại biểu mẫu nào bằng cách sử dụng trình tạo kéo và thả.
Contact Us: Cho phép người dùng liên hệ với bạn bằng biểu mẫu liên hệ đơn giản.
Quote Request: Quản lý yêu cầu báo giá từ trang web một cách dễ dàng bằng mẫu này.
Event Registration: Cho phép người dùng đăng ký cho sự kiện tiếp theo dễ dàng để hoàn thành mẫu.
Ở đây tôi sẽ hướng dẫn tạo form liên hệ trên trang website, nhấp chuột vào “Blank Form”.
Ngoài ra bạn cũng có thể thêm các vật dụng khác như html, họ tên đẹm, thành phố, Google reCaptcha để tránh spam… Sau khi làm xong ấn lưu lại và xuất bản form mới của bạn.
Sửa lỗi không gửi được mail trong wordpress
Admin đang update bài viết ” hướng dẫn thiết lập smtp gmail “.
Bạn đang xem bài viết Hướng Dẫn Cách Tạo Form Liên Hệ Ở Trang Tĩnh Blogspot trên website Bothankankanhatban.com. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung 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!