Email formulier maken (Forms)

uit de cursus Responsive websites maken met Adobe Muse

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Responsive websites maken met Adobe Muse

perm_identity Belinda | video_library 71 video's | query_builder 06:00:26

Makkelijk websites maken met Adobe Muse

Leer hoe je met Adobe Muse websites maakt en publiceert. Dankzij de eenvoudige interface kan iedereen zonder voorkennis van HTML-code, CSS en/of JavaScript toch vrij eenvoudig een responsive website creëren en online publiceren. Jammer genoeg is Adobe gestopt met de verdere ontwikkeling van Muse maar het programma is nog steeds te downloaden en te gebruiken.

Doelgroep van deze cursus

Iedereen die websites wil leren maken zonder kennis te willen hebben van broncode, html, css en javascript.

Wat ga je leren

In deze online cursus leer je de verschillen tussen een statische, vloeiende en responsive website. Alle meest gebruikte vensters, gereedschappen en instellingen komen aan bod.  Direct vanaf de eerste instructievideo’s besteden we aandacht aan de meest snelle en efficiënte manier waarop je webpagina’s en -sites zou moeten maken. Dus werken met master pages en stijlen.

Interactieve media met JavaScript Widgets

Je leert de widgets van het programma toe te passen. Dit zijn voorgebakken JavaScript toepassingen waarmee je in een handomdraai bijvoorbeeld een fotogallerij, formulier en interactieve kaarten kunt maken.

Om ervoor te zorgen dat de website er goed uitziet op elk apparaat. Van mobiel, tablet tot desktop besteden we een volledig hoofdstuk aan Responsive Webdesign.

Vereiste voorkennis en vaardigheden

Dit progamma kan iedereen leren, het is laagdrempelig en werkt met het WYSIWYG-principe. Jij creëert prachtige webpagina’s met behulp van de gereedschappen, opties en instelvensters en Adobe Muse schrijft de benodigde code voor jou op de achtergrond weg.

Een email formulier maken is gelukkig ook erg eenvoudig in Muse.

Op de pagina Registreren kunnen gebruiken we een emailformulier waarmee mensen zich kunnen registreren

Ga naar de Widget Library. Kies in de map Forms voor ‘Simple Contact’.

En sleep deze widget naar de pagina.

Feitelijk hoef je nu eigenlijk alleen nog maat het juiste mailadres in te voeren

op dit moment zou het formulier al functioneren.

Maar meestal vinden mensen het ook fijn om zeker te weten dat ze het formulier verzonden hebben.

Dan zou je een aparte pagina kunnen maken.

Waarop je tekst plaatst als bijvoorbeeld 'Bedankt voor uw registratie'.

En dan kun je bij 'After Sending' deze pagina kiezen uit de lijst en hiervoor toewijzen.

Het huidige formulier kun je eenvoudig verder uitbreiden met meer velden.

Kwestie van een formulierveld aanvinken en hij wordt toegevoegd.

Onderaan het formulier, maar natuurlijk nog wel boven de verstuurknop.

Ik vink het veld weer uit en deze verdwijnt.

Maar de ruimte die hiervoor zojuist benut werd blijft wel bestaan.

Naast de 'Standard Fields' kun je ook kiezen voor ‘Custom Fields’.

Dit zijn formulier elementen die je zelf kunt invullen.

Voeg bijvoorbeeld een tekstveld toe.

Als ik deze zou willen verwijderen. Dan moet ik eerst het 'Form' element selecteren en daarbinnen de 'Form Field'.

Dan kan ik deze verwijderen met de Delete-toets.

Elk formulierveld, "Form Field', gaat vergezeld van een label.

De standaard naamvoering in de labels kun je wijzigen.

Klik net zolang totdat je de label geselecteerd hebt. Dubbelklik om de tekst te selecteren.

En wijzig de bestaande tekst.

Activeer de opties voor het label.

Per formulierveld kun je bepalen of het een verplicht veld is met de optie ‘Require Entry’.

Wil je dat er een voorbeeldtekst in het veld staat als deze nog niet is ingevuld.

Dan moet je de optie ’Show Prompt Text When Empty’ aanvinken.

Dan moet je de optie ’Show Prompt Text When Empty’ aanvinken.

Ook het huidige label kun je wel of niet laten tonen.

En als een veld verplicht is, is het wel zo galant om dit met een waarschuwing aan te geven.

Activeer dan ‘Message Text’.

Je ziet al dat je deze opties per veld kunt instellen.

De standaard voorbeeldteksten in de formuliervelden kun je natuurlijk ook wijzigen.

Om te voorkomen dat er misbruik wordt gemaakt van het formulier. Door bijvoorbeeld Robots.

Is het aan te raden om het formulier te beveiligen.

Selecteer het selectie-gereedschap.

Maak de huidige selectie ongedaan door ergens in het niets te klikken.

Loop met de muis boven het formulier.

Zodra in de tooltip ‘Form’ verschijnt klik je een keer en nu heb je het hele formulier geselecteerd.

Activeer hiervoor de opties.

Kies bij 'Captcha' voor 'reCaptcha.'.

In het volgende venster dat verschijnt wordt je gevraagd om de code voor 'Public Key' en de 'Private Key' in te voeren.

Zodra je de website online hebt staan kun je jouw site bij Google aanmelden.

En de Public- en Private Key opvragen.

Hoe je dit moet doen kun je vinden bij ‘Learn more’.

Daar staan de stappen aangegeven hoe je je domein kunt aanmelden voor Captcha.

Waarna Google jou voorziet van de vereiste keys die je hier moet invullen.

Voor nu heb ik in de map Assets een tekstbestand gezet.

Waarin twee key’s staan die je puur tijdelijk kunt gebruiken om te testen.

Knip en plak deze twee keys in de juiste velden.

Ik heb deze dus al hier bij Public- en private Key geplakt.

Test het formulier in een browser. Ga naar File > Preview Page in Browser.

Vul de verplichte velden in.

Klik op de button ‘I’m not a robot’.

Een waarschuwingsvenster verschijnt.

Dat pas bij online publicatie de Captcha zal gaan werken. Klik op OK.

Ook het versturen van het formulier kan natuurlijk pas echt getest worden als de website online staat.

Maar je weet nu in ieder geval hoe je een formulier moet maken.