สอนสร้างฟอร์มติดต่อพร้องส่งข้อมูลไปที่ Firebase Firestone โดยใช้ HTML CSS JavaScript

byMayCtth2 -
0

 



    สวัสดีครับทุกคนในบทความนี้ผมจะสอนการทำฟอร์มติดต่อโดยใช้ HTML CSS JavaScript ครับ และให้มีการส่งข้อมูลไปที่ Firestone ของ Firebase ครับ 

 งั่นเรามาเริ่มกันเริ่มนะครับ ขั้นตอนแรกให้ทุกคนสร้างไฟล์ที่มีชื่อว่า index.html ขึ้นมาก่อนเลยนะครับ เหมือนกับโค้ดตัวอย่างนี้. 


<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form ติดต่อ</title>
  <link rel="stylesheet" href="/css/support.css">
</head>

<body>
  <div class="contenter">
    <div class="content">
      <form action="group">
        <h2>Form ติดต่อ</h2>
        <div class="form-group">
          <label>ชื่อ:</label><br>
          <input type="text" id="name" name="name" placeholder="ใส่ชื่อ">
        </div>
        
        <div class="form-group">
          <label>เบอร์โทรศัพท์:</label><br>
          <input type="number" id="phone" name="phone" placeholder="ใส่เบอร์โทรศัพท์">
        </div>
        
        <div class="form-group">
          <label>อีเมล์:</label><br>
          <input type="email" id="email" name="email" placeholder="ใส email">
        </div>
        
        <div class="form-group">
          <label>ข้อความ:</label><br>
          <input type="area" id="area" name="area" placeholder="ใส่เรื่องที่ต้องการติดต่อ">
        </div><br 
        
        <button type="submit" id="submit">ติดต่อ</button>


      </form>
    </div>
  </div>
</body>
</html>

 ซึ่งในโค้ด index.html นี้จะประกอบด้วย Tag Form Form-groun เป็นต้น 


ต่อไปจะเป็นในส่วนของโค้ด css.


  @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400&display=swap');

  body {
    margin: 0;
    padding: 0;
    font-family: 'Kanit', sans-serif;
  }
  
  .contenter {
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
  height: 100vh;
  font-family: 'Kanit', sans-serif;
}

.content {
  border-radius: 10px;
  font-family: 'Kanit', sans-serif;
  padding: 5px;
  height: 100vh;
}

h1 {
  font-size: 19px;
  color: white;
  text-align: center;
}

form {
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  width: 100%;
  position: relative;
}

label {
  font-size: 19px;
  padding: 10px;
}

label span {
  margin-bottom: 32px;
  font-size: 12px;
  color: red;
  position: absolute;
}

input[type=text], input[type=email], input[type=number] {
  width: 100%;
  max-width: 300px;
  height: 20px;
  border: none;
  background-color: whitesmoke;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  font-family: 'Kanit', sans-serif;
}

input[type=area] {
  width:100%;
  max-width: 300px;
  height: 200px;
  padding: 10px;
  margin-top: 0;
  border: none;
  border-radius: 10px;
  background-color: whitesmoke;
  
}

button {
  width: 100px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid deepskyblue;
  background: none;
  color: black;
  font-family: 'Kanit', sans-serif;
}


ในโค้ด css อย่าลืม link โค้ดเข้ากับไฟล์ index.html นะครับ 


ต่อไปนะครับจะเป็นในส่วนของ JavaScript ในส่วนนี้จะให้ทุกคนเพิ่งโค้ด JavaScript ลงใน tag ระหว่าง </body> กับ </html> .

<script type="module">
  import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.18.0/firebase-app.js';
  import { getFirestore, collection, addDoc } from 'https://www.gstatic.com/firebasejs/9.18.0/firebase-firestore.js';

  const firebaseConfig = {
  // เพิ่มในส่วน sdk Firebase 
  
};

  const app = initializeApp(firebaseConfig);
  const firestore = getFirestore(app);

  const form = document.querySelector('form');
form.addEventListener('submit', async (event) => {
  event.preventDefault(); 
  
  const name = form.elements.name.value;
  const email = form.elements.email.value;
  const phone = form.elements.phone.value;
  const area = form.elements.area.value;

  try {
    await addDoc(collection(firestore, 'support'), { // เพิ่ม Firestone collection ที่มีชื่อว่า"support"
      name: name,
      email: email,
      phone: phone,
      area: area
    });
    console.log('Data saved successfully');
    alert("บันทึกข้อมูลสำเร็จ");
    
    document.getElementById("name").value = "";
    document.getElementById("email").value = "";
    document.getElementById("phone").value = "";
    document.getElementById("area").value = "";

  } catch (error) {
    console.error(error);
    alert("ข้อมูลว่าง");
  }
});

</script>
</html>

 


ในโค้ดนี้เราจะมีการติดตั้ง Firebase SDK Config ครับ จากนั้น const ในแต่ล่ะตัวแปร เพื่อที่จะส่งข้อมูลลงใน Firestone collection ที่มีชื่อว่า “ support "


โค้ดดาวน์โหลดเป็นไฟล์ ZIP ยังไม่มา

Tags:

สวัสดีนี่คือฟอร์มความคิดเห็นชุมชน

แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า