Форма обратной связи с помощью javascript и Firebase
05 Feb 2018
local_offer
html
Пример реализации формы обратной связи для лэндинг страницы без использования PHP. Оповещение администратора/владельца страницы предусматривается отправкой push уведомления из Firebase (пока не реализовано). Авторизация и валидация пропущена, для упрощения примера.
В процессе ...
Запись данных
Для работы данного примера в Firebase должен быть включен анонимный вход и прописано правило (Database -> Rules) разрешающее чтение и запись для всех (опять же для простоты примера).
{
"rules": {
".read": true,
".write": true
}
}
Форма обратной связи:
<section id="four">
<div class="container" id="contactForm">
<h3>Контакты</h3>
<p>Для связи воспользуйтесь следующей формой:</p>
<form method="post" action="#">
<div class="row uniform">
<div class="6u 12u(xsmall)"><input type="text" name="name" id="contactName" placeholder="Имя" /></div>
<div class="6u 12u(xsmall)"><input type="email" name="email" id="contactEmail" placeholder="Email" /></div>
</div>
<div class="row uniform">
<div class="12u"><input type="text" name="subject" id="contactSubject" placeholder="Тема" /></div>
</div>
<div class="row uniform">
<div class="12u"><textarea name="message" id="contactMessage" placeholder="Сообщение" rows="6"></textarea></div>
</div>
<div class="row uniform">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="special" value="Отправить сообщение" onclick="return saveToFirebase(event)" id="contactSendButton" /></li>
<li><input type="reset" value="Сбросить" id="contactResetButton" /></li>
</ul>
</div>
</div>
</form>
</div>
<div class="container" id="contactResult"></div>
</section>
<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
Скрипт отправки данных в Firebase:
// Initialize Firebase
var config = {
apiKey: <API_KEY>,
authDomain: "webnote-satin-pl.firebaseapp.com",
databaseURL: "https://webnote-satin-pl.firebaseio.com",
projectId: "webnote-satin-pl",
storageBucket: "webnote-satin-pl.appspot.com",
messagingSenderId: <MSG_SENDER_ID>
};
firebase.initializeApp(config);
var database = firebase.database();
function saveToFirebase(event) {
var contactName = document.getElementById('contactName').value.trim();
var contactMessage = document.getElementById('contactMessage').value.trim();
var contactSubject = document.getElementById('contactSubject').value.trim();
var contactEmail = document.getElementById('contactEmail').value.trim();
var msgId = Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000;
if (contactName.length > 0) {
writeMessageData(msgId, contactName, contactEmail, contactSubject, contactMessage);
}
document.getElementById('contactForm').style.display = 'none';
document.getElementById('contactResult').innerHTML = '<p>Ваше сообщение отправлено, в ближайшее время я свяжусь с вами.</p>';
console.log('msgId: ' + msgId);
return false;
};
function writeMessageData(msgId, name, email, subject, message) {
firebase.database().ref('messages/' + msgId).set({
username: name,
email: email,
subject: subject,
message: message
});
};
Чтение данных
Просмотр сообщений отправленных с лэндинг страницы.
<section id="firebase-test">
<div class="container">
<input type="submit" onclick="return getMessages(event)" value="Обновить">
<br><br>
<p>Отправленные сообщения с сайта:</p>
<div id="resultMessages"></div>
</div>
</section>
<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
Скрипт получения данных из Firebase:
// Initialize Firebase
var config = {
apiKey: <API_KEY>,
authDomain: "webnote-satin-pl.firebaseapp.com",
databaseURL: "https://webnote-satin-pl.firebaseio.com",
projectId: "webnote-satin-pl",
storageBucket: "webnote-satin-pl.appspot.com",
messagingSenderId: <MSG_SENDER_ID>
};
firebase.initializeApp(config);
var database = firebase.database();
function getMessages(event) {
document.getElementById('resultMessages').innerHTML = '<table id="resultTable">';
var table = document.getElementById("resultTable");
var header = table.createTHead();
var row = header.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "id";
cell2.innerHTML = "Email";
cell3.innerHTML = "Name";
cell4.innerHTML = "Subject";
cell5.innerHTML = "Message";
var i = 0;
var body = table.createTBody();
var usersRef = firebase.database().ref('messages/');
usersRef.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var row = body.insertRow(i);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = childSnapshot.key;
childSnapshot.forEach(function(childValue) {
var childKey = childValue.key;
var childData = childValue.val();
switch (childKey) {
case 'email':
cell2.innerHTML = childData;
break;
case 'username':
cell3.innerHTML = childData;
break;
case 'subject':
cell4.innerHTML = childData;
break;
case 'message':
cell5.innerHTML = childData;
break;
default:
break;
}
});
i = i + 1;
});
});
};


