วิธีสร้างแบบฟอร์มการติดต่ออย่างง่ายโดยใช้ HTML, CSS และ JavaScript

แบบฟอร์มติดต่อเป็นองค์ประกอบสำคัญของเว็บไซต์ ซึ่งช่วยให้ผู้ใช้สามารถติดต่อคุณเพื่อสอบถามข้อมูล ข้อเสนอแนะ หรือการร้องขอได้

ในบทช่วยสอนนี้ เราจะแนะนำคุณตลอดขั้นตอนที่จำเป็นในการสร้างเว็บฟอร์มพื้นฐานสำหรับเว็บไซต์ของคุณ ซึ่งรวมถึงการสร้างโครงการ การใช้การตรวจสอบความถูกต้องของแบบฟอร์ม และการปรับแต่งรูปลักษณ์เพื่อให้ได้แบบฟอร์มการติดต่อที่ใช้งานได้อย่างเต็มรูปแบบและดึงดูดสายตาเมื่อสิ้นสุดคำแนะนำของเรา

การจัดทำโครงการ

ก่อนที่คุณจะเริ่มเขียนโค้ด ตรวจสอบให้แน่ใจว่าได้ตั้งค่าสภาพแวดล้อมการพัฒนาของคุณแล้ว เปิดตัวแก้ไขข้อความที่คุณต้องการหรือหนึ่งในสภาพแวดล้อมการพัฒนาแบบรวม (IDE) ที่แนะนำ เช่น Visual Studio Code หรือ Sublime Text.

เพื่อรักษาความรู้สึกเป็นองค์กร ขอแนะนำให้คุณสร้างโฟลเดอร์โปรเจ็กต์เฉพาะสำหรับเก็บไฟล์ HTML และ CSS ทั้งหมดของคุณไว้ในที่เดียว ซึ่งจะช่วยให้คุณสามารถค้นหาและเข้าถึงเอกสารเหล่านี้ได้อย่างง่ายดายตามต้องการ

เพื่อจัดระเบียบเนื้อหาหน้าเว็บของคุณอย่างเหมาะสม ขอแนะนำให้คุณสร้างโครงสร้างไดเร็กทอรีที่มีโฟลเดอร์ที่แตกต่างกันสำหรับเนื้อหาประเภทต่างๆ โดยเฉพาะอย่างยิ่ง ภายในไดเร็กทอรีรากของโครงการของคุณ ให้สร้างไฟล์สองไฟล์แยกกัน ไฟล์หนึ่งชื่อ “index.html” ซึ่งจะทำหน้าที่เป็นจุดเริ่มต้นหลักสำหรับหน้าเว็บของคุณ และอีกไฟล์หนึ่งชื่อ “style.css” ซึ่งมีสไตล์ชีตที่กำหนด ลักษณะที่ปรากฏของไซต์ของคุณ นอกจากนี้ ตรวจสอบให้แน่ใจว่ามีกลไกการเชื่อมโยงที่เหมาะสมระหว่างไฟล์ทั้งสองนี้ เพื่อให้สามารถปรับใช้สไตล์ที่จำเป็นกับเนื้อหา HTML ได้ เพื่อให้บรรลุเป้าหมายนี้ ให้ใส่ a

การสร้างโครงสร้าง HTML

องค์ประกอบพื้นฐานของแบบฟอร์มการติดต่ออยู่ในสถาปัตยกรรม HTML เมื่อต้องการสร้างส่วนประกอบ HTML ที่จำเป็นสำหรับแบบฟอร์มการติดต่อ ให้ทำตามขั้นตอนเหล่านี้

 <main>
     <h1>Welcome to my Form</h1>
     <form id="form">
       <div class="input__container">
         <label for="name">Name</label>
           <!-- The 'required' prop ensures a filled field before submission -->
         <input type="text" id="name" name="name" required />
       </div>
       <div class="input__container">
         <label for="email">Email</label>
         <input type="email" id="email" name="email" required />
       </div>
       <div class="input__container">
         <label for="message">Message</label>
         <textarea id="message" name="message" rows="4" required></textarea>
       </div>
       <button>Submit</button>
     </form>
</main>

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

ปัจจุบันแบบฟอร์มการติดต่อของเรามีลักษณะดังนี้:

จัดแต่งทรงผมแบบฟอร์มการติดต่อ

การใช้แบบฟอร์มติดต่อที่น่าดึงดูดและใช้งานง่ายสามารถปรับปรุงประสบการณ์ผู้ใช้ทั่วไปได้อย่างมาก โค้ด CSS ที่ให้มานั้นใช้ flexbox ร่วมกับแอตทริบิวต์โมเดลกล่อง CSS เช่น การเติมและระยะขอบ เพื่อสร้างการนำเสนอด้วยภาพที่น่าดึงดูดสำหรับแบบฟอร์มการติดต่อ

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 font-size: 62.5%;
}

body {
 font-family: "Mulish", sans-serif;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

main {
 width: 40rem;
 box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
 margin: 0 auto;
 height: 45rem;
 border-radius: 2rem;
 padding: 2rem;
}

h1 {
 text-align: center;
 font-size: 3rem;
 padding: 1rem 2rem;
}

form {
 margin: 3rem 0;
 display: flex;
 flex-direction: column;
 row-gap: 2rem;
}

.input__container {
 display: flex;
 flex-direction: column;
 row-gap: 0.5rem;
}

.input__container label { font-size: 1.6rem; }

.input__container input,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1px solid #555;
 resize: none;
}

button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
} 

แบบฟอร์มการติดต่อของคุณตอนนี้มีลักษณะดังนี้:

การดำเนินการตรวจสอบแบบฟอร์ม

การตรวจสอบให้แน่ใจว่าข้อมูลที่ผู้ใช้ให้มานั้นถูกต้องและครอบคลุมถือเป็นสิ่งสำคัญ วิธีการที่เชื่อถือได้ในการบรรลุเป้าหมายนี้ ได้แก่ การใช้ JavaScript บนฝั่งไคลเอ็นต์เพื่อตรวจสอบความถูกต้องของแบบฟอร์ม ในการเริ่มต้นกระบวนการนี้ ให้เพิ่มแท็กสคริปต์ไปที่ส่วนท้ายของเอกสาร HTML ของคุณ โดยนำทางไปยังองค์ประกอบฟอร์มที่ต้องการ

 <script>
 "use strict";
    const form = document.getElementById("form");
</script> 

หากต้องการเพิ่มตัวฟังเหตุการณ์เพื่อจัดการการส่งแบบฟอร์ม คุณสามารถใช้ JavaScript หรือ jQuery ได้ดังนี้:javascript//การใช้ vanilla JavaScriptdocument.getElementById(‘myForm’).addEventListener(‘submit’, function(event) {//จัดการการส่งแบบฟอร์มที่นี่ });//การใช้ jQuery$(’#myForm’).on(‘submit’, function(e) {e.preventDefault();//ป้องกันพฤติกรรมการส่งแบบฟอร์มเริ่มต้น//จัดการการส่งแบบฟอร์มที่นี่});

 form.addEventListener("submit", function (event) { }); 

เพื่อหลีกเลี่ยงการรีเฟรชหน้าอัตโนมัติที่เกิดขึ้นเมื่อส่งแบบฟอร์มและเลือกที่จะเก็บค่าที่เลือกในปัจจุบันไว้ในฟิลด์"อีเมล"แทน ให้ทำตามขั้นตอนเหล่านี้:

 form.addEventListener("submit", function (event) {
    // Prevent page reload on submit
    event.preventDefault();
     // Selecting the email value filled by the user
    const email = document.getElementById("email").value;
}); 

ท้ายที่สุด ให้ใช้รูปแบบ regex เพื่อตรวจสอบความถูกต้องของที่อยู่อีเมลที่ป้อน และแสดงการตอบกลับที่เหมาะสมตามความถูกต้อง

 form.addEventListener("submit", function (event) {
    // Preventing page reload on submit
    event.preventDefault();

     // Selecting the email value filled by the user
    const email = document.getElementById("email").value;

    // Checking for valid email using a simple regex pattern
    const emailPattern = /^[^\s@]\+@[^\s@]\+\.[^\s@]\+$/;

    if (!emailPattern.test(email)) {
      alert("Wrong email format");
      return;
    }

    // If everything passes, show success message
    alert("Form submitted successfully");
}); 

การดำเนินการนี้มีจุดมุ่งหมายเพื่อหลีกเลี่ยงข้อผิดพลาดทั่วไปและรับประกันว่าผู้ใช้ให้ข้อมูลที่ยอมรับได้เท่านั้น จึงรับประกันความถูกต้องในกระบวนการส่ง

การทดสอบและการแก้ไขปัญหาแบบฟอร์มการติดต่อขั้นสุดท้าย

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

เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ

ปรับแต่งแบบฟอร์มการติดต่อของคุณ

ขอแสดงความยินดีที่คุณสร้างแบบฟอร์มติดต่อพื้นฐานสำหรับเว็บไซต์ของคุณได้สำเร็จ! ความเชี่ยวชาญของคุณในการตั้งค่าโปรเจ็กต์ การสร้างโครงสร้าง HTML การออกแบบสไตล์ CSS การใช้การตรวจสอบความถูกต้องของรูปแบบ JavaScript และการดำเนินการทดสอบที่เข้มงวดเป็นสิ่งที่น่ายกย่อง

แบบฟอร์มติดต่อที่ได้รับการออกแบบอย่างพิถีพิถันสามารถปรับปรุงประสบการณ์ผู้ใช้ได้อย่างมาก โดยอำนวยความสะดวกในการสื่อสารระหว่างผู้เยี่ยมชมเว็บไซต์และเจ้าของเว็บไซต์ ขอแนะนำอย่างยิ่งให้คุณปรับแต่งและขยายขีดความสามารถตามความต้องการเฉพาะของคุณ