Email senden mit astro (+ react)?

Hallo,

Ich habe in astro eine react componente, die ein Formular hat. Wenn der Nutzer das submit event auslöst sollen die Daten per Email versendet werden.

Danke im voraus

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, programmieren

27.08.2024, 06:01

Leg dir einen Endpoint an, zu dem du die Formulardaten schickst. Ein Beispiel dafür findest du in der Dokumentation.

Für den E-Mail-Versand kannst du eine externe Bibliothek einbinden. Zum Beispiel emailjs, Nodemailer oder Postmark.

verreisterNutzer

27.08.2024, 10:03

Okay danke für die Erklärung.

Um nodejs zu installieren muss ich den Befehl ... laufen.

npx astro add node

Muss ich noch etwas installieren um in der astro.config.mjs den output auf Server zu setzen?

regex9

27.08.2024, 20:50

@verreisterNutzer

Nein, nur ein SSR-Adapter (node, o.ä.) muss (z.B. via astro add) installiert werden.

verreisterNutzer

28.08.2024, 11:22

@regex9

Ich hatte aus versehen das npx dazu geschrieben. Wenn ich jetzt einen build laufe bekomme ich die Ordner SERVER und CLIENT. Ich muss jetzt einen Server mit Express aufsetzen, ich weiß aber nicht wo ich die Datei abspeichern muss damit sie beim build auch in den dist Ordner eingefügt wird.

Übrigens das Senden von Mail funktioniert jetzt (node + nodemailer)

verreisterNutzer

28.08.2024, 14:57

@regex9

Während es möglich, dass du mir erklärst wir ich das veröffentlichen kann auf einem ftp (all-inkl)

regex9

29.08.2024, 05:10

@verreisterNutzer

Unterstützt All-inkl denn überhaupt Node.js? In der Paketübersicht wird nur PHP erwähnt. Via FTP wirst du nur Zugriff auf das Website-Rootverzeichnis des Apache-Servers haben, in den dein Projekt aber nicht hineingehört. Auf Websiteanfragen soll doch ein Express-Server antworten, nicht Apache.

verreisterNutzer

29.08.2024, 11:50

@regex9

Stimmt, ich werde beim Support nachfragen. Danke.

verreisterNutzer

29.08.2024, 21:45

@regex9

....bin verzweifelt. Beide Projekte kann ich nicht bei ihnen hosten.

McSKB

27.08.2024, 00:04

https://stackoverflow.com/questions/77278371/cant-send-email-in-contact-jsx-component-in-astro-js-using-emailjs-but-its-not

Woher ich das weiß:Studium / Ausbildung – Begeisterter Beweger der 0 und 1

verreisterNutzer

27.08.2024, 00:08

Danke, geht es auch ohne das ich meine Logindaten angeben muss. Kommt von php und da gibt es

 mail()

// Login?!
const serviceId = 'service_dighcxs';
    const templateId = 'template_gxyynmw';
    const publicKey = '0KNtQ2nWh28eb1DE-';

McSKB

27.08.2024, 00:09

@verreisterNutzer

Ich kenne das System nicht. Habe nur den Beitrag gefunden.

Würde ich ausprobieren und mich herantasten, was gefordert ist.

verreisterNutzer

27.08.2024, 00:10

@McSKB

Ok trotzdem danke

Ähnliche Beiträge

NextJS Server Component aktualisiert API-Daten nicht?

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

...zum Beitrag

Erfolgreiches Submit mit PopUp verbinden?

Wie verbinde ich bei meinem Formular den erfolgreichen Submit button, also wenn die Email erfolgreich vom Php script per Mail gesendet wurde mit einem PopUp. Kein neue Seite sondern ein PopUp der aufploppt und berichtet dass das Formular abgesendet wurde oder dass es Fehlgeschlagen ist

...zum Beitrag

Wordpress Kontakt Formular?

Hallo habe ein Problem mit meinem Kontaktformular in Wordpress. Wenn ich es versuche zu senden, bekomme ich folgende Fehlermeldung:

Ich vermute das es bei den Mail Einstellungen einen Fehler hat, aber ich weiß nicht welcher. Ich habe nur bei To meine Email-Adresse eingetragen.

Kann mir bitte jemand helfen, bin über jede Antwort dankbar!

Ps.: Ich nutze das Plugin Contact Form 7

...zum Beitrag

JavaScript warten, bis sich Variable ändern?

Ich habe ein Formular mit einem Submit-Button.

<button onClick={() => submitHandler("fromSubmitButton")}>Submit</button>

Die submitHandler Funktion sendet über einen Websocket eine Nachricht an den Server, ohne eine direkte Antwort zu bekommen, wie es mit async/await funktionieren würde:

socket.emit('email-submit', value)

Nach einiger Zeit kommt vom Server bzw. Websocket eine Nachricht:

        socket.on('badEmailORphone', function(msg) {
            setBadEmailORphone(msg)
        });

In der Zeit zwischen dem Klick auf Submit und setBadEmailORphone gesetzt wird, möchte ich einen Ladescreen einblenden.

Rein logisch müsste ich den Ladescreen ab Klick auf den Submit-Button bis setBadEmailORphone setzen, aber wie kann ich in JavaScript x Sache machen, bis sich eine Variable ändert?

Meine erste Theorie war:

Submit onClick:

while(!setBadEmailOrphone) setLoading(true) //Mit etwas Delay zwischen Durchläufen

...zum Beitrag

Onclick und inputfield?

Hallo zusammen,

Ich würde gerne eine demo-version von einem Loginformular erstellen.

Problem : ich habe zwei Inputfelder einmal type="email" und type="password"

Darunter befindet sich ein Button type="button". Ich möchte, wenn im Inputfield type="email" ein @ zeichen eingegeben wird, beziehungsweise die eingabe korrekt war ein onclick event startet sobald man auf den Button Einloggen drückt.. Leider klappt das nicht ganz. Da er das onclick Event auch auslöst, wenn man nur jeweils ein Zeichen in Password und email input setzt. Da ich nur value.length als if Abfrage genommen habe. Wie schaffe ich das das Event erst startet wenn man erkennt, dass das Inputfeld ein @ Zeichen enthält.

Type="submit" funktioniert nicht , da die Seite dann ja neu geladen wird und alle Änderungen vom onclick Event weg sind.

...zum Beitrag

React Js App Deployen auf Webserver?

Ich habe jetzt mit

 npm run build

einen Ordner namens "build", wenn ich den über den FTP Zugang hochlade und die URL aufrufe erscheint nur eine Leere Weiße Seite.

Jedoch wenn ich es über andere Anbieter Deploye die das für mich übernehmen dann funktioniert alles einwandfrei.

Wie genau kriege ich das auch hin ?
Nutze All Inkl.

...zum Beitrag

Per JS Formular senden abbrechen?

Hi liebe Community,

ich wollte fragen ob es eine möglichkiet gibt das senden eines Formulars nach dem auf submit gedrückt wurde abzubrechen.
Der Hintergrudn: ich möchte das der User erst bestätigt bevor es abgesendeet wird mittels einer confirm-box

Alternativ würde ich einfach per CSS ein Formular verstecken, welches erst nach dem auf ein Button "Speichern" gedrückt wird auftaucht.

...zum Beitrag

Welches JavaScript Framework?

Hallo zusammen,

ich bringe mir seit ein paar Monaten HTML, CSS und JavaScript bei, habe mir ein Portfolio aufgebaut und lade dort die Projekte hoch, die ich privat entwickle, um einen einfacheren Berufseinstieg zu erhalten. Aktuell fühle ich mich in den drei oben genannten Bereichen fit genug, dass ich mich gerne in ein Framework einarbeiten würde.

Es gibt da draußen mehrere Videos über das Thema Angular, React, Vue.js, aber ich würde gerne von euch, die wirklich beruflich damit arbeiten und eventuell auch vom Hörensagen anderer Entwickler, wissen, was so im deutschen Arbeitsmarkt angesagt ist.

React ist ja, was die Rankings angeht, immer auf Platz 1, weswegen ich in diese Richtung gehen wollte. Jedoch, wenn ich auf Stepstone und anderen Plattformen schaue, werden öfters Angular-Stellen gesucht. Deswegen hat sich mir die Frage gestellt, ob React vielleicht eher im Rest der Welt populär ist und in Deutschland eventuell eher Angular oder gar ein ganz anderes Framework.

Ich bedanke mich im Voraus für eure Zeit und Hilfe.

...zum Beitrag

Internet - GET,POST und Put?

Hallo zusammen,

kann mir jemand kurz erklären wie genau die Kommunikation funktioniert. Und warum ich diese nicht einfach selber ausführen kann.

Ich betrete die Website, wäre das dann ein GET ?

Dann werden die Header die zurück kommen als Cookies gesetzt?

Wo kommen die Cookies her, und wie sende ich per POST das zurück was der Server will. Angenommen ich sende eine Anfrage über ein Submit Formular. Aber dort wird ein Token mitgesendet, ohne dieses bekomme ich ein Bad Request. Woher nimmt er dieses Token?

Allgemein wären ein paar Information gut, damit ich das besser verstehen kann. Wenn ich so etwas mit Webclients in NET nachbasteln möchte.

...zum Beitrag

