Formular einbinden.

[whippet]

Hallo,

ich bräuchte Hilfe (gegen Bezahlung) bei implementieren eines Buchungsformulars (bereits generiert) auf bestehende Website inkl. grafischer und css Anpassung.

Bitte eine kurze PM. Danke! Gruß Peter

[Volker]

Moin Peter,

lass Dir hier helfen. Lade das Formular doch mal auf Deinen Server und verlink es hier. Wenn es ein PHP Formular ist, dann setzt es hier zum download rein.

Da werden Dir bestimmt einige helfen können / wollen.

[whippet]

Hallo Volker,

danke! Hier das generierte Formular (noch komplett unbearbeitet): https://westudio.de/formular.php

Es sollte auf die Website implementiert werden und auf eine womöglich DIN A4-Form reduziert werden, sodass man den fertigen Formular auch ausdrucken könnte. Die csv-Datei müsste auch per Email verschickt werden, damit ich dann diese weiter in ein Rechnungssystem importieren kann.

Findet sich hier jemand, der es idealerweise direkt einrichten könnte?

Danke! Gruß Peter

[Volker]

schick mir doch mal bitte die php dateien die zum Formular gehören zu.

[whippet]

Hallo Volker, anbei die php-Datei. Danke! Gruß Peter

[Volker]

Hallo Peter,

das Formular jetzt so wie es im Moment ist, speichert ja nur die Formulareingaben in der Datei "datei.csv" auf dem Server. Das ist schon mal richtig Allerdings fehlt ja in dem Script noch das Senden des Formulars an Dich.

Ich kenne den Generator vom Werner nicht so genau, aber da ist doch mit Sicherheit auch die Möglichkeit das man neben der CSV Datei auch die Datenfelder per Mail senden kann. Bitte schau Dir das nochmals genau an.

Diese CSV Datei kann man mit Sicherheit auch per Mail weiterleiten an Deine E-Mail. Sollte man in dem Generator auch einstellen können - wenn nicht, Werner mal Bitten das zu ermöglichen.

Aha, ich sehe gerade man kann nur entweder oder einstellen. Dann muss das Script erweitert werden, damit eben alles per PHP Mailer gesendet wird.

[Tommy Herrmann]

@Volker,

Das ist so nicht vorgesehen.

Will man beides, müsstest Du erst ein Formular als "E-Mail" erstellen. Dieses dann speichern und dann nochmals zurück auf Seite-1- gehen und es nochmals mit der CSV-Datei erstellen.

Ich habe das jetzt hier so gemacht:

https://www.mobirise-tutorials.com/Form ... ar-csv.php

1. "Formulardaten als E-Mail versenden" auswählen
2. Gewünschte Formularfelder hinzufügen
3. Formular erstellen und Datei speichern
4. Im Generator auf Seite 1 zurückgehen
5. "Formulardaten in einer CSV-Datei speichern" auswählen
6. Im Generator auf Seite 3 gehen
7. Nur den PHP-Teil (Quelltext) kopieren der die CSV-Datei betrifft
8. Diesen kopierten Quelltext an der gleichen Stelle in der gespeicherten Datei einfügen
9. Fertig!

Code: Alles auswählen

  // Daten in einer CSV-Datei speichern (Vorschlag) - Bitte anpassen!

  // Dateiname - Die Datei benötigt Schreibrechte.
  $Datei = "datei.csv";

  // Daten (Strichpunkt separiert)
  $Text = "$name;$email;$betreff;$nachricht;\n";

  // Daten speichern
  $Fh = fopen($Datei, "a+");
  if (fwrite($Fh, $Text)) {
   echo "<p>Die Daten wurden eingetragen.</p>";
  }
  else {
   echo "<p>Fehler beim eintragen der Daten!</p>";
  }
  fclose($Fh);

[Volker]

Danke Tommy

ich sagte ja ich kenn den Generator nicht sooo gut

Also Peter, weißt was Du zu tun hast

Dann nimmst Du das fertige Script und bindest es in z.B. einen Article Block oder auch in einen HTML Block ein.
Die CSS kann dann angepasst werden oder Du nimmst die vom Werner vorgeschlagene CSS mit Bootstrap.

Noch ein Tipp: den ellenlangen Text im Formular würde ich mit einem info Button lösen und entweder als title tag Text oder als Popup realisieren. Damit sparts Du Platz im Forumlar.

[whippet]

Hallo Volker, danke euch beiden! Der ellenlager Text muss leider sichtbar sein und es müssen noch Absätze rein, aber die Schrift könnte kleiner werden und die Zeilen länger, sodass es weniger Platz wegnimmt.

Könnte man sonst den Formular im Oberem Bereich zweitspaltig machen (ausser bei Mobiler-Aufsicht)?

Wie man diese CSS macht, weiß ich überhaupt nicht. Auch die Platzierung auf der Website habe ich keine Vorstellung wie ich es selbst machen könnte.

Ein Problem gibt es auch noch mit der Unterschrift. Die Bilder lassen sich nicht hochladen. Dann sollte auch noch eine Möglichkeit gegeben sein, dass die Kunden den Formular ohne Bild mit Unterschrift schicken können, dann aber das Formular bei sich ausdrucken können, dieses dann unterschreiben und Scan oder Foto davon schicken können.

Danke euch allen! Beste Grüße Peter

[Volker]

Du meinst sowas ?
zum unterschreiben ?



Ich mache morgen mal ein Video dazu Also komplett mit PHP Script, Einbindung usw.

[whippet]

Hallo Volker, so was wäre ultrageil!! Danke! Gruß Peter

[Volker]

Hallo Peter,

ich hab es mal in einem dynamischen Iframe eingebaut, damit nur das Formular gedruckt wird, ohne Header und Footer.
Allerdings sind es 2 Seiten, wegen dem Text. Müsste man noch anpassen. Schau mal ob es so für Dich zu nutzen wäre.

https://360p.eu/mobirise/

[whippet]

Hallo Volker, vielen Dank!! Das ist genial mit der Unterschrift! Vielleicht sollte der Strich etwas weniger fett sein, aber ansonsten echt Wahnsinn! Es wäre auch gut, wenn man dazu eine kurze Beschreibung gibt, so dass die Leute es überhaupt schnallen, dass man da mit der Maus unterschreiben kann.

Sonst gibt es leider einpaar Dinge, die noch geändert werden müssten.

-Oben muss wie vorher "Name/Firma" rein, da manchmal auch Privatpersonen buchen. es sollte auch Pflichtfeld sein, Ansprechpartner dagegen nicht.

- bei dem Mietdatum fällt mir noch eine Sache ein: Was mache ich mit Kunden, die mehrere Tage hintereinander buchen wollen? Manche buchen auch jeden Tag andere Uhrzeit und manche auch anderes Studio. Das wäre wahrscheinlich mit dem Formular gar nicht machbar, oder?

-Uhrzeiten beginnend von 0 Uhr, da gelegentlich Kunden auch in der Nacht buchen. Die Angaben womöglich geteilt (volle Stunden und Minuten in 10 Minuten Takt, 10, 20, 30, 40, 50).

-Studiowahl muss unbedingt mehrfach ankreuzbar sein, da manche Kunden mehrere Studios auf einmal buchen wollen.

-bei Nutzungsart müsste der Punkt "Nutzung von Studiotechnik gewünscht" extra zum ankreuzen sein und der Text sollte so lauten: "Nutzung von Studiotechnik gewünscht (Details bitte unter Sonstige Bemerkungen eintragen)".

- diese Spamschutz ist glaube ich nicht notwendig. Seitdem ich mobirise nutze (5 Jahre) habe ich per Formular nicht ein einziges spam bekommen.

- Das größte Problem ist der langer Text, der muss bleiben, vielleicht noch viel kleinere Schrift. Es müssen noch Absetze rein (schicke ich andermal zu).

Das größte Problem ist das mit dem drucken auf A4. Irgendwie egal wie, aber es muss unbedingt auf eine Seite rein passen. Wir müssen diese Seiten auch drucken und abheften können. Und Logo sollte eigentlich auch noch rein ...

Hier das alte pdf-Formular: https://westudio.de/assets/files/westud ... eutsch.pdf

Ich weiß, dass es noch viel Arbeit wird, bin wirklich sehr dankbar für alles und würde es gerne entsprechend honorieren!

Beste Grüße Peter

[Volker]

Hallo Peter,

ich sehe das Problem bei Bootstrap. Wie Du siehst sind zwar die Formularfelder nebeneinander, werden aber in der Druckansicht untereinander gesetzt. Ich weiß nicht ob man das mit CSS in den Griff bekommen kann - Tommy ??

Wenn ich das ganze in "old style" mache, dann klappt das zwar mit der Druckansicht, sieht aber eben altbacken aus.

druckansicht.png

Ich bastel mal weiter ...

AHA...liegt am Iframe.

Wenn man die Seite direkt aufruft, dann sieht die Druckvorschau richtig aus

https://360p.eu/mobirise/form5.html

[Tommy Herrmann]

wo ist denn dieses Formular her?

Man könnte doch sicher den Code ebenso in Mobirise direkt einbauen und benötigt dann keinen Iframe - denn ein Iframe ist dann eher immer eine Notlösung, auch wenn dieser dynamisch ist.

[Volker]

Hi Tommy,

wenn ich es direkt in Mobirise einbinde, habe ich ja footer und header und alles andere ja im Druck.
Soll ja nur das Formular gedruckt werden. Gibts da eine andere Lösung für ?

[Tommy Herrmann]

Ich hatte da mal was in NOF gemacht, man kann einen druckbaren Bereich festlegen. Ich suche mal ...

[Tommy Herrmann]

... war auch damals vom Werner (noch als "Webbausteine.de") Ich weiß nicht, ob er das noch auf seiner neuen Seite hat oder nicht.

http://www.nof-tutorials.com/Drucken-Se ... orial.html


Das geht ziemlich einfach über CSS "@media print":

Code: Alles auswählen

<style>
 @media print {

   div#LayoutHeader {
    display: none;
   }
  
   img#Logo {
    display: none;
   }
    
   div#LayoutFooter {
    display: none;
   } 
     
 }
</style>

P.S.:

habe es auf Werner-Zenk.de gefunden

https://werner-zenk.de/tipps/seiten_dru ... talten.php

[Volker]

Jau,
das ist die Lösung

Ich sag ja - ich und CSS

Muss ich nur noch hin bekommen

[Tommy Herrmann]

Hier noch was - ein wenig anders - da wollte ich nur das Drucker-Symbol nicht mit drucken - oder auch nur eine bestimmte Textzeile nicht.

http://www.tommyherrmanndesign.com/nof/ ... ymbol.html