php script that sends emails

MaxNadeev · Mar 27, 2024 · f0fafe6 · f0fafe6
1 parent f9190c5
commit f0fafe6
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 137 deletions.
diff --git a/.htaccess b/.htaccess
@@ -0,0 +1,3 @@
+RewriteEngine On
+RewriteCond %{SERVER_PORT} !^443$
+RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]
diff --git a/.vscode/launch.json b/.vscode/launch.json
diff --git a/amvera/dockerfile/amvera.yml b/amvera/dockerfile/amvera.yml
diff --git a/index.html b/index.html
@@ -5,8 +5,8 @@
     <script src="scripts/ya.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <noscript><div><img src="https://mc.yandex.ru/watch/96480520" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
-    <link rel="stylesheet" href="style.css?version=9">
-    <script src="scripts/script.js?version=6" defer></script>
+    <link rel="stylesheet" href="style.css?version=10">
+    <script src="scripts/script.js?version=12" defer></script>
     <script src="./scripts/prices.js" defer></script>
     <title>Сочисто! | Уборка квартир в Сочи</title>
     <link rel="icon" href="img/favicon.jpg">
@@ -75,9 +75,6 @@ <h1 class="text-accent white-text place5 fade-in-up">
                 <h1 class="text-accent">Оставьте заявку</h1>
                 <div id="success" class="fade-in-up">
                     <div class="container">
-                        <h2 class="centered text-accent">
-                            Спасибо
-                        </h2>
                         <p class="centered text">
                             Мы свяжемся с вами в самое ближайшее время для уточнения деталей и записи на уборку.
                         </p>
@@ -90,11 +87,26 @@ <h2 class="centered text-accent">
                     <p class="text">
                         Вы сможете узнать всю необходимую информацию и забронировать время уборки.
                     </p>
-                    <form id="clientForm">
+
+                    <!-- <form enctype="multipart/form-data" action="/settings/uploadFile" method="post" class="dropzone" id="my-awesome-dropzone">
+                        <input type="text" name="x" value="kittens">
+                        <input type="text" name="y" value="puppies">
+                        </form> -->
+
+
+                    <form class="clientForm" enctype="multipart/form-data" action="mail.php"  method="post">
+
+                        <!-- Hidden Required Fields -->
+                        <input type="hidden" name="project_name" value="Сочисто">
+                        <input type="hidden" name="admin_email" value="[email protected]">
+                        <input type="hidden" name="form_subject" value="Новая заявка на сайте">
+                        <!-- END Hidden Required Fields -->
+
+
                         <input class="text input" type="text" id="name" name="name" placeholder="Ваше имя" required>
                         <input class="text input" type="tel" id="phone" name="phone" placeholder="Ваш телефон" required>
                         <div class="after-list">
-                            <div id="submit" class="cta button text-accent inner-container">
+                            <div id="submit" class="cta button text-accent inner-container" action="mail.php" method="post">
                                 Перезвоните мне
                             </div>
                         </div>

diff --git a/index.js b/index.js
diff --git a/mail.php b/mail.php
@@ -0,0 +1,42 @@
+<?php
+
+$method = $_SERVER['REQUEST_METHOD'];
+
+if ( $method === 'POST' ) {
+	$json = file_get_contents('php://input');
+	$data = json_decode($json, true);
+
+	$name = $data['name'];
+	$phone = $data['phone'];
+
+	$message = '
+	С формы "Оставьте заявку" на сайте sochisto.ru пришла новая заявка:
+
+	' . $name . '
+	' . $phone . '
+	';
+
+} else if ( $method === 'GET' ) {
+	echo 'GET is not supported';
+};
+
+
+
+$to  = "[email protected]";
+$subject = "Сочисто - новая заявка на форме";
+
+
+$headers = "From: [email protected]\r\n";
+// $headers .= "Reply-To: [email protected]\r\n";
+$headers .= "CC: [email protected]\r\n";
+$headers .= "BCC: [email protected]\r\n";
+$headers .= "Content-Type: text/plain; charset=utf-8\r\n";
+
+$mail_result = mail($to, $subject, $message, $headers);
+
+if ($mail_result) {
+    echo "Email успешно отправлен 📧";
+} else {
+    echo "Что-то пошло не так при отправке письма 🙁";
+}
+?>
diff --git a/scripts/script.js b/scripts/script.js
@@ -46,39 +46,35 @@ function checkRadio(elementId) {
     scrollToFilters();
 }
 