Framework für laravel?

Hallo.

Erstmal ich kann noch kein framwork und kenne mich in php und einigermaßen in js aus.

Weil ich gehört habe, dass laravel ein gutes framework ist ,möchte ich es lernen.

Jetzt die Frage welches framwork am besten für das frontend in laravel ist?
Ich würde als erstes das frontend framwork lernen und dann laravel, ist das eine gute Idee?

Bitte auch mit Begründung.

Danke im voraus

Ps.: Ich nutze immer SCSS, bitte berücksichtigen.

...zum Beitrag

Problem mit EJS und PHP?

Hallo,

Ich habe eine Index.EJS Datei mit folgendem Formular:

...

</form>

Dieses Formular soll dessen Inhalte beim Absenden durch einen Submit-Button zur index.php Datei senden, welche wiederum eine Email mit dem Inhalten versenden soll. Die PHP Datei funktioniert, da in einem vorherigen Test mit eine index.HTML Seite alles prima ablief. An dem Inhalt dem Formular kann es somit auch nicht liegen. Ich vermute ein Problem zwischen EJS und PHP.

Jedoch funktioniert es mit dem EJS nicht mehr. Es steht jedes mal dort:

"Cannot post /index.php"

Ich hoffe ihr könnt mir weiterhelfen!

Mit freundlichen Grüßen,

Sinnadahtura

...zum Beitrag

HTML Formularbutton, der E-Mail versendet?

Hallo,

ich habe in meiner Webseite ein Formular erstellt (Code ist hier eingefügt) und möchte, dass wenn man auf den <input> (submit) drückt, dass eine E-Mail versendet wird, an eine Adresse, die ich vllt. im HTML-Code angeben würde.

Geht das irgendwie?

Danke im Voraus!

<form style="margin-left: 3%; margin-right: 3%; padding-top: 20px;">
  <div class="form-group">
    <label>Vorname, Nachname</label>
    <input type="text" class="form-control" name="Name" placeholder="Ihr Name">
  </div>
  <div class="form-group">
    <label>E-Mail</label>
    <input type="email" class="form-control" name="E-Mail" placeholder="Ihre E-Mail">
  </div>
  <div class="form-group">
    <label>Betreff/Titel</label>
    <input type="text" class="form-control" name="Titel" placeholder="Titel">
  </div>
  <div class="form-group">
    <label>Anliegen</label>
    <textarea class="form-control" name="Anliegen" placeholder="Ihr Anliegen"></textarea>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="Button" value="Senden">
  </div>
</form>

...zum Beitrag

Warum funktoniert dieser PHP Code nicht (PHPMailer)?

Ich wäre sehr dankbar!

<!DOCTYPE html>
<html lang="de">
<head>
  <title>PHP SMPT Mailer</title>
</head>
<body>
  <?php
  use PHPMailer\PHPMailer\PHPMailer;
  use PHPMailer\PHPMailer\Exception;
  
  require 'PHPMailer/src/Exception.php';
  require 'PHPMailer/src/PHPMailer.php';
  require 'PHPMailer/src/SMTP.php';
  if(isset($_POST["submit"])){
    $mail = new PHPMailer();
    $mail->isSMTP();
    $mail->Host = "smtp.gmail.com";
    $mail->SMTPAuth = true;
    $mail->Username = "email";
    $mail->Password = "ps";     
  
    $mail->setFrom("email", "n");
    $mail->addAddress("email", "n");
    $mail->addAttachment("Anhang.zip", "Test.zip");
    $mail->isHTML(true);
    $mail->Subject = "Test";
    $mail->Body = $_POST["msg"];
    if($mail->send()){
      echo "Deine Email wurde erfolgreich verschickt.";
    } else {
      echo "Es gab einen Fehler ".$mail->ErrorInfo;
    }
  }
  ?>
  <h1>PHP SMPT Mailer</h1>
  <form method="post" action="index.php">
    <textarea name="msg" placeholder="Nachricht"></textarea><br>
    <button type="submit" name="submit">Senden</button>
  </form>
</body>
</html>

...zum Beitrag

Nutz ihr Frameworks in JavaScript und warum?

Ich habe 2004 mit Frameworks in JavaScript angefangen und viele, viele Jahre mit unterschiedlichen Framework gearbeitet. Seite ca. 5 Jahren arbeite ich bevorzugt ohne Frameworks oder vermeide diese so gut es möglich ist.

Meine Frage an die Community, nutzt ihr JavaScript-Frameworks und wenn ja, welche Frameworks und in welchen Umfang?

Ich freue mich auf euren Antworten und bin gespannt wieviel von euch Frameworks in welchen Umfang ihr nutzt.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen