EmailJSを使用したお問い合わせフォーム

この最新のお問い合わせフォームは、React、Tailwind CSS、および EmailJS で構築されており、リアルタイムの電子メール機能を提供します。 提供されているコードと手順に従って、Web サイト用の専門的な問い合わせフォームを作成することができます。

ライブデモ: https://www.php.cn/link/3dcc0806127ac6878b990a079e4f8c77

ソースコード: https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216

1.プロジェクトのセットアップとインストール

ステップ 1: リポジトリのクローンを作成する

Git を使用して GitHub からプロジェクトのクローンを作成します:

<code class="language-bash">git clone https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216
cd contact-form</code>

ステップ 2: 依存関係のインストール

npm 経由で必要なパッケージをインストールします:

<code class="language-bash">npm install</code>

2. EmailJS の構成

ステップ 1: アカウントの作成

1. 無料の EmailJS アカウントにサインアップします。
2. ログイン後、EmailJS ダッシュボードにアクセスします。

ステップ 2: 電子メール サービスを追加する

1. メール サービス に移動し、メール サービスの追加 を選択します。
2. 電子メール プロバイダー (Gmail、Outlook など) を選択し、接続手順に従います。

ステップ 3: 電子メール テンプレートを作成する

1. メール テンプレート に移動し、新しいテンプレートの作成 をクリックします。
2. {{name}}、{{email}}、{{message}} などのプレースホルダーを使用して、電子メール テンプレートをカスタマイズします。
3. テンプレートを保存し、テンプレート ID をメモします。

ステップ 4: API キーの取得

1. 統合 > に移動します。 API キー.
2. サービス ID、テンプレート ID、および ユーザー ID をコピーします。 これらは次のステップにとって非常に重要です。

3.環境変数の設定

プロジェクトのルート ディレクトリに .env ファイルを作成し、次の行を追加して、プレースホルダーを EmailJS ID に置き換えます。

<code>VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_USER_ID=your_user_id</code>

your_service_id、your_template_id、your_user_id を EmailJS から取得した実際の値に置き換えてください。 これでセットアップは完了です。 コードの詳細については、GitHub リポジトリを参照してください。

以上がEmailJSを使用したお問い合わせフォームの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。