Использование Sendinblue, mailgun или другой платформы для отправки электронной почты для отправки мне электронной почты из формы на веб-сайте stati c - PullRequest
Новая
       30

Использование Sendinblue, mailgun или другой платформы для отправки электронной почты для отправки мне электронной почты из формы на веб-сайте stati c

0 голосов
/ 27 февраля 2020

Мой сайт закодирован с помощью React. Я хочу, чтобы веб-сайт имел статус c, чтобы я мог просто поместить его на Github и разместить его с помощью Netlify.

Код ниже - это моя форма электронной почты. В настоящее время я использую php скрипт. Я хочу изменить это, чтобы мой веб-сайт стал c. Я действительно просто хочу узнать, что мне нужно изменить действие в строке action='./php/sendEmail.php', чтобы мне больше не приходилось использовать php и я мог просто получить доступ к своей учетной записи sendinblue (я слышал, что до определенного момента это бесплатно, поэтому вот почему я хочу использовать его поверх почтового пистолета) и отправить письмо на мой электронный адрес. 

var Field = (props) => {
    return (
        <input id={props.id} className={props.className} aria-invalid="false" name={props.name} placeholder={props.name} data-aid={props.dataAid} type={props.type} onChange={(e) => dispatch(editValue(e.target.value,item.id)) }></input>
    )
}
Field.defaultProps = { type: 'text'}

var EmailForm = (props) => {

    return (
        <div className="form" data-state="desktop left" data-dcf-columns="4">
            <form action='./php/sendEmail.php' method="post" role="form" aria-label="contact form" className="form_style-wrapper" encType="multipart/form-data">
                <Field id='field1' name='Name' dataAid='nameField' className='field_word required' />
                <Field id='field2' name='Email' dataAid='emailField' className='field_word required' />
                <Field id='field3' name='Phone' dataAid='emailField' type='hidden' className='field_word' />
                <Field id='field4' name='Subject' dataAid='subjectField' className='field_word' />
                <textarea name="Message" className="message" placeholder="Message" data-aid="messageField"></textarea>
                <button className="sendButton" type="submit" name="submit" value="Send">Send</button>                           
            </form>
        </div>
    )
}

EmailForm.defaultProps = {
    action: 'handleSubmit'
}

Ответы [ 2 ]

1 голос
/ 17 марта 2020

Вы можете настроить поля в вашей учетной записи Sendinblue, и вы можете просто использовать их REST API для отправки электронных писем.

Вам необходимо создать и настроить шаблон. https://developers.sendinblue.com/reference#sendtransacemail

Пример вызова API: 

curl --request POST \
  --url https://api.sendinblue.com/v3/smtp/email \
  --header 'accept: application/json' \
  --header 'api-key:YOUR_API_KEY' \
  --header 'content-type: application/json' \
  --data '{  
   "sender":{  
      "name":"Sender Alex",
      "email":"senderalex@example.com"
   },
   "to":[  
      {  
         "email":"testmail@example.com",
         "name":"John Doe"
      }
   ],
   "subject":"Hello world",
   "htmlContent":"<html><head></head><body><p>Hello,</p>This is my first transactional email sent from Sendinblue.</p></body></html>"
}'

Редактировать:

Если вы хотите выполнить вызов API, сначала вам нужно сохранить состояние формы. Поэтому лучше было бы преобразовать ваш функциональный компонент в компонент с состоянием.

Подробнее о компонентах с состоянием можно прочитать здесь: https://medium.com/@imletaconnoux / stateful-and-stateless-components-in-реагировать-5da5cedb808f

На основании вашего запроса я привел пример вызова API (используя ax ios) при отправке формы. Вы можете использовать ссылку и внедрить ее в свое приложение. Вы можете использовать fetch api для того же вместо топора ios, а также

https://codesandbox.io/s/misty-sun-2xpri

0 голосов
/ 24 марта 2020

Как сказал Saurabh - вы можете отправить запрос API на сервер Sendinblue, который отправит вам электронное письмо из их бэкэнда. Вы можете отправить данные из вашей формы с помощью fetch модуля очень просто. Вам нужно написать javascript для сбора всех значений полей из формы в одном объекте, а затем отправить его на целевой URL.

...