Wie erstelle ich ein dynamisches Kontaktformular?

Hallo, also ich habe bereits ein Kontaktformular erstellt das auch soweit gut funktioniert hierzu mein bisheriger Code:

    <?php
    if(isset($_POST["submit"])){
      mail("[e-mail]", "Kontaktformualr", 'Vorname: '.$_POST["vorname"].'Nachname: '.$_POST["nachname"].' Email: '.$_POST["email"].' Betreff: '.$_POST["subject"].' Nachricht: '.$_POST["message"]);
      ?>
      <h1 style="color: green;">Das Kontaktformular wurde abgesendet!</h1>
      <?php
    }
    ?>


    <form action="contact.php" method="post" class="service-contact-form">
      <input class="service-input-field" type="text" name="vorname" placeholder="Vorname*" required="required"><br>
      <input class="service-input-field" type="text" name="nachname" placeholder="Nachname*" required="required"><br>
      <input class="service-input-field" type="email" name="email" placeholder="Email*" required="required"><br>
      <input class="service-input-field" type="text" name="subject" placeholder="Betreff"><br>
      <textarea class="service-textarea-field" name="message" rows="8" cols="80" placeholder="Nachricht*" required="required"></textarea><br>
      <button class="service-contact-form-button" type="submit" name="submit">Senden</button>
    </form>

Das ist jetzt das normale Kontaktformular, allerdings würde ich gerne unterschiedliche Kontaktformulare mit einem <select> Element auswählen können.

    <div class="service-contact-form-select">
      <select>
        <option value="0">Support Anfrage</option>
        <option value="1">Bestellung</option>
      </select>
    </div>

Denn ich brauche bei der Supportanfrage wesentlich weniger Informationen wie bei dem Bestellformular.

Also was soll passieren?

Wenn ich bei <select> value="0" habe soll das Formular wie oben beschrieben aussehen.

Wenn ich aber bei <select> value="1" habe soll das Kontaktformular um weitere Elemente erweitert werden deren Informationen dann auch via php an meine e-mail übermittelt werden.

Kann mir hier jemand weiterhelfen?

Answer 1

[fluffiknuffi2]

Dazu könntest du mit JavaScript arbeiten und zB für jeden Typ von Kontaktformular ein eigenes PHP Script anlegen und dieses dann via JavaScript aufrufen. Dazu einen Event Listener an das Dropdown-Element hängen der auf das change Event hört und dann mit window.location.href das passende script aufrufen.

Schöner könntest du es mir AJAX lösen, einer JavaScript Technik um Daten bzw. HTML nachzuladen. Dann lädst du den HTML Code nach und zeigst ihn an, und musst nicht die Seite neu laden.

Oder wenn du wirklich Lust auf JavaScript hast nutzt du ausschließlich JS Code um das richtige Kontaktformular anzuzeigen und verzichtest an der Stelle auf PHP.

Woher ich das weiß: Berufserfahrung – Studium + Berufspraxis

Comments

[TechPech1984]

lol , dein ernst , warum einfach, wenn man es auch extrem schwierig machen kann .

naja , wer das einfache schon nicht mehr kann , der hat eigentlich auch keine ahnung .

wer javascript zwingend brauch, der hat doch schon verloren .

[fluffiknuffi2]

@TechPech1984

Ja nur leider ist deine einfache Antwort nicht das was gesucht ist 😑

Du brauchst JS nicht zwingend. Du kannst auch das select in ein eigenes Formular wrappen, dann ein Submit button dazu und dann wird per PHP entsprechend der Auswahl das richtige Formular gebaut. Nur dann hast du eben diesen zusätzlichen Button statt via JS das automatisch beim Ändern zu triggern.

Answer 2

[TechPech1984]

z.b.

   <?php
   if(isset($_POST["submit"])){
      if ($_POST["formulartyp"] == 0 ) {
      ....
      } else {
     mail("[e-mail]", "Kontaktformualr", 'Vorname: '.$_POST["vorname"].'Nachname: '.$_POST["nachname"].' Email: '.$_POST["email"].' Betreff: '.$_POST["subject"].' Nachricht: '.$_POST["message"]);
    }
     ?>
     <h1 style="color: green;">Das Kontaktformular wurde abgesendet!</h1>
     <?php
   }
   ?>


   <form action="contact.php" method="post" class="service-contact-form">
      <select name="formulartyp">
         <option value="0">Support Anfrage</option>
         <option value="1">Bestellung</option>
       </select>
     <input class="service-input-field" type="text" name="vorname" placeholder="Vorname*" required="required"><br>
     <input class="service-input-field" type="text" name="nachname" placeholder="Nachname*" required="required"><br>
     <input class="service-input-field" type="email" name="email" placeholder="Email*" required="required"><br>
     <input class="service-input-field" type="text" name="subject" placeholder="Betreff"><br>
     <textarea class="service-textarea-field" name="message" rows="8" cols="80" placeholder="Nachricht*" required="required"></textarea><br>
     <button class="service-contact-form-button" type="submit" name="submit">Senden</button>
   </form>

Comments

[fluffiknuffi2]

Ich glaube das ist nicht ganz was gemeint ist 😅

[jerora98]

@fluffiknuffi2

jain es ist teilweise schon was ich meinte, er hat mir gezeigt wie ich anhand des select Feldes die e-Mail generiere, aber nicht wie ich anhand des select Feldes auch das Kontaktformular an sich darstelle. Danke schonmal dafür :D

Answer 3

[tanteerna68]

Warum machst Du das so kompliziert?
Erstelle doch einfach die zwei Kontaktformulare und gib dem User die Möglichkeit eines der Kontatkformulare auszuwählen. Das kann ganz einfach in einem sog. Accordion passieren.

Beispiel: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion