טופס יצירת קשר עם PHP

טופס יצירת קשר עם PHP

  • פרסומת

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

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

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

עיצוב טופס יצירת קשר עם CSS.

אז איך הטופס עובד?

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

בנוסף, מומלץ להודיע למשתמש על שגיאות ולפרט בדיוק מה עליו לתקן.

מבנה הטופס

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <label for="name">שם מלא:</label>
    <input type="text" name="name" id="name" value="<?php echo $name; ?>"/>

    <label for="phone">טלפון:</label>
    <input type="text" name="phone" id="phone" value="<?php echo $phone; ?>"/>

    <label for="email">דוא"ל:</label>
    <input type="text" name="email" id="email" value="<?php echo $email; ?>"/>

    <label for="message">תוכן ההודעה:</label>
    <textarea name="message" id="message"><?php echo $message; ?></textarea>

    <input type="submit" name="submit" value="שלח" />
</form>

השלב הראשון הוא בניית הטופס עצמו. הטופס נבנה בשפת HTML ומכיל 4 שדות:

  • שם מלא
  • טלפון
  • דוא"ל
  • תוכן ההודעה

ראש הטופס

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

התכונה method="" מגדירה את שיטת שליחת הנתונים.

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

התכונה action="" מגדירה באיזה כתובת ינחת הדפדפן לאחר שליחה של הטופס. אנו מגדירים לו לנחות באותו עמוד על ידי השימוש במשתנה הגלובלי PHP_SELF אשר מגדיר לו את הכתובת הנוכחית בה הוא נמצא ככתובת הנחיתה לאחר שליחת הטופס

השדות בטופס

<input type="text" name="name" id="name" value="<?php echo $name; ?>"/>

התכונה value="" מגדירה את התוכן הראשוני שיוצג בשדה בעת טעינה של של הדף. לשם אנו מזינים את המשתנים דרך PHP המכילים את מה שהמשתמש כתב לפני שנשלח הטופס, כך שאם ישנן שגיאות בטופס, הוא לא יצטרך לכתוב הכל מחדש.

שליחת טופס עם PHP

<?php
$showForm   = true;
$error      = false;
$name       = '';
$email      = '';
$phone      = '';
$message    = '';

function clean_email($input) 
{
    if (preg_match("/cc:/i", $input) ||
        preg_match("/bcc:/i", $input) ||
        preg_match("/from:/i", $input) ||
        preg_match("/to:/i", $input) ||
        preg_match("/content-type:/i", $input) ||
        preg_match("/header/i", $input) ||
        preg_match("/mime-Version:/i", $input)) 
    {
        return false;
    } 
    else 
    {
        return true;
    }
}

function render_message( $name, $phone, $email, $message )
{
    ob_start();
    include dirname( __FILE__ ).'/mail-body.phtml';
    return ob_get_clean();
}

if(isset($_POST['submit'])) 
{
    $name       = filter_input( INPUT_POST, 'name' );
    $email      = filter_input( INPUT_POST, 'email' );
    $phone      = filter_input( INPUT_POST, 'phone' );
    $message    = filter_input( INPUT_POST, 'message' );
    
    if( $name && $email && $phone && $message && clean_email($email) == true )
    {
        $mailSubject = $name.' יצר איתך קשר';
        $mailBody = render_message(
            $name,
            $phone,
            $email,
            $message
        );

        $headers  = 'MIME-Version: 1.0' . "\r\n";
        $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
        $headers .= 'To: '.$name.' <'.$email.'>' . "\r\n";
        $headers .= 'From: WebDesk.co.il <contact@webdesk.co.il>' . "\r\n";
        $headers .= 'Cc: '.$email . "\r\n";
        $headers .= 'Bcc: copy@webdesk.co.il' . "\r\n";
        mail($email,$mailSubject,$mailBody,$headers);
        $showForm = false;
    }
    else 
    {
        $error = true;
    }
}

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

<input type="text" name="email" />

יופיע כך:

<?php $_POST['email'] ?>

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

שליחת הודעה בעברית

$headers = 'Content-type: text/html; charset=utf-8';

כדי לכתוב הודעה בעברית, ולהציג אותה בעברית ולא בג'יבריש יש להגדיר הדרס (headers). אנו עושים זאת על ידי הגדרת התווים לפי UTF-8.

הפונקציה המובנית mail()

בשביל לשלוח את ההודעה אנו משתמשים בפונקציה המובנית mail() והשימוש בה נעשה כך:

mail($email,$mailSubject,$mailBody,$headers);

  • email – הכתובת אליה תשלח ההודעה
  • mailSubject – נושא ההודעה
  • mailBody – גוף ההודעה
  • headers – ראש ההודעה. חלק זה מגדיר את מאפייני ההודעה (כמו סוג התווים וכו')

הצגת הודעת שגיאה/הצלחה

אנו משתמשים במשתנה showForm בשביל להגדיר לדפדפן אם להציג את הטופס או לא. במידה והטופס נשלח בהצלחה, הערך יהיה false ולהיפך. לאחר מכן, לפי הערך שהוגדר אנו מציגים את הדף מחדש:

<?php if($showForm): ?>
<!-- כאן נכנס הקוד של הטופס -->
    <?php if($error): ?>
        <div class="error">
            <p>עליך למלא את כל השדות!</p>
        </div>
    <?php endif ?>
<?php else: ?>
    <!-- כאן נכנס הקוד של הודעת ההצלחה -->
    <h1>ההודעה נשלחה בהצלחה!</h1>
    <p>שם מלא: <?php echo $name; ?></p>
    <p>טלפון: <?php echo $phone; ?></p>
    <p>דוא"ל: <?php echo $email; ?></p>
    <p>תוכן ההודעה: <?php echo $message; ?></p>
<?php endif ?>