מדריך | בניית טופס יצירת קשר שישלח למייל שלכם באמצעות HTML בלבד!

liy

בס״ד

#anchor(יצירת טופס יצירת קשר שישלח למייל שלכם, באמצעות HTML בלבד)

1. יצירת חשבון באתר formspree.

נכנס לאתר Formspree.
נמלא את הפרטים וניצור חשבון.
חובה לאמת את כתובת המייל שלכם לפני שממשיכים!

2. יצירת פרוייקט חדש

לאחר יצירת החשבון באתר, נלחץ על הכפתור New Project.
תמונה
נמלא את שם הפרוייקט, בסוג הפרוייקט נבחר את הראשון.

3. יצירת טופס חדש

לאחר יצירת הפרוייקט נלחץ על הכפתור New Form.
תמונה
שורה ראשונה: שם הטופס.
שורה השנייה: הפרוייקט שבתוכו ישב הטופס (הפרוייקט שיצרנו בשלב הקודם).
שורה שלישית: לאן ישלחו המיילים, מה שמוגדר זה המייל שאיתו יצרת את החשבון (למיילים נוספים אסביר בהמשך.)
נלחץ על הכפתור Create Form.
זהו! הטופס נוצר.

4. הכנת טופס HTML שישלח את הפרטים

נפתח קובץ בסיומת HTML. לא משנה שם הקובץ אבל שיהיה סיומת HTML.
נכניס בתוכו את הקוד הבא:

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send emails with front-end only</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.7.4/dist/css/uikit.min.css" />
</head>
<body class="uk-container">
    <h1>יצירת קשר</h1>
    <form action="https://formspree.io/f/form_id" method="post">
        <!-- Full Name -->
        <label for="full_name">שם מלא</label>
        <input type="text" name="שם מלא" class="uk-input" id="full_name" required>
        <!-- Email Address -->
        <label for="email">כתובת אימייל</label>
        <input type="email" name="_replyto" class="uk-input" id="email" required>
        <!-- Subject -->
        <label for="subject">נושא הפנייה</label>
        <input type="text" name="_subject" class="uk-input" id="subject" required>
        <!-- Message Body -->
        <label for="message">תוכן הפנייה</label>
        <textarea name="תוכן ההודעה" class="uk-textarea" id="message" required></textarea>
        <!-- Submit Button -->
        <input style="margin-top: 10px;" type="submit" class="uk-button uk-button-primary uk-width-1-1" value="שליחה">
    </form>
</body>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.7.4/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.7.4/dist/js/uikit-icons.min.js"></script>
</html>

ניתן להוריד את הקובץ ע״י לחיצה כאן

על מנת שהקובץ שהכנו ישלח בפועל את המיילים יש לבצע את הפעולות הבאות:

מעבר לחשבון באתר Formspree
לחיצה על הטופס שיצרנו
בתפריט יש ללחוץ על ‘Integration’ (הראשון מימין)
לפניכם יוצג קישור (מסומן באדום)
נלחץ על הכפתור (מסומן בכחול)
בקובץ HTML שיצרנו נלך לשורה 12, ושם נמחק את הקישור שנמצא ונכניס את הקישור שלנו. (מסומן)
התוצאה הסופית היא:
זהו! נפרסם את הHTML, וכל מי שימלא את הטופס נקבל למייל את התוכן.
(איך ואיפה לפרסם את הHTML, אסביר בהמשך)

5. פעולות נוספות למתקדמים

||יפורסם בהמשך…||