• הרשמה
    • התחברות
    • פוסטים אחרונים
    • תגיות
    • משתמשים
    • קבוצות

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

    בנית אתרים
    1
    1
    197
    טוען פוסטים נוספים
    • מהישן לחדש
    • מהחדש לישן
    • הכי הרבה הצבעות
    תגובה
    • הגיבו כנושא
    התחברו בכדי לפרסם תגובה
    נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
    • liy
      liy מנהל בניית אתרים תכנות צוות פיקוח נערך לאחרונה על ידי 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>
      

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

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

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

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


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

      תגובה 1 תגובה אחרונה תגובה ציטוט 3
      • נמחק על ידי  liy liy 
      • הועבר מ בנית אתרים ע"י  liy liy 
      • שוחזר על ידי  liy liy 
      • הועבר מ מדריכים בהכנה ע"י  liy liy 
      • ננעל על ידי  liy liy 
      • ננעץ על ידי  liy liy 
      • פוסט ראשון
        פוסט אחרון