佛系程序员_ 实践：静态网页用户联系信息提交到Firebase的集合

学习笔记

网站开发

发布日期: 2025-11-27 02:24:05

喜欢量: 6 个

阅读次数: 95

免费使用

1.创建项目

2.注册应用

3.创建数据库

4.创建集合

集合相当于一个表格

一个网站对应一个集合

5.编写代码

6.网页提交测试

我把这个过程录制了一个视频，发到抖音了！
```
2.35 hoD:/ 10/04 L@w.Sy 搞定！静态网站用户联系表单存入Firebase 静态网页也能存表单数据？无需自建数据库、不用后端开发！教你免费使用 Firebase Database，5 步实现表提交到集合表～ 零成本、零门槛，静态网站数据存储难题直接搞定，新手也能快速上手！  https://v.douyin.com/cnvEJRFE8bw/ 复制此链接，打开Dou音搜索，直接观看视频！
```

相关代码：
index.html
```
    放在head部分
		
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
		
		
   放在body部分
     <form class="contact-form"  id="contactForm" >
                    <input type="text" placeholder="您的姓名" id="name" name="name" required>
                    <input type="email" placeholder="您的邮箱" id="email" name="email" value="test@gmail.com" required>
                    <input type="tel" id="phone" name="phone" placeholder="Your Phone">
                    <textarea placeholder="您的留言" rows="5" id="message" name="message" required></textarea>
                    <button type="submit" class="submit-btn">发送消息</button>
   </form>
	 
	 放在body的末尾部分
	 <script src="script.js"></script>
	 
```

script.js
```
其他的代码

// Firebase配置
const firebaseConfig = {
  apiKey: "填写自己的",
  authDomain: "填写自己的",
  projectId: "填写自己的",
  storageBucket: "填写自己的",
  messagingSenderId: "",
  appId: "",
};

// 初始化Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

// 修改现有的表单提交处理函数
function handleFormSubmit(e) {
  e.preventDefault();
  
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const phone = document.getElementById('phone').value;
  const message = document.getElementById('message').value;
  console.log(name)
  
  // 保存到Firebase Firestore
  db.collection("travel-website1-contact").add({
    name: name,
    email: email,
    phone: phone,
    message: message,
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  })
  .then(() => {
    // 成功提交后的处理
    alert(getCurrentLanguageText('formSuccess'));
    document.getElementById('contactForm').reset();
  })
  .catch((error) => {
    // 错误处理
    console.error("Error adding document: ", error);
    alert(getCurrentLanguageText('formError'));
  });
}

// 获取当前语言对应的成功/错误消息文本
function getCurrentLanguageText(key) {
  const currentLang = document.documentElement.lang || 'en';
  const texts = {
    formSuccess: {
      zh: '消息发送成功！',
      en: 'Message sent successfully!',
      tr: 'Mesaj başarıyla gönderildi!'
    },
    formError: {
      zh: '发送失败，请稍后重试。',
      en: 'Failed to send message. Please try again later.',
      tr: 'Mesaj gönderilemedi. Lütfen daha sonra tekrar deneyin.'
    }
  };
  
  return texts[key][currentLang] || texts[key]['en'];
}

// 绑定表单提交事件
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('contactForm');
  if (form) {
    form.addEventListener('submit', handleFormSubmit);
  }
});
```

yyii

http://www.amtb.info/show/MjU5

本博客所有文章除特別声明外,转载请注明来源佛系程序员 !