Hoe email verzenden met javascript
(html email maken met dynamische inhoud naar zelf te kiezen email adres)Hoe uitklap menu effect maken
(met css)Last edit : 2008/02/06
Het probleem:
Ik was via Google op zoek naar informatie over de mogelijkheid om vanuit je blog of website een e-mail te verzenden naar een zelf te kiezen e-mail adres.
Maar ik heb maar een gratis webruimte bij Telenet en beschik dus niet over CGI, PHP, ASP enz.
Het enige wat er dan nog resteert is javascript. En het html comando mailto:.
Maar mailto: dient normaal om een formulier op de website te versturen naar een vast e-mail adres. Bvb een bestelbon, naar de eigenaar van de site. Als je een dergelijke mail krijgt staat daar in de body dan ook al de namen van de invulvelden vermeld samen met de inhoud van die velden. En ook bvb welke opties er aangekruist zijn.
Maar dat is dus niet wat ik wou. Het doel is om de lezer van een artikel de mogelijkheid te geven om met 1 simpele muisklik de mogelijkheid te geven om een link naar dat artikel (+ wat extra tekst) door te sturen naar een kennis.
Niet mogelijk.
Na enkele uren op forums en andere sites gelezen te hebben. Was het enige antwoord. "Dat is niet mogelijk!!!"
Maar NIET MOGELIJK kon ik nergens in mijn woordenboek vinden.
Dus na enkele uren programmeren en experimenteren is dit het resultaat:
Een link die uitklapt tot een invulformulier en waarvan de inhoud
+ de link naar de actieve html pagina opent in uw e-mail programma na het klikken op de verzenden-knop.
kan met foto of tekst link
Ik heb de code (javascript + css) zo gemaakt dat je deze niet moet aanpassen voor iedere webpagina (artikel).
De link in de e-mail is automatisch de URL van de pagina waarop het script staat.
De CSS is niet nodig voor de werking maar zorgt voor het mooie uitvouw effect.
Ik weet niet of het ook onder Windows XP of MAC-OSX werkt. Ik heb het enkel kunnen testen onder Windows Vista met zowel IE7 als Mozilla Firefox 2.x.
Dit script opent gewoon uw standaard ingestelde e-mail software (Outlook Express in mijn geval). Maar dan automatisch met ingevulde velden en bericht. (Dat de gebruiker dus nog kan aanpassen of gewoon annuleren)
html email maken - Het javascript
1. Plaats dit tussen <head> en </head>
|
<style type="text/css" media="screen"> #tekst { display: none; width: 250px; border: 2px solid black; background-color: #eeee00; padding-left: 15px; font-size: 12px; float:none; } </style> <script src="../js/standaard.js" language="javascript"></script> |
Als je gebruik maakt van een extern CSS bestand, dan kan je dat natuurlijk ook daar zetten.
Als je daar van uwzelf al #tekst gebruikt moet je hier een andere naam van maken, en dit ook in al de rest van het script aanpassen.
src="../js/standaard.js" : Dit is de relatieve URL tov het artikel waarin je de code opneemt.
Je kiest dat dus zelf waar je standaard.js zet en zelfs de naam mag je veranderen.
Normaal kan je javascript ook in je html file zetten, maar sommige scrips gebruik je op meerdere pagina's en dan is het handig om de veel gebruikte scripts in een apart bestand te zetten.
Nog een voordeel van een apart script bestand is dat wanneer je hierin iets veranderd, dat deze verandering dan automatisch van toepassing is op al uw html bestanden die dat script inlezen.
2. Het standaard.js bestand.
Dit is een gewoon ascii TXT (windows notepad) bestand waarvan je de .TXT vervangt door .js
LET op!!! : binnen dit bestand GEEN <script> tags gebruiken, enkel de rauwe javascript code.
|
function uit(klap) { if (document.getElementById) { var stijl = document.getElementById(klap).style; if (stijl.display == "block") { stijl.display = "none"; } else { stijl.display= "block"; } return false; } else { return true; } } function zmail(){ var test='text'; var emailadres='text' var inhoud='text'; var link='text'; emailadres=document.form.bcc.value; link=document.location.href; //if (emailadres=="") // alert("Vul een e-mail adres in aan wie je dit bericht wil zenden"); //else { inhoud=document.form.body.value; inhoud=inhoud+'%0a%0a%0d'+'zie : '+link; test='mailto:?bcc='+emailadres+'&subject=test&body='+inhoud; document.form2.action=test; document.form2.submit(); // } } |
De functie uit(klap) is voor het css uitvouw effect.
De functie zmail() is voor het opstellen van de email met de juiste url.
Er staan 4 regels met een // voor. Als je deze // weghaalt (alle 4) dan geeft het script een terugmelding naar de lezer als deze geen e-mail adres heeft ingevuld.
Ik heb dat er maar bij gezet zodat je kan zien (en leren) hoe een if then else werkt. Maar in dit geval is dit niet nodig omdat er na het op "verzenden" klikken toch de email geopend wordt, en het is dan handiger voor de lezer om daar pas zijn bestemmelingen in te vullen.
3. De form code op de plaats in uw html file waar je het uitklap formulier wenst.
|
hier tekst die voor het uitklap menu staat <br /> <a href="#" onclick="return uit('tekst');" title="Verzend dit via uw e-mail naar een vriend"> <img src="UWSITE../../email.jpg" height="16" width="16" alt="verzend via uw e-mail naar een vriend" /> kan met foto of tekst link</a> <br /> <div id="tekst"> <form method="post" action="" name="form2" nctype="text/plain"></form> <!-- leeg form nodig voor verzenden e-mail --> <form method="post" action="" name="form" nctype="text/plain"><br /> e-mail : <input type="text" name = "bcc" size="20" maxlength="250"><br /> Extra tekst (automatisch gevolgd <br /> door de link)<br /> <textarea type="text" name="body" id="body" size="500" cols="27" rows="5">Hoy, ik heb op www.infonosity.be het volgende leuke artikel gevonden : </textarea><br /> <input type="button" onclick="zmail()" style="font-size: 8pt" value="verzenden" name="button"><br /> Vul het e-mail adres in en klik op verzenden. </form> </div> Hier tekst na het uitklap menu... <br /> |
De URL naar email.jpg moet je natuurlijk aanpassen aan uw eigen email.jpg of andere file.
En in de textarea moet je natuurlijk www.infonosity.be vervangen door uw eigen website.
(tenzij je gratis reclame voor mijn site wilt maken
)
Tip1 : gebruik voor een Enter in uw bericht = New-line + Cariage Return.
Update 2007-10-17 : Dit was niet zichtbaar in bovenstaande code. Nu wel dus.
Tip2 : Je kan dit uitklappen ook voor andere doelen gebruiken.
bvb: het antwoord op een vraag (tijdelijk) verbergen.
zet daar enkele linken, om zo een uitklap menu te maken.
of een foto, of... (beperkt tot uw fantasie)
Reageren kan via :
zie bvb ook mijn artikel over : Social bookmark generator
Dit maakt voor jouw artikels automatisch bovenstaande sociale netwerk icoontjes met de juiste link om uw artikels aan te melden, of erop te stemmen.
Infonosity, Copyright (c) 2007 Bruno Stroobandt. about-disclaimer-contact