Webbläsaren som du använder stöds inte av denna webbplats. Alla versioner av Internet Explorer stöds inte längre, av oss eller Microsoft (läs mer här: * https://www.microsoft.com/en-us/microsoft-365/windows/end-of-ie-support).

Var god och använd en modern webbläsare för att ta del av denna webbplats, som t.ex. nyaste versioner av Edge, Chrome, Firefox eller Safari osv.

Skapa ett kontaktformulär

Av edina [dot] voloder [at] kommunikation [dot] lu [dot] se (Edina Voloder) - publicerad 28 juni 2023
Siffrorna ett, två och tre med pilar mellan. Grafik.

I den här guiden visar vi hur du i Drupal kan skapa ett enkelt kontaktformulär med filuppladdning. Vi går igenom hur du gör steg för steg och listar några tips och goda råd du kan ha med dig på vägen.

Steg 1: Skapa 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.
  4. Klicka på knappen "Save".

Steg 2: Komponenter

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.

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

  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. 

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.

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.

Steg 3: Bekräftelsemeddelande 

  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. 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.
     
  3. Klicka på knappen "Spara konfiguration".

Ditt meddelande är nu mottaget! Vi återkommer till dig så fort vi kan. 

Steg 4: E-postbekräftelse

  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. 

Steg 5: Skapa en formulärsida  

  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. 

Placera din formulärsida i menystrukturen

Din formulärsida kan du placera i menystrukturen genom att skapa en menylänk i huvudmenyn, genvägsmenyn eller sidfotsmenyn.

Meny- och navigationsstrukturer 

Steg för steg-guider

Länk till RSS
Fler nyheter om Drupalguider
Kategorier
Drupalguider
Sidansvarig: backa_elias [dot] bondpa [at] kommunikation [dot] lu [dot] se | 2023-08-17

Relaterade artiklar

Siffrorna ett, två och tre med pilar mellan. Grafik.
2023-06-27 | Nyheter

Skapa en informationssida

Informationssidor är sidor som innehåller information om ett specifikt område och innehåller ofta mer text än andra sidor. De bör också innehålla länkar till relaterat innehåll för...
Siffrorna ett, två och tre med pilar mellan. Grafik.
2023-06-27 | Nyheter

Skapa en orienteringssida

En orienteringssida är en sida som ger en översikt eller introduktion till en webbplats eller till delar av en webbplats. Den hjälper dina användare att navigera och förstå struktu...
Fler nyheter