-document.getElementById('submit').addEventListener('click', function() {
-    const name = document.getElementById('name').value;
-    const phone = document.getElementById('phone').value;
-
-    if (name.trim() === '') {
-        console.log('Please fill out NAME!');
-        document.getElementById('name').style.border = '2px solid red'
-        return;
-    }
-    if (phone.trim() === '') {
-        console.log('Please fill out PHONE!');
-        document.getElementById('phone').style.border = '2px solid red'
-        return;
-    }
-     else {
-
-        const dataToSend = {
-            name: name,
-            phone: phone
-        }
-
-        sendDataToNode(dataToSend);
 
-        document.getElementById('name').disabled = true;
-        document.getElementById('phone').disabled = true;
+document.querySelectorAll('.clientForm').forEach( (e) => {
+    document.getElementById('submit').addEventListener('click', function() {
+        const name = document.getElementById('name').value;
+        const phone = document.getElementById('phone').value;
 
-        document.getElementById('name').value = '';
-        document.getElementById('phone').value = '';
+        if (name.trim() === '') {
+            //Please fill out NAME!
+            document.getElementById('name').style.border = '2px solid red'
+            return;
+        }
+        if (phone.trim() === '') {
+            //Please fill out PHONE!
+            document.getElementById('phone').style.border = '2px solid red'
+            return;
+        }
+        else {
+
+            const dataToSend = {
+                name: name,
+                phone: phone
+            }
+            sendEmail(dataToSend)
+            // sendDataToNode(dataToSend);
+
 
-        document.getElementById('hide-after-success').style.display = 'none';
-        document.getElementById('success').style.display = 'block';
-    };
-});
+        };
+    })
+})
 
 document.getElementById('again').addEventListener('click', function() {
     console.log('again click');
@@ -88,18 +84,45 @@ document.getElementById('again').addEventListener('click', function() {
     document.getElementById('success').style.display = 'none';
 })
 
-function sendDataToNode(data) {
-    fetch('http://localhost:3000/sendData', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(data)
-    })
-    .then(response => {
-        console.log('Data sent to Node.js');
-    })
-    .catch(error => {
-        console.error('Error sending data:', error);
-    });
+function showSuccess(){
+    document.getElementById('name').disabled = true;
+    document.getElementById('phone').disabled = true;
+
+    document.getElementById('name').value = '';
+    document.getElementById('phone').value = '';
+
+    document.getElementById('hide-after-success').style.display = 'none';
+    document.getElementById('success').style.display = 'block';
 }
+
+function sendEmail(dataToSend){
+    const mailPath = '../mail.php'
+            let request = new XMLHttpRequest();
+            var params = JSON.stringify(dataToSend);
+
+            request.open('POST', mailPath, true)
+            request.setRequestHeader('Content-Type', 'application/json');
+            request.send(params);
+            request.onreadystatechange = function() {
+                if (this.readyState == 4 && this.status == 200) {
+                    showSuccess();
+                }
+            }
+}
+
+// function sendDataToNode(data) {
+//     // fetch('https://sochisto-bot-lizatravel.amvera.io:80/sendData', {
+//     fetch('95.26.169.129:80/sendData', {
+//         method: 'POST',
+//         headers: {
+//             'Content-Type': 'application/json'
+//         },
+//         body: JSON.stringify(data)
+//     })
+//     .then(response => {
+//         console.log('Data sent to Node.js');
+//     })
+//     .catch(error => {
+//         console.error('Error sending data:', error);
+//     });
+// };
diff --git a/style.css b/style.css
@@ -139,6 +139,10 @@ p{
     margin-top: var(--general-margin);
 }
 
+#name{
+    margin-top: 0;
+}
+
 :focus::-webkit-input-placeholder {
     color: transparent;
 }