Så jobbar du med webbformulär

– enkel variant med filuppladdning

Drupal ger stora möjligheter att skapa webbformulär, till exempel för dig som arrangerar en konferens eller vill låta dina besökare enkelt komma i kontakt med er verksamhet.

Möjligheterna är stora när det gäller att skapa formulär i Drupal, men verktyget är stort och det kan lätt bli ett komplext arbete. Den här guiden visar ett exempel på hur man utformar ett enkelt kontaktformulär.

Utforska gärna verktyget på egen hand. Ett webbformulär kan innehålla många komponenter och variationer. Prova gärna själv att skapa ett testformulär med Drupals alla komponenter för att lära dig mer om hur de fungerar. Skicka resultatet i webbformuläret till dig själv och testa att använda olika kombinationer för att se hur resultatet blir.

Webbformulär och formulärsidor

En nyhet i Drupal 8 är möjligheten att återanvända webbformulär ("Webform") genom att lägga in dem i formulärsidor ("Webform Page"). Om er verksamhet har en konferens som återkommer höst och vår så skapar du ett formulär med alla komponenter och själva funktionaliteten för sig, och därefter lägger du in det i en formulärsida med rubrik och ingress som kan anpassas till omständigheterna.

Webbformulär saknar sådana mer redaktionella finesser som rubrik och möjlighet att lägga in i informationsstrukturen (menyn). De anpassningarna gör du i stället via formulärsidan.

Ett enkelt kontaktformulär

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.

Ett enkelt kontaktformulär med filuppladdning

Skapa webbformuläret

Först måste vi skapa själva formuläret.

1. I menyn "Content", välj "Webform" och klicka på "Add webform".

Välj Content > Webform > Add webform i menyn för att skapa ett webbformulär

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.

4. Klicka på knappen "Save".

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".

Klicka på Add element för att lägga till formulärkomponenter

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. 

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".

Gör inställningar för en vanlig textkomponent

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.

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.

Se till att instruktionerna till användaren stämmer överens med tillåtna filtyper

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.

Bild som visar listan över komponenterna i ett webbformulär

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". 

Bekräftelsemeddelandet ställer man in under Settings > 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. 

Skriv in bekräftelsemeddelande och rubrik

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. 

Välj mellan att manuellt ange en e-postadress eller att ta en som matats in i formuläret

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 etc. 

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". 

Välj in rätt Webform i din Webform Page

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å sajten. 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å sajten. 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.

Lägg till den användare som ska hantera webbformuläret

Ett nytt 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å sajten 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 sajt på det vanliga sättet.)

Support

Vid frågor, vänligen kontakta servicedesk [at] lu [dot] se

Ange alltid webbplatsens eller sidans URL som ärendet gäller.

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 [at] lu [dot] se så hjälper vi dig!