מדריך | הדרכות מעשיות לניהול אתרים, ובחלקם גם ללא צד שרת

[סעדיה בוזגלוביץ']

נא לא להגיב כאן

לשרשור התגובות

בשרשור זה יתפרסמו בעז"ה מידי כמה ימים הדרכות מעשיות למתכנת המתחיל, ולבונה האתרים המתלמד, ההדרכות ברובם מתייחסות לאתרים בעלי צד שרת , ובחלקם אף קומבינות שונות ומשונות לבעלי דפים בלבד!!

[סעדיה בוזגלוביץ']

לפנינו מדריך קצר על משהו שכל מי שבונה אתר רוצה, וזה נראה אולי קשה אבל אפשר לעשות את זה בחינם ובצורה פשוטה,
שליחת טופס ישירות למייל בלי שרת מאחורה.

קרה לכם שבניתם דף עם טופס "צור קשר" ורציתם שכשהמשתמש ילחץ "שלח" זה יגיע ישירות אליכם למייל? בדרך כלל צריך שרת עם PHP או Node.js, וזה נראה מורכב. בפועל אפשר לעשות את זה עם שירות חינמי שנקרא Formspree או EmailJS בלי שרת בכלל.

שלב ראשון HTML בסיסי של טופס

<form action="כאן יש להכניס את הקישור שעוד מעט נקבל" method="POST">
  <label>שם:</label>
  <input type="text" name="name">
  
  <label>אימייל:</label>
  <input type="email" name="email">
  
  <label>הודעה:</label>
  <textarea name="message"></textarea>
  
  <button type="submit">שלח</button>
</form>

שלב שני הרשמה לשירות

נכנסים ל־formspree.io (חינמי עד כמות מסוימת של שליחות).

יוצרים "טופס חדש" ומקבלים קישור (action) כמו בדוגמה.

ברגע שהטופס נשלח ההודעה מגיעה אליכם ישירות למייל.

שלב שלישי שדרוג עם JavaScript (לא חובה)

אפשר להוסיף JS כדי למנוע רענון של הדף, ולתת חיווי "הטופס נשלח".

document.querySelector("form").addEventListener("submit", async (e) => {
  e.preventDefault();
  let form = e.target;
  let data = new FormData(form);
  let res = await fetch(form.action, {
    method: form.method,
    body: data,
    headers: { "Accept": "application/json" }
  });
  if (res.ok) {
    alert("הטופס נשלח בהצלחה!");
    form.reset();
  } else {
    alert("תקלה בשליחה");
  }
});

הדרך הזאת היא פשוטה וזה חוסך לכם לפתוח שרת ולשלם מאני ₪, רק בשביל טופס.
(מדובר על אלה שלא מתעסקים באתרים משלהם , אלא רוצים איזה דף שליחת פניה, קטן לעצמם, או לעסק...)