تعديل على كود صفحة "اتصل بنا" لتصبح يستقبل الاميلات على بريدي الشخصي؟

مجهول

1
محمد عاطف

وعليكم السلام ورحمة الله وبركاته.

من المستحيل إرسال الإيميلات عن طريق ال html فقط حيث لإرسال الإيميلات ستحتاج إلى خادم ليقوم بهذا الأمر .

ولكن توجد طريقة وهي فتح البريد الإلكتروني الخاص بالمستخدم ويرسل رسالة لك من خلال البريد الإلكتروني الخاص به .

ولفعل ذلك سنستخدم كود جافا سكريبت والذى سيقوم بتحويلنا إلى عنوان mailto وهذا العنوان عندما يراه المتصفح سيقوم بفتح البريد الإلكتروني الإفتراضي .

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        #contact-form {
            background: #ffffff;
            padding: 10px;
        }


        #ContactForm1_contact-form-name,
        #ContactForm1_contact-form-email,
        #ContactForm1_contact-form-email-message {
            margin: 5px auto;
            border: 1px solid #e3e3e3;
            transition: all .5s ease-out;
            width: 100%;
            border-radius: 10px;
            padding: 15px 20px;
            margin-bottom: 20px;
            background-color: #ffffff;
        }


        #ContactForm1_contact-form-submit {
            border: 1px solid #e3e3e3;
            font: unset;
            text-shadow: 1px 1px 5px #111;
            font-weight: 700;
            font-size: 14px;
            padding: 5px 15px;
            background-color: #689f38;
            border-radius: 5px;
            color: #fff;
            letter-spacing: 1px;
            cursor: pointer
        }


        #ContactForm1_contact-form-email:focus,
        #ContactForm1_contact-form-name:focus,
        #ContactForm1_contact-form-email-message:focus {
            outline: none;
            border-color: rgb(104 159 56);
            box-shadow: 0 0 5px rgb(104 159 56)
        }


        .contact-form-error-message-with-border {
            color: #b90000;
            font-weight: 700
        }
    </style>
</head>


<body>
    <div dir="rtl" style="text-align: right;" trbidi="on">
        <div id="contact-form">
            <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="الاسم الكامل"
                size="30" type="text" value="" />
            <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email"
                placeholder="بريدك الالكتروني" size="30" type="text" value="" />
            <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message"
                name="email-message" placeholder="الرسالة" rows="5"></textarea>
            <input id="ContactForm1_contact-form-submit" type="button" onclick="sendMail(event)" value="إرسال" />
            <br />
            <div style="text-align: center;">
                <div id="ContactForm1_contact-form-error-message"></div>
                <div id="ContactForm1_contact-form-success-message"></div>
            </div>
        </div>
    </div>
    <script>
        function sendMail(e) {
            var name = document.getElementById('ContactForm1_contact-form-name').value;
            var email = document.getElementById('ContactForm1_contact-form-email').value;
            var message = document.getElementById('ContactForm1_contact-form-email-message').value;
            var body = " email : " + email + " name : " + name + " message : " +  message
            window.location.href = "mailto:myemail@gmail.com?subject=mail&body=" + body;
        }
    </script>
</body>
</html>

هنا قمنا بالإستماع إلى حدث الضغط عل الزر وقمنا بإنشاء الدالة sendMail وبداخل الدالة نقوم بإعادة التوجيه إلى العنوان الذى سيقوم المتصفح بفتح البريد الخاص بالمستخدم لإرسال الرسالة على بريدك .

ويمكنك حذف myemail@gmail.com ووضع الإيميل الخاص بك الذى تريد أن تستقبل الرسائل عليه

0
مجهول

بارك الله فيك اخي، ما قصرت


تطوير الويب

مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.

91 ألف متابع