NextJSとメールで簡単な連絡先フォーム

7965 ワード
tutorial webdev javascript nextjs テキストリンク
連絡先フォームは、ユーザーからあなたに直接ラインのようなものであり、より頻繁にユーザーが知覚し、あなたのビジネス、特に新しい顧客と通信する方法にトンの洞察を提供しない.コンタクトフォームを作成することは、いくつかの入力といくつかのサーバーとして、あなたがそれを提供するデータを送信するのと同じくらい簡単であると思うかもしれませんが、あなたのフォームは、特に生産に期待通りに動作するようにもう少し微妙なニュアンスがあります.少なくとも、それは私が私の新しいサービスのために連絡先ページで働いている間、今日見つけたものです.SquadPerks .
私は私の既存の電子メールサービス、アドレスを活用し、私のフロントエンドとよくメッシュのいくつかのマネージソリューションを探していた.エンターEmailJS . Emailjsは、最も人気のあるWebフレームワークのいくつか、またはプレーンバニラJavaScriptの完全なサポートを提供し、迅速かつ簡単に連絡先サービスを取得するには、SMTPメールサーバーや既存のメールサービスを使用して取得する素敵なダッシュボードが付属しています.いくつかの詳細を設定するだけで、レースにオフになっています.
EmailJsはまた、私の意見ではフォームの乱用を防ぐために防弾方法であり、ほぼすべての近代的なウェブサイト上で見つけることができるrecaptchaの組み込みサポートを提供しています.いくつかの悪意のあるボットによって使用され、あなたのサーバーを中断のためにガスを残してあなたのメールクォータをしない限り、いくつかの形式の検証が必要です.私は単純な“私はロボットではない”チェックは私のユーザーは確かに炭素ベースの人間であることを確認するために行った.😅
私が必要とするすべては、反応アプリケーションの範囲内でrecaptchaを使用する若干の方法であったreact-recaptcha 私を回転させるのに十分以上でした.彼らは、単にユーザの入力を確認するためにコンフィグ小道具と2つのコールバック機能のカップルを必要とする単純なRecaptchaコンポーネントを提供します.また、スクリプトを追加する必要があります<Head> 我々の中で_document.js Google Recaptcha CDNを使用するファイル.
<script src="https://www.google.com/recaptcha/api.js?&render=explicit" async defer></script>
コンポーネントの再生
<Recaptcha
  sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
  render="explicit"
  onloadCallback={recaptchaLoaded}
  verifyCallback={verifiedRecaptcha}
/>
一つ目はReciptcha要素がロードされると呼び出され、いくつかのローカルな状態の助けを借りてtrueになり、次のコールバック関数が呼び出される関数です.
onLoadCallback
const [recaptchaLoad, setRecaptchaLoad] = React.useState(false)

const recaptchaLoaded = () => {
  setRecaptchaLoad(true);
}
第2のコールバックは、サーバーが応答を返すと、ユーザのためのrecaptchaステップが成功したというOKを与えて、再びいくつかのローカル州で、フォーム提出を送る前にチェックとして使うことができます.
これは
const [recaptchaLoad, setRecaptchaLoad] = React.useState(false)

const verifiedRecaptcha = (response) => {
  if (response) {
    setIsVerified(true);
  }
}
今、これがすべて完了する前に、我々はすべての中に配置するためにいくつかのフォームが必要です、そして幸いにもEmailjsは私たちを始めるためにいくつかのボイラープレートを提供しています.彼らのボイラー板はsendForm() しかし、単純な形式ではsend() メソッドが行います.我々が今必要とするすべては、我々のサービスID、電子メールテンプレートID(あなたは、これを得るためにあなたの電子メール・ダッシュボードで若干の単純な電子メールテンプレートを作成したいです).
これらの秘密のための最良の場所は.env ファイル.環境変数を集めたら、フォームからメールサーバーに送信するデータを整形する必要があります.私たちはtemplateParams この情報を保持するオブジェクト.我々は必要from_name 我々の送付者のためにfrom_email 返信したい場合はto_name 我々のユーザーは、彼らが誰と通信している知っているmessage メッセージ内容を保持するボディー.
注:あなたの応答を期待している場合html フォーマットに置き換えます.message with message_html , またはhtml 構造化されたレスポンスは文字列として終わります.
const templateParams = {
  from_name: nameRef.current.value,
  from_email: emailRef.current.value,
  to_name: 'SquadPerks Support',
  message: messageRef.current.value,
}
今、いくつかの豪華なスタイリングやコンポーネントからの助けを借りてChakra UI , フォームコンポーネントをビルドしてページに表示できます.
import {
  Input,
  FormControl,
  FormLabel,
  Button,
  Textarea,
  Box,
  Flex
} from '@chakra-ui/react'

