我尝试将我的 Web 应用连接到 Firebase 数据库，但无法向其中添加信息。我希望用户将信息输入系统，并将此信息存储到名为“appts”的数据库中：

JS 函数：

var config = {
apiKey: "____________",
authDomain: "southern-motors.firebaseapp.com",
databaseURL: "https://southern-motors.firebaseio.com",
projectId: "southern-motors",
storageBucket: "southern-motors.appspot.com",
messagingSenderId: "852338882104"
};
firebase.initializeApp(config);

var messagesRef = firebase.database().ref('appts');

document.getElementById('appts').addEventListener('submit', addAppt);
function addAppt(e) {
  e.preventDefault();
var inputName = document.getElementById("customerName").value;
var inputEmail = 
document.getElementById("customerEmail").value.toLowerCase();
var inputPhone = document.getElementById("customerPhone").value;
var inputDate = document.getElementById("customerDate").value;

messagesRef.push({
                name: inputName,
                email: inputEmail,
                phone: inputPhone,
                date: inputDate
            }).then(function() {
console.log("Document successfully written!");
location.reload();
})
.catch(function(error) {
console.error("Error writing document: ", error);
});

}

输入表单：

<div class="contact-form">
         <form id="appts" 
action="https://formspree.io/MYEMAIL" method="POST">
        <label>Name: </label><input id="customerName" class ="form-control" 
type="text" name="Name of Customer" required></input>

        </br>
        <label>Email Address: </label><input id="customerEmail" class="form- 
control" type="email" name="Email Address" required></input>
        </br>

        <label>Phone no.: </label><input id="customerPhone" class ="form- 
control" type="number" name="Phone No." required></input>
        </br>
        <label>Date & Time of Test Drive: </label><input id="customerDate" 
class ="form-control" type="datetime-local" name="Date & Time of Test Drive" 
required></input>
        </br>

        <input type="submit" value="Submit">
    </form>
</div>

类似的“注册用户”函数适用于不同的表单，因此我不确定为什么它不起作用。欢迎提出所有建议。