Formulierwidgets gebruiken in Adobe Muse

Open Adobe Muse. Dubbelklik op en open de pagina waaraan u het contactformulier wilt toevoegen in de ontwerpweergave.

Open het deelvenster Widget-bibliotheek (Venster > Widget-bibliotheek). Klik op Formulieren om deze uit te breiden en selecteer vervolgens een van de twee typen formulieren:

• Gedetailleerd contactformulier
• Eenvoudig contactformulier

Sleep de contactwidget naar de pagina.

Nadat u een formulier naar een pagina hebt gesleept, klikt u één keer met de tool Selecteren om het formulier te selecteren. Vervolgens plaatst u het op de gewenste locatie.

Aangezien de formulierwidget responsief is, kunt het gedrag van deze widget bij verschillende schermformaten bekijken en controleren. Als u de positie van de widget wilt wijzigen of de opties voor het vastzetten en vergroten of verkleinen van contactformuliervelden wilt aanpassen, moet u eerst een breekpunt op de gewenste locatie toevoegen. Dubbelklik vervolgens op en selecteer het veld dat u wilt vastzetten of vergroten/verkleinen. U kunt Geen of Responsieve breedte kiezen als de optie bij Formaat wijzigen.

Als u uw formulierwidget wilt vastzetten op een bepaalde positie op de pagina, selecteert u de optie Vastzetten in de werkbalk boven aan het scherm.

Bij het ontwerpen van responsieve websites kunt u ervoor kiezen om een specifiek veld voor het contactformulier op een vaste locatie vast te zetten. Als u dit wilt doen, moet u een breekpunt toevoegen. Wanneer uw website wordt weergegeven in de schermgrootte die met dit breekpunt overeenkomt, verschijnt het veld voor het contactformulier op de locatie die u in de volgende stap gaat specificeren.

Dubbelklik en selecteer het veld dat u wilt vastzetten en kies vervolgens de gewenste vastzetoptie.

U kunt ook de gewenste formaatoptie voor uw formulierwidget en voor de afzonderlijke formuliervelden selecteren. Selecteer het element waarvan u de formaateigenschappen wilt instellen en selecteer de optie Vergroten/verkleinen uit het contextmenu bovenaan de pagina.

U kunt Geen of Responsieve breedte kiezen als de optie Vergroten/verkleinen voor contactformullieren.

Met de tool Selecteren kunt u de volledige Contactformulier-widget selecteren. Terwijl het volledige formulier is geselecteerd, wordt ''Formulier: normaal'' weergegeven in de selectie-indicator linksboven in het regelpaneel.

De koppeling Normaal is een menu met vier mogelijke staten, net als menu-items of knoppen:

• Normaal
• Tijdens verzending
• Verzenden voltooid
• Fout bij verzenden

Wanneer u het formulier zoals het in verschillende staten wordt weergegeven, wilt aanpassen, kunt u de naam van de bijbehorende staat selecteren in dit menu.

Als deze staat is geselecteerd, kunt u de weergave van het foutbericht aanpassen. U kunt bijvoorbeeld de tekstinhoud wijzigen of de kleur van de tekst wijzigen van rood in blauw.

Selecteer nogmaals Normale staat in het menu Selectie-indicator.

Zorg dat het volledige formulier nog geselecteerd is in de staat Normaal en klik op de blauwe pijl om het menu Opties te openen. De set met opties in het menu Opties heeft betrekking op de volledige widget:

Standaard staat in het veld Formuliernaam de naam van de huidige pagina, maar u kunt deze naam desgewenst wijzigen.

