לפנינו מדריך קצר על משהו שכל מי שבונה אתר רוצה, וזה נראה אולי קשה אבל אפשר לעשות את זה בחינם ובצורה פשוטה,
שליחת טופס ישירות למייל בלי שרת מאחורה.
קרה לכם שבניתם דף עם טופס "צור קשר" ורציתם שכשהמשתמש ילחץ "שלח" זה יגיע ישירות אליכם למייל? בדרך כלל צריך שרת עם 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("תקלה בשליחה");
}
});
הדרך הזאת היא פשוטה וזה חוסך לכם לפתוח שרת ולשלם מאני ₪, רק בשביל טופס.
(מדובר על אלה שלא מתעסקים באתרים משלהם , אלא רוצים איזה דף שליחת פניה, קטן לעצמם, או לעסק...)
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}