Kontaktformular mit EmailJS

Dieses moderne Kontaktformular, erstellt mit React, Tailwind CSS und EmailJS, bietet Echtzeit-E-Mail-Funktionalität. Der bereitgestellte Code und die Anweisungen führen Sie durch die Erstellung eines professionellen Kontaktformulars für Ihre Website.

Live-Demo: https://www.php.cn/link/3dcc0806127ac6878b990a079e4f8c77

Quellcode: https://www.php.cn/link/77a4df1abe7183c4302bce4fd120e216

1. Projekteinrichtung und Installation

Schritt 1: Klonen des Repositorys

Klonen Sie das Projekt von GitHub mit Git:

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

Schritt 2: Abhängigkeiten installieren

Installieren Sie die erforderlichen Pakete über npm:

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

2. Konfigurieren von EmailJS

Schritt 1: Kontoerstellung

1. Melden Sie sich für ein kostenloses EmailJS-Konto an.
2. Greifen Sie nach der Anmeldung auf Ihr EmailJS-Dashboard zu.

Schritt 2: E-Mail-Dienst hinzufügen

1. Navigieren Sie zu E-Mail-Dienste und wählen Sie E-Mail-Dienst hinzufügen.
2. Wählen Sie Ihren E-Mail-Anbieter (Gmail, Outlook usw.) und folgen Sie den Verbindungsanweisungen.

Schritt 3: Erstellen einer E-Mail-Vorlage

1. Gehen Sie zu E-Mail-Vorlagen und klicken Sie auf Neue Vorlage erstellen.
2. Passen Sie Ihre E-Mail-Vorlage an, indem Sie Platzhalter wie {{name}}, {{email}} und {{message}} verwenden.
3. Speichern Sie die Vorlage und notieren Sie sich die Vorlagen-ID.

Schritt 4: API-Schlüssel erhalten

1. Gehe zu Integration > API-Schlüssel.
2. Kopieren Sie die Dienst-ID, die Vorlagen-ID und die Benutzer-ID. Diese sind entscheidend für den nächsten Schritt.

3. Umgebungsvariablen festlegen

Erstellen Sie eine .env-Datei im Stammverzeichnis Ihres Projekts, fügen Sie die folgenden Zeilen hinzu und ersetzen Sie die Platzhalter durch Ihre EmailJS-IDs:

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

Denken Sie daran, your_service_id, your_template_id und your_user_id durch die tatsächlichen Werte zu ersetzen, die Sie von EmailJS erhalten haben. Damit ist die Einrichtung abgeschlossen. Weitere Codedetails finden Sie im GitHub-Repository.

Das obige ist der detaillierte Inhalt vonKontaktformular mit EmailJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!