Как настроить форму отправки заявки на почту?

Для настройки формы отправки заявки на почту с использованием React, вам потребуется следующий набор инструментов и библиотек:

1. React - JavaScript-библиотека для создания пользовательских интерфейсов.
2. react-router-dom - библиотека для навигации между страницами в React-приложении.
3. Axios - библиотека для выполнения HTTP-запросов.
4. Nodemailer - библиотека для отправки электронной почты с использованием Node.js.
5. Express - фреймворк для создания веб-приложений с использованием Node.js.
6. HTML - основной язык разметки веб-страниц.
7. CSS - язык каскадных таблиц стилей для оформления веб-страниц.

Последовательность шагов для настройки формы отправки заявки на почту:

1. Установите все необходимые зависимости с помощью пакетного менеджера npm или yarn. Установите React, react-router-dom, axios, nodemailer и express:

npm install react react-router-dom axios nodemailer express

2. Создайте компонент Form. Этот компонент будет содержать поля ввода данных, такие как "Имя", "Электронная почта", "Сообщение" и кнопку "Отправить". Каждое поле ввода будет иметь свое состояние, управляемое через хук useState:

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Отправка данных формы на сервер
    // Вызов функции для отправки письма на почту
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Имя" />
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Электронная почта" />
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Сообщение"></textarea>
      <button type="submit">Отправить</button>
    </form>
  );
}

export default Form;

3. Создайте функцию для отправки письма на почту. Вам понадобится настроить ваш сервер с использованием Express и Nodemailer:

const express = require('express');
const nodemailer = require('nodemailer');
const app = express();

app.use(express.json());

app.post('/send-email', (req, res) => {
  const { name, email, message } = req.body;

  const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: '[email protected]',
      pass: 'your-password',
    },
  });

  const mailOptions = {
    from: email,
    to: '[email protected]',
    subject: 'Новая заявка',
    text: `Имя: ${name}nЭлектронная почта: ${email}nСообщение: ${message}`,
  };

  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error(error);
      res.status(500).send('Что-то пошло не так');
    } else {
      console.log('Email sent: ' + info.response);
      res.status(200).send('Ваша заявка успешно отправлена');
    }
  });
});

app.listen(3001, () => {
  console.log('Сервер запущен на порту 3001');
});

4. В компоненте Form импортируйте библиотеку axios и отправьте данные формы на сервер в функции handleSubmit:

import React, { useState } from 'react';
import axios from 'axios';

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    axios.post('/send-email', {
      name,
      email,
      message,
    })
      .then((response) => {
        console.log(response.data);
        alert('Ваша заявка успешно отправлена');
      })
      .catch((error) => {
        console.error(error);
        alert('Ошибка отправки заявки');
      });

    setName('');
    setEmail('');
    setMessage('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Имя" />
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Электронная почта" />
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Сообщение"></textarea>
      <button type="submit">Отправить</button>
    </form>
  );
}

export default Form;

5. Создайте маршрут в вашем приложении, указывающий на компонент Form:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Form from './components/Form';

function App() {
  return (
    <Router>
      <Route exact path="/" component={Form} />
    </Router>
  );
}

export default App;

Теперь, когда вы запустите ваше React-приложение и перейдете по соответствующему маршруту, вы увидите форму отправки заявки на почту. Когда пользователь заполняет форму и нажимает кнопку "Отправить", данные формы будут отправлены на ваш сервер Express, который в свою очередь использует Nodemailer для отправки письма на указанный адрес электронной почты.

Убедитесь, что вы указали свой действующий адрес электронной почты и пароль в файле сервера. Будьте осторожны и не публикуйте эту информацию в публичном репозитории Git или в других публичных местах.