Skapa webbformulär - ett enkelt kontaktformulär
Den här guiden visar ett exempel på hur man utformar ett enkelt kontaktformulär med filuppladdning.
Innan du skapar ditt första formulär bör du läsa om grunderna på sidan om webbformulär. Läs också mer om tillgänglighet i webbformulär på Medarbetarwebben.
Information om grunderna för webbformulär
Tillgänglighet i webbformulär (på Medarbetarwebben)
Genvägar till sidans innehåll:
- Skapa webbformuläret
- Lägg in webbformulärets komponenter
- Färdigt webbformulär med komponenter
- Meddelande vid inskickat formulär
- E-post vid inskickat formulär
- Formulärsida
- Formulär och behörigheter
- Exempel
Skapa webbformuläret
I detta exempel ska vi skapa ett enkelt kontaktformulär genom att lägga in ett textfält, en textruta, ett fält för e-post och möjligheten att ladda upp en fil.
När formuläret skickas in ska resultatet också skickas till min e-postadress.
Först måste vi skapa själva formuläret.
1. I menyn "Content", välj "Webform" och klicka på "Add webform".
2. Ange webbformulärets rubrik i textfältet "Title".
3. I textfältet "Administrative description", skriv om du vill ha en text som internt beskriver webbformuläret och på vilket sätt det är tänkt att användas.
Lägg in webbformulärets komponenter
När webbformuläret är skapat är det dags att börja lägga in de komponenter formuläret ska använda sig av. Det finns också möjlighet att dela upp formuläret i flera olika sidor, men det går vi inte igenom här.
1. Klicka på knappen "Add element".
2. En lista med möjliga komponenter visas. Det vanligaste elementet är Text field för inmatning av text, men använd gärna de mer specialiserade elementen längre ner för exempelvis e-post eller url:er för att få hjälp av Drupal med att rätta användaren om det inte är det som önskas som skrivs in.
Observera också att det förutom elementet Checkbox högt upp i listan finns ett element benämnt Checkboxes. Det senare används om man vill gruppera flera olika kryssrutor som hör samman, medan det förra passar mer för enstaka kryssrutor av typen "Jag godkänner att mina personeruppgifter behandlas ...".
3. För att skapa en ny komponent, klicka på Add element intill den typ du vill lägga till, och fyll i uppgifterna.
4. Webbformulär som behandlar personuppgifter: lägg till elementet Personal Data Information. Den genererade texten översätts automatiskt och visas sen på svenska eller engelska beroende på webbplatsens språkinställning.
Komponent: Textfält
I exemplet ska vi börja med att skapa ett textfält där besökaren kan skriva in sitt för- och efternamn.
1. På raden för typen "Text field", klicka på "Add element".
2. I fältet Title, skriv "För- och efternamn".
Observera att det finns oerhört mycket inställningar som går att göra för en enda formulärkomponent. Om du vill testa något, ändra då en sak åt gången och kolla vad det får för konsekvenser. Ställ tillbaka inställningar som inte verkade ha någon effekt eller som du inte förstod.
3. Öppna inställningarna för "Element description/help/more" genom att klicka på den lilla vinkeln till vänster om frasen.
4. I textfältet "Description" skriver du en kortfattad text som hjälper besökaren att använda komponenten, till exempel "Skriv ditt för- och efternamn". Tänk på att alltid använda dig av element description när du kan underlätta för besökaren att förstå hur komponenten skall användas och vad det är för information du efterfrågar. Om det redan i titeln är tydligt hur besökaren ska göra så behöver du inte skriva någonting i beskrivningen, då det snarare kan förvirra eller upplevas upprepande.
5. Öppna inställningarna för "Form display" genom att klicka på den lilla vinkeln till vänster om frasen. Ändra inställningen under "Autocomplete" från "On" till "Autofill...". Under inställningen "Autocomplete autofill" väljer du "Full name". Detta är för att inmatningsfältet ska ge användaren förslag på både för- och efternamn i detta fall, så att detta kan fyllas i automatiskt. Tänk på att om ditt fält t.ex. endast efterfrågar efternamn, så väljer du istället "Family name" och så vidare.
6. Öppna inställningarna för "Form validation" genom att klicka på den lilla vinkeln till vänster om frasen.
7. Bocka i rutan "Required".
8. Skrolla ner och klicka på "Save + Add element" för att spara och fortsätta med nästa komponent.
Nu valde vi att gå vidare med nästa komponent, men utgråat på sidan bakom rutan "Select an element" går det att se att det nya elementet lagts till i en lista över formulärets komponenter.
Komponent: E-post
Nästa steg är att lägga in ett fält för e-post.
1. På raden för typen "Email", klicka på "Add element".
2. Skriv ”E-post” i textfältet ”Title”.
3. Öppna inställningarna för "Element description/help/more" genom att klicka på den lilla vinkeln till vänster om frasen.
4. I textfältet "Description" skriver du en kortfattad text som hjälper besökaren att använda komponenten, till exempel "Ange din E-postadress".
5. Öppna inställningarna för "Form validation" genom att klicka på den lilla vinkeln till vänster om frasen.
6. Bocka i rutan "Required".
7. Skrolla ner och klicka på "Save + Add element" för att spara och fortsätta med nästa komponent.
Komponent: Fil
Vi vill att användaren ska kunna bifoga ett dokument till kontaktformuläret. För det fallet att du önskar att användaren ska kunna bifoga en bild eller en generell fil gör du på motsvarande sätt, men väljer i stället "Image file" respektive "File" i nästa punkt.
1. Skrolla ganska långt ner i listan. På raden för typen "Document file", klicka på "Add element".
2. Skriv ”Skicka med en fil” i textfältet ”Title”.
3. Öppna inställningarna för "Element description/help/more" genom att klicka på den lilla vinkeln till vänster om frasen.
4. I textfältet "Beskrivning, skriv en text om hur filuppladdningen skall användas, till exempel: "Följande filtyper kan användas: doc, docx, pdf.
5. Ändra i textfältet "Allowed file extensions" strax ovanför så att det stämmer överens med instruktionerna till användaren.
6. Skrolla ner och klicka på "Save + Add element" för att spara och fortsätta med nästa komponent.
Komponent: Textruta
Komponenten "Textarea" är ett större textfält.
1. På raden för typen "Textarea", klicka på "Add element".
2. I fältet Title, skriv "Meddelande".
3. Öppna inställningarna för "Form validation" genom att klicka på den lilla vinkeln till vänster om frasen.
4. Bocka i rutan "Required".
5. Skrolla ner och klicka på "Save" för att spara.
Det finns många komponenter att botanisera bland för den nyfikne. En som kan vara bra att känna till ifall det skulle behövas text "mitt i" formuläret är den som heter "Basic HTML" under rubriken "Markup elements". Men är det text som innehållsmässigt hör till ett visst element är det bättre att lägga till den informationen i det elementet. Under "Containers" finns också en rad olika element som kan användas för att gruppera andra element, och i så fall finns möjligheten att lägga en Description på den containern.
Färdigt webbformulär med komponenter
Ett färdigt webbformulär med komponenter kan se ut enligt följande.
Meddelande vid inskickat formulär
Du kan skapa ett specialanpassat meddelande som presenteras vid inskickat formulär, till exempel: "Ditt meddelande är nu mottaget! Vi återkommer till dig så fort vi kan."
Om du också låter Drupal skicka ut ett bekräftelsemejl – ange då gärna här att det mejlet kan dröja upp till en halvtimme. Då undviker du att användaren blir frustrerad och skickar in formuläret flera gånger.
1. Klicka på fliken "Settings", och därefter underkategorin "Confirmation".
Det finns en mängd olika sätt att visa bekräftelsemeddelandet, men det som är valt från början fungerar bra för de flesta behov.
2. Skrolla ner till Confirmation settings och klicka eventuellt upp den delen med den lilla vinkeln så att rutorna "Confirmation title" och "Confirmation message" syns. Ange där en rubrik och ett meddelande som visas för besökaren vid inskickat formulär.
3. Klicka på knappen "Spara konfiguration".
E-post vid inskickat formulär
Ett vanligt önskemål är att den som skickar in formuläret ska få en bekräftelse via e-post, och att någon person som exempelvis tar emot anmälningarna till en konferens ska få bekräftelse via e-post då någon har skickat in formuläret.
1. För att komma åt de inställningarna i formuläret, klicka på Settings och därefter på Emails/Handlers.
2. Klicka på "Add email" för att lägga till ett brev som ska skickas från Drupal. Du kan välja att lägga till flera utskick senare.
3. Fyll i en titel under Title. Detta är något du döper detta utskick till internt i Drupal – hur själva mejlet ska utformas återkommer vi till.
4. Under To Email är två val relevanta: Välj "Custom To Email address" om du själv manuellt vill uppge en e-postadress, till exempel till administratören på din institution. Om du vill att mejlet ska gå till någon e-postadress som fyllts i i formuläret, till exempel adressen till den som fyllt i formuläret, så hittar du fälten under rubriken "Elements" i listan.
Observera att du inte kan ändra avsändaradress i rutan "From Email" – då kommer formuläret inte att fungera. Drupalmiljön har en godkänd avsändaradress hos universitetets e-postgrupp och det är den som måste användas för att e-postservern ska säga ja då din Drupalsajt hör av sig och vill skicka mejl. Det är bra om det någonstans i din bekräftelse framgår att det inte går att svara på mejlet, och att det finns andra kontaktuppgifter som faktiskt fungerar. Du kan ändra texten i "From Name" om du vill.
5. Under "Message" skapar du ditt meddelande. Det som är förvalt där fungerar ofta till interna bekräftelser men behöver kanske lite mer kärlek till bekräftelser som ska skickas externt. Som framgår av det som redan står i rutan så är det variabelvärdena inom hakparenteser som kan användas för att ta med i mejlet sådant som matats in i formuläret. Listan man får upp då man klickar på "Browse available tokens" är omfattande, och ett tips är att du i stället utgår från det som redan står där, och lägger energin på formuleringarna i stället.
6. Klicka på Save då du är klar med mejlet. Skapa flera utskick om det behövs.
Formulärsida
Webbformulär är den rent tekniska biten av formuläret. Den mer presentationsmässiga och redaktionella biten sköter du med hjälp av en formulärsida, en Webform Page.
Man kan tänka att man "stoppar in" sin Webform i en Webform Page. Din Webform Page kan du sedan stoppa in i menystrukturen, ge en rubrik, ingress etcetera.
1. Formulärsidan skapar du genom att i administrationsmenyn välja Content > Add content > Webform page.
2. Skriv in titel och brödtext på vanligt sätt.
3. Välj aktuellt webbformulär under rullisten "Webform".
4. Under Webform settings väljer du om formulärsidan ska vara öppen, stängd eller schemalagd.
5. Lägg in eventuella infoboxar samt sidansvarig.
6. Klicka på Save för att spara.
Din formulärsida grupperar sedan de formulärinskick som skickats in inom ramen för just den formulärsidan.
Exempel: Du har en Webform för konferensanmälan. Du har en Webform Page för konferensen under vårterminen och en annan Webform Page för konferensen under höstterminen. Förutsatt att du har din Webform för konferensanmälan öppen, så kan du ha din Webform Page för höstterminen öppen och den för vårterminen stängd, eller vice versa. Om du går in på din Webform för konferensanmälan så ser du alla resultat som någonsin skickats in. Om du i stället tittar på resultaten via någon av dina Webform Pages så ser du bara resultaten för våren respektive hösten.
Din formulärsida kan du sedan lägga in i menyn genom att skapa en menylänk under Menus > Main menu.
Formulär och behörigheter
Det finns två saker att tänka på då det gäller behörigheter till webbformulär i Drupal. Behörigheterna kommer man åt under Settings > Access.
Det första handlar om vem som ska få skicka in formulär. I vårt fall med Drupal på Lunds universitet är det ju i princip bara webbredaktörer och andra innehållsansvariga som har möjlighet att logga in på webbplatsen. För att fylla i ett webbformulär ska man i normalfallet aldrig vara tvungen att vara inloggad. Det är också förinställningen: Under "Create Submissions" är det ikryssat att "Anonymous user" ska ha den behörigheten.
Det andra handlar om vem som ska ha möjlighet att redigera webbformuläret och att ta del av vad som skickats in. Det kan en webbplatsadministratör hantera på två olika sätt. Drupal har en behörighet "Webform editor" som ger en generell behörighet att jobba med webbformulär på webbplatsen. Den kan du sätta på en användare, och på det viset ge den användaren tillgång till alla webbformulär på webbplatsen, med hjälp av de vanliga användarinställningarna.
Ytterligare ett alternativ till detta är att skrolla ner i listan över behörigheter fram till "Administer webform & submissions". Den inställningen gäller just det här webbformuläret. Kryssa inte i någon av rutorna under "Roles". (Kryssar du till exempel i "Personel" så säger du att alla användare med den behörigheten på webbplatsen ska ha rätt att "Administer webform & submissions". Men det är inte det du menar.) Under "Users" söker du med hjälp av Lucat-id upp den enskilda användare som ska ha behörighet till det här formuläret. (Du måste dessförinnan ha skapat den användaren på din webbplats på det vanliga sättet.)
Exempel
Support
Vid frågor vänligen kontakta Servicedesk.
E-post: servicedesk [at] lu [dot] se
Ange alltid webbplatsens eller sidans URL för vilken ärendet gäller.
Känsliga personuppgifter
Tänk på att inte använda formulär i Drupal om du arbetar med känslig eller sekretessbelagd data.
Drabbas ditt webbformulär av spam?
Om ditt webbformulär är drabbat av spam kan vi lägga till reCAPTCHA på formuläret. Kontakta Servicedesk (servicedesk [at] lu [dot] se) så hjälper vi dig!