Hôm nay mình sẽ chia sẻ tạo trang biểu mẫu liên hệ Bogger có thể chèn trực tiếp vào bất cứ trang web/blog của blogger. Đối với hướng dẫn này, hãy sử dụng trực tiếp HTML trong blogger để nó linh hoạt hơn trong cài đặt hiển thị và các tính năng chỉnh sửa.
Biểu mẫu liên hệ là yếu tố chính của trang Liên hệ với chúng tôi, nơi người dùng chỉ cần điền vào biểu mẫu liên hệ và gửi tin nhắn cho chúng tôi mà không cần rời khỏi trang web.
Trong Hướng dẫn này, tôi sẽ chỉ cho bạn cách bạn có thể tạo một biểu mẫu liên hệ tùy chỉnh sẽ hoạt động trên tất cả các mẫu blogger, vì vậy bạn không cần phải lo lắng về việc hỗ trợ mẫu của mình.
Biểu mẫu liên hệ cho blogger
Trong Hướng dẫn này, Chúng tôi sẽ sử dụng 100forms dịch vụ biểu mẫu Liên hệ của bên thứ ba , cung cấp các biểu mẫu HTML đáp ứng trực tuyến cho trang web của chúng tôi.
Tạo biểu mẫu liên hệ với 100Forms
Bước 1: Truy cập trang web 100forms và đăng ký tài khoản của bạn.
Bước 2: Bây giờ, Chọn Tùy chọn Trình tạo Mẫu từ trình đơn trên cùng. (Bạn cũng có thể chọn các biểu mẫu Tạo sẵn).
Bước 3: Nhấp vào Tạo biểu mẫu mới và thêm các câu hỏi cần thiết của bạn (Các trường).
Bước 4: Hãy chắc chắn để đánh dấu là Trường Tên, Email và Trường Quan trọng Bắt buộc như Hình ảnh bên dưới.
Bước 5: Sau khi thêm tất cả các trường bắt buộc, bây giờ hãy nhấp vào Tạo biểu mẫu HTML.
Bước 6: Bây giờ Sao chép tất cả các Mã HTML và Dán chúng vào trang Liên hệ với chúng tôi trên Blogger của bạn.
Vậy là xong Bạn đã Thêm thành công Biểu mẫu liên hệ vào trang web blogger của mình và biểu mẫu của bạn hiện có thể thu thập thông báo từ người dùng.
Bây giờ, Hãy thay đổi cài đặt biểu mẫu như Nơi chúng ta sẽ nhận được bài gửi, từ những email nào chúng ta sẽ nhận được bài gửi, nơi người dùng sẽ được hướng dẫn sau khi gửi biểu mẫu, v.v.
Cài đặt biểu mẫu
Để thay đổi cài đặt biểu mẫu Bấm vào Cài đặt trên biểu mẫu của bạn trong phần Biểu mẫu của tôi như được hiển thị trong hình ảnh bên dưới.
Tại đây nhiều tùy chọn cài đặt có sẵn:
Cài đặt chungCài đặt SMTP- máy chủ thư đi cho biểu mẫu của bạnBị chặn bởi từ khóa và cụm từ- chặn spam lặp lạiĐịa chỉ IP bị chặn- chặn khách truy cập không mong muốnTrả lời tự động- gửi tin nhắn tự động đến khách truy cập của bạnTải lên tệp- nhận tệp từ khách hàng của bạn qua biểu mẫu của bạnBảng chữ ký- cho phép khách truy cập trang web ký vào biểu mẫu web của bạnĐầu ra PDF- nhận tệp PDF được tạo tự động từ biểu mẫu của bạn
Cài đặt chung
- Tên biểu mẫu: - Chỉ để ghi nhớ biểu mẫu, biểu mẫu được sử dụng trên trang nào hoặc trang nào.
- Email- Địa chỉ Từ: - Không Cần Thay đổi Bất cứ Điều gì.
- Chủ đề: - Thay đổi biểu mẫu liên hệ Chủ đề email gửi như “Đã nhận tin nhắn biểu mẫu liên hệ”
- Địa chỉ trả lại: - Theo mặc định, Người dùng sẽ được chuyển hướng đến trang chủ sau khi gửi biểu mẫu để bạn có thể tạo trang cảm ơn và chuyển hướng người dùng sau khi gửi.
- Địa chỉ Gửi Email: - Nhập địa chỉ email của bạn nơi bạn muốn nhận tin nhắn gửi.
Ẩn liên kết 100forms
Bây giờ Nhiều người dùng muốn ẩn hoặc xóa liên kết 100forms nhưng nếu chúng tôi trực tiếp xóa liên kết thì chúng tôi sẽ nhận được email từ 100forms về nó và biểu mẫu của chúng tôi sẽ không hoạt động.
Đối với vấn đề này, có một thủ thuật đơn giản để chúng tôi có thể ẩn liên kết.
Bước 1: Thêm tên Lớp hidden trên thẻ div như mã bên dưới:
<div style='float:right'><a href='https://www.100forms.com' id='lnk100' title='form to email'>form to email</a></div>Thay thế cái này thành:
<div class='hidden'><a href='https://www.100forms.com' id='lnk100' title='form to email'>form to email</a></div>Bước 2: Bây giờ hãy thêm Mã CSS bên dưới vào trang
<style>.hidden{display:none !important} .invisible{visibility:hidden !important}</style>Bạn cũng có thể áp dụng CSS cho biểu mẫu này theo sự lựa chọn của bạn.
Tạo biểu mẫu liên hệ 100Forms trên Blogger
Từ đây chúng ta có thể tạo trang liên hệ chuyên nghiệp. Đối với hướng dẫn, hãy xem các bước sau:
Bước 1: Trước hết Đăng nhập vào trang Blogger.
Bước 2: Trên bảng điều khiển Blogger, nhấp vào Trang.
Bước 3: Nhấp vào biểu tượng dấu cộng + bên cạnh nút 'TRANG MỚI'.
Bước 4: Nhấp vào 'Chế độ xem HTML'.
Bước 5: Sau đó sao chép mã từ tập lệnh bên dưới và dán nó vào đó.
<style>.blogger-form .submit-button svg path{fill:none!important;stroke:white!important}.blogger-form{border:1px solid #e4e3e1;border-radius:7px;padding:1rem 1.5rem}.blogger-form .input-field{margin-bottom:12px}.blogger-form .input-field>input,.blogger-form .input-field>textarea{resize:vertical;width:100%;border:1px solid #e4e3e1;border-radius:5px;}.input-field>input:focus{border-color:#6a64f1;box-shadow:0 3px 8px rgba(0,0,0,.05)}.blogger-form .input-field>label{font-size:14px;opacity:.8}.blogger-form .submit-button{display:inline-flex;align-items:center;column-gap:4px;outline:0;background-color:#ce2c90;color:white;border:none;padding:12px 20px;border-radius:50px;cursor:pointer;transition:background-color 0.2s ease}.blogger-form .submit-button:hover{box-shadow:2px 2px 8px rgba(0,0,0,.1)}.blogger-form .submit-button:active{box-shadow:4px 4px 8px rgba(0,0,0,.15)}
/* Imgur Upload CSS */
body.loading .loading-modal{display:block}.up-i{margin:15px 0 0;font-size:14px;opacity:.8}.dropzone{position:relative;margin:0 auto;clear:both;margin-top:3px}.infoimg{display:flex;align-items:center;padding:7px 7px;font-size:14px;resize:vertical;width:100%;border:1px solid #e4e3e1;background-color:var(--bg-75);border-radius:5px}.dropzone p{margin:0;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;padding-left:10px}.input{height:40px;left:0;outline:0;opacity:0;position:absolute;top:0;width:100%;cursor:pointer}.status{border-radius:5px;text-align:center;margin-left:auto;margin-right:auto}input.image-url{width:100%;color:var(--tx-85);background-color:var(--inputBg);border:1px solid var(--contentBd-color);padding:5px 5px 5px 38px;border-radius:5px;background-repeat:no-repeat;background-position:9px center;background-size:20px 20px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='dimgray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.18009 16.0199C7.42009 15.9499 6.6701 15.5999 6.0901 14.9899C4.7701 13.5999 4.7701 11.3199 6.0901 9.92989L8.2801 7.6299C9.6001 6.2399 11.7701 6.2399 13.1001 7.6299C14.4201 9.0199 14.4201 11.2999 13.1001 12.6899L12.0101 13.8399'/%3E%3Cpath d='M15.8202 7.97998C16.5802 8.04998 17.3302 8.39998 17.9102 9.00998C19.2302 10.4 19.2302 12.68 17.9102 14.07L15.7202 16.37C14.4002 17.76 12.2302 17.76 10.9002 16.37C9.58016 14.98 9.58016 12.7 10.9002 11.31L11.9902 10.16'/%3E%3Cpath d='M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z'/%3E%3C/svg%3E");
}.linkimg{width:100%;margin:20px auto;display:inline-block;border:1px solid var(--border);background-color:var(--bg-75);border-radius:5px}.dropzone.dropzone-dragging{border-color:#000}.loading-modal{background-color:rgba(255,255,255,.8);display:none;position:fixed;z-index:1000;top:0;left:0;height:100%;width:100%}.loading-table{border:none!important;margin-left:auto;margin-right:auto;margin-top:15%;margin-bottom:15%}.loading-image{min-width:100px;opacity:1;filter:blur(0)}.infoimg svg{stroke:rgb(0 0 0 / 84%)!important;fill:none!important}</style>
<form name='contact-form' method='post' action='//submit.form' class='blogger-form' onSubmit='return validateForm();'>
<div class='input-field'><label for='contact-form-1-name'>Họ tên:<span style='color:red'> *</span></label><br>
<input type='text' id='data_1' name='data_1' style='' class='form-control'/>
</div>
<div class='input-field'><label for='contact-form-email'>Email:<span style='color:red'> *</span></label><br>
<input type='text' id='data_2' name='data_2' style='' class='form-control'/>
</div>
<div class='input-field'><label for='contact-form-name'>Link chứng từ (nếu có):</label><br>
<input type='text' id='data_3' name='data_3' style='' class='form-control'/>
</div>
<div class='input-field'><label for='contact-form-message'>Nội dung:<span style='color:red'> *</span></label><br>
<textarea id='data_4' false name='data_4' style='' rows='6' class='form-control'></textarea>
</div>
<button class='submit-button' name='skip_Submit' value='Submit' type='submit'><svg style='height:20px' class='line' viewBox='0 0 24 24'><path d='M7.39999 6.32003L15.89 3.49003C19.7 2.22003 21.77 4.30003 20.51 8.11003L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.91999 14.08L7.39999 13.24C1.68999 11.34 1.68999 8.23003 7.39999 6.32003Z'></path><path d='M10.11 13.6501L13.69 10.0601'></path></svg>Gửi</button>
<div>
<div class='hidden'><a href='https://www.100forms.com' id='lnk100' title='form to email'>form to email</a></div>
<script src='https://www.100forms.com/js/FORMKEY:XXXXXXXXX' type='text/javascript'></script>
</div>
<div class='up-i'>
Tải chứng từ:
<div class='dropzone'>
<div class='infoimg'>
<svg class='line' viewBox='0 0 24 24'><path d='M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z'></path><path d='M8.46997 13.4599L12 9.93994L15.53 13.4599'></path></svg>
<p>Chọn file ảnh...</p>
</div>
<input type='file' class='input' accept='image/*'></div>
<div class='status'>
</div>
</div>
</form>
<script type="text/javascript">
function validateForm() {
if (isEmpty(document.getElementById('data_1').value.trim())) {
alert('Hãy nhập họ tên của bạn!');
return false;
}
if (isEmpty(document.getElementById('data_2').value.trim())) {
alert('Hãy điền địa chỉ Email của bạn!');
return false;
}
if (!validateEmail(document.getElementById('data_2').value.trim())) {
alert('Phải nhập Email hợp lệ của bạn!');
return false;
}
if (isEmpty(document.getElementById('data_4').value.trim())) {
alert('Bạn chưa nhập nội dung của bạn!');
return false;
}
return true;
}
function isEmpty(str) { return (str.length === 0 || !str.trim()); }
function validateEmail(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,15}(?:\.[a-z]{2})?)$/i;
return isEmpty(email) || re.test(email);
};
/* Imgur Upload Script */
document.querySelector(".dropzone input").addEventListener("change", function (event) {
let file = event.target.files[0];
if (!file) {
alert("Chưa chọn ảnh!");
return;
}
let status = document.querySelector(".status");
status.classList.remove("bg-success", "bg-danger");
status.innerHTML = "<p>Đang tải lên...</p>";
let formData = new FormData();
formData.append("image", file);
formData.append("key", "XXXXXXXXXXXXXXXXXX");
fetch("https://api.imgbb.com/1/upload", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
let get_link = data.data.url;
status.classList.add("bg-success");
status.innerHTML = `
<div class="linkimg" style="display: flex; align-items: center; gap: 10px;">
<input class="image-url extL" id="copylinkimg" onclick="event.stopPropagation(); this.select(); return false;" value="${get_link}" readonly/>
<button type="button" onclick="copyToClipboard(event)" style="cursor: pointer; padding: 5px 10px; background: #ce2c90; color: #fff; border: none; border-radius: 5px;">Sao chép</button>
</div>
<div class="showimg">
<img class="img" alt="Imgbb-Upload" src="${get_link}" width="300"/>
</div>`;
} else {
status.classList.add("bg-danger");
status.innerHTML = `<p>Lỗi upload: ${data.error.message}</p>`;
}
})
.catch(error => {
status.classList.add("bg-danger");
status.innerHTML = `<p>Lỗi: Không thể upload ảnh</p>`;
console.error("Lỗi upload:", error);
});
});
function copyToClipboard(event) {
event.stopPropagation();
event.preventDefault();
let copyText = document.getElementById("copylinkimg");
copyText.select();
document.execCommand("copy");
alert("Đã sao chép link ảnh!");
}</script>| Đánh dấu | Thông tin |
|---|---|
XXXXXXXXX |
Key form bạn tạo trên 100forms |
XXXXXXXXXXXXXXXXXX |
API Key của ImgBB |
Bước 6: Đặt tiêu đề cho trang, sau đó Xuất trang bằng cách nhấp vào Xuất bản.
Trên đây là toàn bộ hướng dẫn tạo biểu mẫu liên hệ Blogger với 100Forms.
Nếu có bất cứ thắc mắc hãy comment ngay phía dưới cho mình biết nhé!
Đăng nhận xét