לוגו האתר
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Users
    • Groups

    23c4eb44-2a95-4f93-be69-843c8d729b1f-image.png

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

    בנית אתרים
    1
    1
    91
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • liy
      liy מנהל בניית אתרים תכנות צוות פיקוח last edited by 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 Reply Last reply Reply Quote 3
      • Deleted by  liy liy 
      • Moved from בנית אתרים by  liy liy 
      • Restored by  liy liy 
      • Moved from מדריכים בהכנה by  liy liy 
      • Locked by  liy liy 
      • Pinned by  liy liy 
      • First post
        Last post
      חוקי הפורום