<Flex flexDirection="column" >
    <form className="contact-form" onSubmit={sendEmail}>
      <FormLabel>Name</FormLabel>
      <Input type="text" name="user_name" className="from-name" autoComplete={false} ref={nameRef} />
      <FormLabel>Email</FormLabel>
      <Input type="email" name="user_email" className="from-email" autoComplete={false} ref={emailRef} />
      <FormLabel>Message</FormLabel>
      <Textarea name="message" autoComplete={false} ref={messageRef} />
      <Box mt="4">
        <Recaptcha
          sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
          render="explicit"
          onloadCallback={recaptchaLoaded}
          verifyCallback={verifiedRecaptcha}
        />
      </Box>
      <Button type="submit" value="Send" className="submit" bgColor="brand.100" mt="4">Send</Button>
    </form>
  </Flex>
そして、我々のフォームは完了です!サイトドメインを追加してくださいlocalhost/127.0.0 あなたのRecaptcha管理ミンダッシュボードに、またはそれ以外のあなたのサイトと通信することができなくなります.最終的なコードは次のようになります.
ContactsUformjs
import * as React from 'react';
import * as emailjs from 'emailjs-com'
import Recaptcha from 'react-recaptcha'
import {
  Input,
  FormControl,
  FormLabel,
  Button,
  Textarea,
  Box,
  Flex
} from '@chakra-ui/react'

export default function ContactUs() {
  const [recaptchaLoad, setRecaptchaLoad] = React.useState(false)
  const [isVerified, setIsVerified] = React.useState(false)
  const nameRef = React.useRef(null)
  const emailRef = React.useRef(null)
  const messageRef = React.useRef(null)


  const recaptchaLoaded = () => {
    setRecaptchaLoad(true);
  }

  const verifiedRecaptcha = (response) => {
    if (response) {
      setIsVerified(true);
    }
  }
  function sendEmail(e) {
    e.preventDefault();
    const templateParams = {
      from_name: nameRef.current.value,
      from_email: emailRef.current.value,
      to_name: 'SquadPerks Support',
      message: messageRef.current.value,
    }
    if (recaptchaLoad && isVerified) {
      emailjs.send(
        process.env.NEXT_PUBLIC_SERVICE_ID,
        process.env.NEXT_PUBLIC_TEMPLATE_ID,
        templateParams,
        process.env.NEXT_PUBLIC_EMAILJS_USER_ID
      )
        .then((result) => {
          console.log(result.text);
          nameRef.current.value = null
          emailRef.current.value = null
          messageRef.current.value = null
        }, (error) => {
          console.log(error.text);
        });
    } else {
      console.error('Please check reCaptcha and try again.')
    }
  }

  return (
    <>
      <Flex flexDirection="column" >
        <form className="contact-form" onSubmit={sendEmail}>
          <FormLabel>Name</FormLabel>
          <Input type="text" name="user_name" className="from-name" autoComplete={false} ref={nameRef} />
          <FormLabel>Email</FormLabel>
          <Input type="email" name="user_email" className="from-email" autoComplete={false} ref={emailRef} />
          <FormLabel>Message</FormLabel>
          <Textarea name="message" autoComplete={false} ref={messageRef} />
          <Box mt="4">
            <Recaptcha
              sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
              render="explicit"
              onloadCallback={recaptchaLoaded}
              verifyCallback={verifiedRecaptcha}
            />
          </Box>
          <Button type="submit" value="Send" className="submit" bgColor="brand.100" mt="4">Send</Button>
        </form>
      </Flex>
      <style>{`

      `}</style>
    </>
  );
}
それは実際に私の非常に最初のブログの記事はここにあるので、このポストを読むために時間を割いていただきありがとうございます!私は私のゲームサービスプラットフォームを構築すると、私は近い将来、より多くの共有されますSquadPerks . あなたがゲームと競争的なesportにいるならば、我々のサイトで我々をチェックして、我々に我々の社会的メディアの全てについてフォローをしてください!我々は同様に繁栄のコミュニティを持って、常に誰にとっても場所です!
次回まで!
Vue aタグはクリックしてダウンロードすることを実現して、画像、txtファイルをダウンロードして、直接開く方式ではありません
反応4