Dyntact v1.0 bèta: AJAX contactformulier

[profoX]

Ik heb onlangs een mooi contactformulier in elkaar gestoken, gebruikmakend van Javascript, PHP en natuurlijk XHTML/CSS. Nu zijn we een weekje verder en is het script aanbeland op versie 1.0 bèta.

Het contactformulier is natuurlijk 100% open source en de volledige source code (Javascript, XHTML en CSS heb je in principe eigenlijk al) zal binnen enkele dagen dan ook beschikbaar worden gemaakt.

Maar ik zou in tussentijd graag hebben dat een paar mensen van jullie eens een mailtje probeert te sturen met het contactformulier en op die manier helpt met het bètatesten van het script.

edit: screenshot



Probeer gerust verschillende browsers uit, en verschillende browserconfiguraties. Ik heb eergisteren en gisteren aan een fall-backmodus gewerkt voor browsers die geen AJAX gebruiken, en voor browsers die geen Javascript gebruiken, en dat moet zeker nog goed uitgetest worden.

Ik hoop dat jullie nog enkele bugs kunnen vinden

URL: http://math.debianbox.be/ajaxmailform/

----

Een paar schemaatjes (ja, ik maak graag schemaatjes ) over de fall-backmethodes, voor de mensen die interesse hebben...
Ik maak gebruik van een elegante mengeling van Javascript en PHP om het programma werkend te krijgen op bijna elke browserconfiguratie.

Browsers met AJAX + Javascript ondersteuning
Het leuke aan deze techniek is dat het programma er erg modern en dynamisch uit kan zien, met een paar leuke grafische effecten op de kop toe.



NON-AJAX FALLBACK: Browsers met Javascript, maar zonder AJAX ondersteuning
Het nadeel van deze methode is dat de pagina (automatisch) herladen zal worden om het script effectief uit te voeren, en hierdoor is het programma minder dynamisch en is de grafische weergave niet vloeiend na het versturen van het e-mailbericht.



NON-JAVASCRIPT FALLBACK: Browsers zonder Javascript ondersteuning
Het grote nadeel van deze methode is dat het programma nu volledig statisch is. Alle dynamiek bevindt zich nu aan de kant van de server. Door het gebrek aan dynamiek in de browser van de gebruiker zullen de ingevoerde gegevens pas gecontroleerd kunnen worden na het (automatisch) herladen van de pagina. Om diezelfde reden zullen grafische effecten helemaal niet mogelijk zijn met deze methode.

[Sander50]

profoX,
ziet er goed uit! Leuk al die eye candy.
Ik heb een twee berichtjes verzonden, ook met een paar Russische tekens erin, kun je kijken of die goed overkomen.
Eerste bericht is met JS aan, bij de andere is JS uitgeschakeld.

Over die schema's: maak je die gewoon in de Gimp of heb je daar een apart programma voor?

[Ward Hamelinck]

Ik heb net eens gekeken naar Dyntact en eens uitgetest en ik moet zeggen... Nice!

Dyntact kan volgens mij nog véél succes krijgen

[Quinten Verlinden]

mooi!!  

[profoX]

Ik heb een twee berichtjes verzonden, ook met een paar Russische tekens erin, kun je kijken of die goed overkomen.
Eerste bericht is met JS aan, bij de andere is JS uitgeschakeld.

Het bericht met JS kwam wel goed aan, maar door de URL escaping die ik toepas bij het doorgeven van de velden aan het backend script kwamen de Russische letters aan in de vorm "%u0432%u0445%u043E%u0434 %u0432 %u043F%u0430%u043D%u0435%u043B%u044C %u0443%u043F%u0440%u0430%u0432"

Scripting - Dyntact Mail
Van: Dyntact Mail Systeem (noreply@noreply.com)
Aan: wesley

Dit bericht werd automatisch verstuurd via het Dyntact contactformulier.

    * Naam: Sander
    * E-mailadres: [mail onzichtbaar gemaakt]
    * Onderwerp: Scripting

Bericht:
Hee profoX, gewoon een testje.
Even wat ongebruikelijke tekens:
' ' " ' ' " %u0432%u0445%u043E%u0434 %u0432 %u043F%u0430%u043D%u0435%u043B%u044C %u0443%u043F%u0440%u0430%u0432

De niet-javascript versie past geen URL escaping toe omdat het rechtstreeks via een POST request gaat, en daar ziet alles er dus al prima uit:

Scripting - Dyntact Mail
Van: Dyntact Mail Systeem (noreply@noreply.com)
Aan: wesley

Dit bericht werd automatisch verstuurd via het Dyntact contactformulier.

    * Naam: Sander
    * E-mailadres: [mail onzichtbaar gemaakt]
    * Onderwerp: Scripting

Bericht:
Hee profoX, gewoon een testje.
Even wat ongebruikelijke tekens:
' ' " ' ' " вход в панель управ

Nu met JS uitgeschakeld.

Ik heb daarvoor nu een 'dirty hack' geschreven die de strings omzet... de tests die ik heb gedaan geven nu hetzelfde resultaat als zonder Javascript..

rawurldecode gebruikte ik sowieso al, maar die bleek niet te volstaan..
dit is mijn php string decode functie nu, die gebruikt wordt bij AJAX:

function fixHexEncoding($str)
{
   $str = ereg_replace("%u([a-fA-F0-9]{4})", "&#x\\1;", $str);
   return $str;
}
function decode($str)
{
   return fixHexEncoding(htmlspecialchars(rawurldecode(stripslashes($str))));
}

ik heb Russische tekens en enkele Japanse tekens geprobeerd, en het werkt nu wel goed voor zover ik kan zien

' ' " ' ' " Russisch:  вход в панель управ // 日本語 / � �� �ん� �
modified Chinese characters called kanji (漢字 � �ん� �), and two syllabic scripts, hiragana (平仮�   � �ら� �� �) and katakana (片仮�   � �� �� �� �).

edit: dit forum maakt er echter vraagtekens van maar in mijn mail ziet het er wel goed uit

Over die schema's: maak je die gewoon in de Gimp of heb je daar een apart programma voor?

Daar gebruik ik een webbased flash app voor (ja, ik schaam me rot ) namelijk Gliffy: www.gliffy.com het kan exporteren naar .svg en .png zodat je het nog verder kan bewerken in Inkscape of Gimp.

[anko]

Ik heb onder opera en firefox met en zonder javascript berichtjes gestuurd en onder IE met javascript.
Ziet er goed uit met javascript, maar zonder moet je denk ik wel laten zien dat er wat is verzonden, anders heb je kans dat er nog eens wordt verzonden (zoals ik gedaan heb in opera).

[profoX]

anko: Het probleem is dat zoiets dus onmogelijk is zonder Javascript. Zonder Javascript is de pagina statisch en kan er niets dynamisch veranderd worden. Maar het is dan ook maar een "fallback-systeem" en de meeste mensen gebruiken gewoon Javascript (volgens w3schools ongeveer 97% van de internetgebruikers)

PS: ik heb geen berichten van jou ontvangen zonder Javascript. Wel drie berichten met de melding "met javascript". Ik heb het zelf nog eens getest en bij mij lukt het prima om een bericht te sturen zonder Javascript.

[shappie]

Ziet er gelikt uit. Erg mooi!

[anko]

anko: Het probleem is dat zoiets dus onmogelijk is zonder Javascript. Zonder Javascript is de pagina statisch en kan er niets dynamisch veranderd worden. Maar het is dan ook maar een "fallback-systeem" en de meeste mensen gebruiken gewoon Javascript (volgens w3schools ongeveer 97% van de internetgebruikers)

PS: ik heb geen berichten van jou ontvangen zonder Javascript. Wel drie berichten met de melding "met javascript". Ik heb het zelf nog eens getest en bij mij lukt het prima om een bericht te sturen zonder Javascript.

Inmiddels nogmaals zonder javascript vanuit firefox een berichtje gestuurd.
Ik ben in het verleden ook al eens met zoiets bezig geweest (zonder jouw mooie plaatje) en heb toen voor beide situaties een oplossing gemaakt.
Zie http://wilwerken.nu/test/AJAX/form.php

[profoX]

Inmiddels nogmaals zonder javascript vanuit firefox een berichtje gestuurd.

Niets ontvangen. Dat is vreemd. Welke waarden vulde je precies in? Bij andere mensen en bij mezelf werkt het wel goed.

Ik ben in het verleden ook al eens met zoiets bezig geweest (zonder jouw mooie plaatje) en heb toen voor beide situaties een oplossing gemaakt.
Zie http://wilwerken.nu/test/AJAX/form.php

Leuk!
PS: bij mij is er ook voor beide situaties een oplossing, maar ik doe het wel op een andere manier

[anko]

Met en zonder javascript naar je gestuurd.
Met mijn voorbeeld wilde ik aangeven dat je uiteraard ook zonder javascript kunt laten zien dat er wat verzonden is. Dat wist je denk ik wel. Blijkbaar wordt het bij mij vandaan ook niet verstuurd zonder javascript? RaRa.

[profoX]

Met en zonder javascript naar je gestuurd.
[...] Blijkbaar wordt het bij mij vandaan ook niet verstuurd zonder javascript? RaRa.

Met javascript ontvangen; zonder javascript niet.

Houdt misschien iets de POST Request tegen bij je? Ik ga het zelf nog eens wat verder testen, maar bij andere personen werkt het perfect, dus ik begrijp het niet zo goed.

Met mijn voorbeeld wilde ik aangeven dat je uiteraard ook zonder javascript kunt laten zien dat er wat verzonden is. Dat wist je denk ik wel.

Ja, maar ook pas na het herladen van de pagina en het doorgeven van de POST Request, maar dat is bij mij ook zo!
Volgens mij zie jij dat gewoon niet omdat iets in jouw browserconfiguratie/internetconfiguratie de POST Request tegenhoudt en je daarom terug een leeg formulier te zien krijgt....

Want het zou er zo moeten uitzien indien de non-javascript fallback gebruikt wordt:

[tuxido_devito]

Ik heb geen intresse in het gebruik hiervan omdat ik zelf ook graag php code (en mijn isp volgens mij mijn mailserver blokkeert ) schrijf maar ik moet zeggen dat jij zeer goed bent in het ontwikkelen van de interface

[KenSentMe]

Ik heb ook een bericht verzonden via mn Nokia E61 telefoon. Het berichtvenster werkt niet helemaal goed. Bij langere berichten die meer regels bevatten dan het venster valt telkens de laatste regel buiten het scherm. Daarnaast is als je het berichtvenster verlaat alleen de eerste regel zichtbaar. Ben benieuwd of het bericht wel goed is aangekomen.

[profoX]

KenSentMe: Het bericht is goed aangekomen.

Dit bericht werd automatisch verstuurd via het Dyntact contactformulier.

    * Naam: KenSentMe
    * E-mailadres: (mail onzichtbaar gemaakt)
    * Onderwerp: Mailform op symbia s60 browser

Bericht:
Hallo Wesley,

Een bericht via mn Nokia E61 telefoon met de symbian browser. Alles lijkt gewoon te werken. Alleen als je met de cursor buiten het berichtveld gaat, is alleen de eerste regel zichtbaar. Daarnaast is bij langere berichten telkens de laatste regel niet zichtbaar, hij valt buiten het veld. groet, Jeroen

Heb je toevallig een "emulator" voor die Symbian browser, zodat ik kan uittesten?
Of kan je misschien een screenshot/foto maken, als het niet teveel gevraagd is?
In ieder geval bedankt.

[anko]

Volgens mij zie jij dat gewoon niet omdat iets in jouw browserconfiguratie/internetconfiguratie de POST Request tegenhoudt en je daarom terug een leeg formulier te zien krijgt....

Allen krijg ik geen leeg formulier terug te zien, maar wijzigt er gewoon niets. De knop lijkt geen actie tot gevolg te hebben(?)
Met het versturen van berichten/formulieren via websites heb ik nog geen problemen gehad (maar wel altijd gewoon javascript aan staan). Met mijn eigen probeerseltje werkt het wel.
Opera heb ik gewoon standaard geinstalleerd en daar werkt het ook niet bij.
Blijft denk ik over mijn router (Netgear) of mijn ISP. (@home).
Nog suggesties?

[KenSentMe]

KenSentMe: Het bericht is goed aangekomen.

Dit bericht werd automatisch verstuurd via het Dyntact contactformulier.

    * Naam: KenSentMe
    * E-mailadres: (mail onzichtbaar gemaakt)
    * Onderwerp: Mailform op symbia s60 browser

Bericht:
Hallo Wesley,

Een bericht via mn Nokia E61 telefoon met de symbian browser. Alles lijkt gewoon te werken. Alleen als je met de cursor buiten het berichtveld gaat, is alleen de eerste regel zichtbaar. Daarnaast is bij langere berichten telkens de laatste regel niet zichtbaar, hij valt buiten het veld. groet, Jeroen

Heb je toevallig een "emulator" voor die Symbian browser, zodat ik kan uittesten?
Of kan je misschien een screenshot/foto maken, als het niet teveel gevraagd is?
In ieder geval bedankt.

Een emulator heb ik niet gevonden, wel heb ik een paar screenshots gemaakt:



Hier ben ik al op de regel onder de laatst zichtbare aan het typen. Tijdens het typen zie je nog net het topje van de cursor, alleen is dat op dit screenshot niet te zien.



Dit krijg je te zien als je met je cursor uit het berichtveld gaat. Alleen de eerste regel is nog zichtbaar.

[profoX]

KenSentMe: en heb je dat probleem niet bij andere contactformulieren? Ik kan zometeen niet bedenken wat er precies mis kan gaan... ik zal het misschien nog wel eens een keer onderzoeken, maar dan moet ik echt wel een "emulator" vinden ofzo van die webbrowser

[Johan van Dijk]

Volgens mij klopt er iets niet bij het controleren van het e-mail adres:

[profoX]

Johanvd: argh! goed opgemerkt! komt enkel bij de non-javascript (php) versie voor, met eregi moet de regex wat anders (het streepje deed moeilijk), maar ik heb het snel omgezet in een preg_match functie, is volgens de PHP documentatie sneller ook nu zou het e-mailadres dus wel goed gevalideerd moeten worden zonder javascript