Avancerade formulär i Divi

2 februari, 2019 | Plugins

Divi standard formulär är rätt simpelt och det finns inte så många möjligheter att tänka utanför boxen.
För dig som enbart ska ta emot namn och e-post duger den gott och väl.

Du som har lite mer behov än så och behöver avancerade formulär får leta i tilläggskatalogen.

T ex kanske man vill ha koll på alla meddelanden som skickats för att se så de inte hamnat i någon spammapp, ha fler fälttyper eller helt enkelt kunna anpassa formuläret bättre.

Vanliga tillägg

De vanligaste formulärtilläggen i WordPress tilläggskatalog är nog Gravity Forms och Contact Form 7
Gravity Forms har gott om möjligheter att integrera med ex MailChimp, Paypal och Slack. Framför allt kan du koppla ihop den med den populära tjänsten Zapier och göra ”allt möjligt”.
Gravity Forms erbjuder över 30 olika fälttyper och avanccerad logik i sina formulär och är ett riktigt bra plugin för WordPress. Nackdelen är att det inte är gratis, kostar från 59$ per år. Men det är en liten summa om man har behovet.

Contact Form 7

Jag tänkte vi kunde titta på ett annat formulärtillägg som heter Contact Form 7 och är gratis istället.
Vill du också testa så ladda ner och installera tillägget här. Aktivera det sedan och ett menyalternativ som heter Kontakt skapas i WP-menyn.

Skapa nytt

Klicka på skapa nytt för att komma igång. Då kommer du till denna flik, formulär där vi startar.

Avancerade formulär i Divi 1

Avancerade formulär i Divi 2

Ett standardformulär skapas och du kan redigera titlarna så det passar ditt behov (efter label).
Vill du lägga till fler fält välj vilken typ det gäller, ex telefon, URL, rullgardinsmeny och en liten ruta dyker upp där du kan konfigurera som du vill. Vi väljer t ex en rullgardinsmeny och får döpa fältet till ett unikt namn, ex menu, välja om det ska vara obligatoriskt och fylla i alternativvärden. Klicka sedan på infoga tagg för att komplettera ditt nyss påbörjade formulär.

Avancerade formulär i Divi 3

Om fälten inte ligger i den ordning du vill ha dem får du klippa och klistra i koden. Contact Form 7 har tyvärr ingen ”drag-n-drop” builder som standard.

E-postnotifieringar

Klicka sedan på fliken epost för att ställa in notifieringar. Här anger du:

Till: din adress
Från: det mottagaren ser
Ämne: E-postämne
Meddelande: Fylls i per automatik men har du lagt till fält, ex menu måste du själv skriva in den taggen, du ser hur du ska ange den under rubriken, i detta fall [menu]..
Vill du även att avsändaren ska få e kopia på sitt meddelande använder du Epost (2) också.
Spara sedan formuläret.

Avancerade formulär i Divi 4 Åter till WP menyn och Kontakt under kontaktformulär hittar du ditt sparade formulär. Här kan du ocksp hitta koden du ska använda i ditt text-block på sidan. Nu är det bara att kopiera den och klistra in och sedan testa att allt blev som du tänkt dig.

Avancerade formulär i Divi 5

Ytterligare anpassning

Formuläret från Contact Form 7 kan behöva lite CSS-anpassning för att passa in i ditt formulär. Sök på CSS Contact Form 7 Divi så hittar du inpiration, t ex på Elegant Themes blog

Contact Form 7 har sedan i sin tur flera olika tillägg man kan installera för bättre funktionalitet. T ex Flamingo för att spara alla meddelanden, Contact Form 7 Conditional Fields för avancerad logik och massa andra trejepartstillägg. Det är bara att testa sig fram!

Om sidan

Om sidan

Divi.se ägs och drivs av Henrik Rossini som driver webbyrån Joolo Webbdesign.
Sidan visar svensk information samt tips & trix för premium-temat Divi för WordPress. Divi.se har inga kopplingar till temats leverantör Elegant Themes. Divi samt Elegant Themes är registrerade varumärken som tillhör Elegant Themes, Inc.

Vissa länkar på denna webbplats är sk ”affiliate länkar” vilket innebär att om du klickar på länken och köper en produkt på de sidan så kommer jag att erhålla en viss ersättning.

Söker du hjälp med Divi så kontakta mig via min webbyrå Joolo Webbdesign

Läs även

Inga resultat hittades

Sidan du begärde kunde inte hittas. Försök förfina din sökning eller använd navigeringen ovan för att lokalisera inlägget.