Als u het formulier wilt doorsturen naar meerdere e-mailadressen, typt u de adressen in het veld E-mailen naar (van elkaar gescheiden met puntkomma's).

Het functioneren van formulierverzendingen wordt bepaald door de optie die u kiest in het menu Na verzending. U kunt een van de volgende opties kiezen in het menu Opties:

• Op de huidige pagina blijven (standaardinstelling)
• Koppeling naar bestand maken (een bestand uploaden dat is gekoppeld na verzending van formulier)

U kunt twee typen nieuwe formulierelementen toevoegen:

Standaardvelden

De lijst met standaardvelden bevat:

• E-mail
• Bedrijf
• Naam
• Telefoonnummer zakelijk
• Telefoonnummer mobiel
• Zakelijk adres
• Telefoonnummer privé
• Website
• Privéadres
• Captcha

Als u een van deze velden wilt toevoegen, selecteert u het selectievakje van de vereiste velden.

Als u aangepaste velden aan uw contactformulieren wilt toevoegen, klikt u op de +-knop naast het aangepaste veld dat u wilt toevoegen. Typ vervolgens het label in de ontwerpweergave ter beschrijving van het nieuwe formulierveldelement dat u aan het formulier toevoegt.

De velden hieronder zijn de typen aangepaste velden die u aan een contactformulier kunt toevoegen:

• Eén tekstregel: Velden met één tekstregel zijn bedoeld voor korte tekst zoals de leeftijd van de bezoeker of de postcode.
• Meerdere tekstregels: Voeg velden met meerdere tekstregels toe wanneer u wilt dat de bezoeker meer informatie kan invoeren, zoals bij het schrijven van een opmerking of het stellen van een vraag.
• Selectievakje
• Groep selectievakjes
• Groep keuzerondjes

Klik één keer op het hele formulier om de formulierwidget als een geheel te selecteren. Als u afzonderlijke elementen in de formulierwidget wilt selecteren, dubbelklikt u op het desbetreffende element en selecteert u het.

Bekijk de selectie-indicator om te zien of de hele widget of een individueel element is geselecteerd. In de selectie-indicator wordt Formulier aangegeven als u de gehele widget selecteert en Tekstinvoer als u een bepaald veld selecteert.

Wanneer een Tekstinvoer-formulierelement is geselecteerd en u op de blauwe pijlknop klikt om het menu Opties te openen, bevatten de weergegeven opties instellingen die specifiek betrekking hebben op het desbetreffende element.

Als een Tekstinvoer-element is geselecteerd in het menu Opties, kunt u kiezen of het een verplicht veld is. U kunt ook kiezen of het veld een beschrijvende tekst weergeeft om bezoekers te helpen begrijpen wat ze moeten invoeren als ze een veld invullen.

Schakel in de sectie Onderdelen de selectievakjes in of uit om het label en de berichttekst van het veld te tonen of te verbergen.

Terwijl een formulierelement is geselecteerd, wordt in de selectie-indicator de naam van het element en een menu Staten weergeven dat u kunt openen in het regelpaneel (indien van toepassing). Met het menu in de selectie-indicator kunt u gemakkelijk de gewenste staat selecteren terwijl u formulierelementen bewerkt.

Wanneer een staat is geselecteerd, kunt u de vormgeving ervan aanpassen met het deelvenster Vullen of het regelpaneel.

Dit zijn de mogelijke staten die u kunt configureren voor formuliervelden:

• Leeg
• Niet leeg
• Rollover
• Focus
• Fout

De staten van een knop Verzenden worden weergegeven terwijl de knop Verzenden is geselecteerd.

U kunt de volgende staten voor de knop Verzenden configureren:

• Normaal
• Rollover
• Muisknop ingedrukt
• Tijdens verzending

U ziet dat de staten van een volledig formulier worden weergegeven wanneer het volledige formulier is geselecteerd:

• Normaal
• Tijdens verzending
• Verzenden voltooid
• Fout bij verzenden

Selecteer met de tool Selecteren het volledige formulier of het formulierelement dat u wilt bijwerken.

Als u bijvoorbeeld de tekst wilt wijzigen die in de knop Verzenden wordt weergegeven, kunt u direct dubbelklikken op de knop Verzenden van het formulier. U kunt de tekst in de knop Verzenden wijzigen door de Verzenden-tekst te selecteren met de tool Tekst. Verwijder de tekst en typ een nieuw woord. U kunt ook andere staten van de knop Verzenden selecteren met het menu in de selectie-indicator en de tekst voor andere staten wijzigen.

Als u het formulierelement hebt geselecteerd, kunt u de weergave van het element aanpassen.

U kunt bijvoorbeeld dubbelklikken en het veld Naam selecteren. Als u de tekstinvoer voor het veld Naam wilt selecteren, gebruikt u de opties in het regelpaneel of het deelvenster Vulling om de achtergrondkleur van het tekstveld in te stellen.

Met de opties in het deelvenster Vulling kunt u de vullingkleur instellen op een effen kleur of op een verloop. U kunt ook een achtergrondafbeelding instellen als de vulling en de opties voor Aanpassen en Positie instellen. Als u de transparantie van de vulling wilt aanpassen, wijzigt u de instelling Dekking.

Let op: Tenzij u de optie Samen bewerken uitschakelt (deze is standaard ingeschakeld), worden alle velden bijgewerkt wanneer u één veld bewerkt. Zo ontstaat een consequente vormgeving in uw formulier en bespaart u tijd. Maar u kunt altijd het volledige formulier selecteren, op de blauwe pijlknop klikken om het menu Opties te openen en Samen bewerken uitschakelen als u de velden liever afzonderlijk wilt opmaken.

Klik op de knop Publiceren en klik vervolgens op OK.

De gepubliceerde site wordt weergegeven in een browservenster.

Ga naar de pagina met het contactformulier en vul het formulier op de livesite in. Test wat er gebeurt wanneer u het formulier verzendt zonder inhoud in te voeren in de verplichte velden. Controleer hoe het formulier eruitziet en functioneert en let vooral goed op de manier waarop foutberichten worden weergegeven.

Als u hebt vastgesteld dat het formulier naar behoren functioneert en wordt weergegeven, probeert u het te verzenden met een testbericht. Ga naar uw e-mail en controleer of u het bericht hebt ontvangen.

Klik in de linkerzijbalk op de optie Gebruik webformulieren in de categorie Rapporten. In de grafiek die wordt weergegeven, ziet u de recente formulieractiviteiten met betrekking tot formulierverzendingen.

Met de rapporten in het dashboard kunt u veel informatie verkrijgen over de bezoekers van uw website. U kunt trends volgen om te zien wanneer de site de meeste bezoekers ontvangt en de prestaties van de aan uw site toegevoegde formulieren controleren.

Aan de hand van deze informatie kunt u bepalen wanneer u promoties uitvoert of de inhoud van uw site bijwerkt. De informatie helpt u ook te communiceren met bezoekers, omdat deze u zo berichten en feedback kunnen sturen. U kunt een dialoog aangaan met bezoekers in plaats van uitsluitend informatie weer te geven in eenzijdige communicatie op uw site.

Ga naar de pagina met lesbestanden voor Adobe Muse voor meer informatie over het maken van sites met Muse. Of ga naar de pagina Site van de dag voor voorbeelden van nieuwe webontwerpen die met Muse zijn gemaakt.

Selecteer in Adobe Muse de opties Venster > Widget-bibliotheek > Formulieren. Sleep een eenvoudig of gedetailleerd contactformulier om dit toe te voegen.

Ga naar het deelvenster Opties, open de vervolgkeuzelijst Captcha en selecteer reCAPTCHA v2.

U wordt aangeraden reCAPTCHA versie 2 te kiezen. Google ondersteunt reCAPTCHA versie 1 niet meer.

Het veld reCAPTCHA (afbeeldingsverificatie) is nu toegevoegd aan het formulier.

Configureer reCAPTCHA met de volgende opties:

• Openbare sleutel: wordt gebruikt in de JavaScript-code voor uw gebruikers. Zie Openbare sleutels en privésleutels genereren voor informatie over het genereren van reCAPTCHA-sleutels.
• Privésleutel: wordt gebruikt voor de communicatie tussen de server van uw website en de Google-server. Wij raden u ten zeerste aan de privésleutel veilig op te bergen en niet openbaar te maken. De privésleutel kan na verlies niet worden achterhaald bij Google. Zie Openbare sleutels en privésleutels genereren voor informatie over het genereren van reCAPTCHA-sleutels.
• Invoer vereisen: Geef op of reCAPTCHA vereist is. De optie is standaard geselecteerd en niet bewerkbaar.
• Thema: Geef op of u het lichte of donkere thema wilt kiezen voor het reCAPTCHA-vak.
• Type: Geef op of u afbeeldingsverificatie of het afspelen van audio wilt inschakelen voor de reCAPTCHA-verificatie. Door het afspelen van audio in te schakelen, stelt u blinde en slechtziende gebruikers in staat gemakkelijk door uw website te navigeren.
• Grootte: Geef op of de grootte van de reCAPTCHA normaal of compact moet zijn.
  
• Label: Schakel dit selectievakje in om een label voor het reCAPTCHA-veld weer te geven. U kunt dit veld gebruiken om een titel toe te voegen aan de reCAPTCHA-sectie van het formulier.
• Berichttekst: Schakel dit selectievakje in als u een bericht wilt weergeven.

Open de Google Admin Console in een browser. Klik in de Google Admin Console op Sign Up Now (Nu aanmelden) en meldt u aan bij uw Google-account of meldt u aan met de optie Create An Account (Account maken).

Nadat u zich hebt aangemeld, wordt u doorverwezen naar de Google reCAPTCHA-startpagina.

Klik op de kop Get reCAPTCHA (reCAPTCHA ophalen) boven aan de pagina.

Geef de domeinnaam van uw website op in het veld Domains (Domeinen). U hoeft niet de volledige URL van de website op te geven, maar alleen de domeinnaam. Bijvoorbeeld mysamplemusewebsite.com.

Klik op Register (Registreren) om een unieke openbare sleutel en privésleutel voor uw website te genereren.

U ziet de openbare sleutel (sitesleutel) en privésleutel (geheime sleutel) die zijn gegenereerd.

Kopieer de sitesleutel en de geheime sleutel naar respectievelijk de velden Openbare sleutel en Privésleutel in Adobe Muse.

Zorg ervoor dat u de sleutels volledig kopieert zonder ook maar één teken over te slaan.

Zodra u voor een domein één paar sleutels hebt verkregen, worden deze twee sleutels gedeeld door alle formulieren op die Adobe Muse-site. Als u er één wijzigt, veranderen ze allemaal en wordt er een nieuwe export gepland van alle pagina's en de bijbehorende .php-scripts. Als u een tool van derden gebruikt om FTP-bestanden naar de server te uploaden, moet u ervoor zorgen dat u alle .html- en .php-bestanden op de server kopieert (.php-bestanden bevinden zich in de map 'scripts/') en niet alleen de bestanden die zijn bijgewerkt.

Test de reCAPTCHA met een voorvertoning van de pagina in de browser of in Adobe Muse.