Så här visar du ett flytande kontaktformulär i WordPress (3 metoder)

Många webbplatsägare tycker att det är svårt att ge enkel tillgång till kontaktalternativ utan att störa webbplatsens design. Flytande kontaktformulär erbjuder en lösning genom att låta användarna nå ut enkelt, oavsett var de befinner sig på din webbplats.

Vi har använt den här strategin på våra egna webbplatser för att samla in feedback från användarna och göra det enkelt för besökarna att kontakta oss. Lyckligtvis finns det gott om WordPress-plugins som kan hjälpa dig att göra samma sak på din webbplats.

I den här artikeln visar vi dig hur du visar ett flytande kontaktformulär i WordPress.

Vad är ett flytande kontaktformulär och varför använda det?

Ett flytande kontaktformulär stannar kvar på skärmen, till exempel i det nedre hörnet eller i sidopanelen, när besökare surfar på en webbplats. Det visas vanligtvis som en liten knapp eller ikon som expanderar till ett fullständigt formulär när man klickar på det eller håller muspekaren över det.

Här är några fördelar med att använda ett flytande kontaktformulär:

• Tillgänglighet. Eftersom formuläret flyter och förblir fast kan webbplatsbesökare komma åt det från vilken webbsida som helst när som helst.
• Minimalt intrång. Till skillnad från popup-fönster som kan störa användarupplevelsen är flytande formulär vanligtvis mindre störande samtidigt som de fortfarande märks.
• Uppmaning till handling. Ett flytande formulärs ständiga närvaro påminner användarna om att engagera sig, vilket bidrar till att öka konverteringen.

Som webbplatsägare kan du använda ett flytande kontaktformulär för kundsupport, försäljningsförfrågningar och insamling av feedback.

Genom att låta besökare få hjälp direkt när de surfar på din webbplats, ställa frågor utan att lämna sidan eller dela med sig av sina förslag när som helst, kan ett flytande kontaktformulär förbättra användarupplevelsen på din webbplats.

Med WordPress kan du visa ett flytande kontaktformulär på många olika sätt.

I följande avsnitt kommer vi att berätta om tre enkla sätt att visa ett flytande kontaktformulär på en WordPress-webbplats. Använd bara snabblänkarna nedan för att välja den metod du vill använda:

Låt oss komma igång!

Metod 1: Skapa ett flytande kontaktformulär i WordPress med hjälp av UserFeedback

Om du vill skapa ett enkelt flytande kontaktformulär med enkla anpassningsmöjligheter är den här metoden något för dig.

UserFeedback är ett WordPress-plugin som kan hjälpa dig att skapa anpassningsbara feedbackformulär, flytande kontaktformulär och popup-enkäter. Detta plugin kommer med inbyggda mallar och frågor, inklusive för webbplatsupplevelse och e-handelsbutikens undersökningsformulär.

Vi använder UserFeedback på våra egna webbplatser, och du kan lära dig mer i vår fullständiga UserFeedback-recension.

Genom att använda UserFeedback kan du förbättra din webbplats baserat på faktiska användares synpunkter, öka kundnöjdheten och snabbt ta itu med eventuella problem.

Först måste du installera och aktivera pluginet UserFeedback. Om du inte vet hur man installerar ett plugin kan du följa vår guide om hur man installerar ett WordPress-plugin.

När du har aktiverat UserFeedback på din webbplats kan du börja skapa ditt första undersökningsformulär. Från din WordPress-instrumentpanel navigerar du till UserFeedback ” Undersökningar ” Skapa nytt.

När du har gjort detta kommer du till avsnittet ”Setup”.

Med UserFeedback kan du börja med en tom sida med alternativet ”Start from Scratch” eller använda en färdig mall. I den här guiden kommer vi att använda mallen ”Website Feedback”.

För att välja mall klickar du bara på den.

Låt oss sedan redigera texten. I det här exemplet ändrar vi etiketten ”Website Feedback” till ”Do you have any feedback?”.

Sedan kanske du vill klicka på rullgardinsmenyn ”Frågetyp” för att välja hur besökarna kan svara på den här frågan. I det här exemplet väljer vi ”Enkelt textfält”.

Efter det kan du ändra frågan till ”Namn”.

Nu behöver du ytterligare ett frågefält för användarens e-postadress.

Du kan scrolla ner en bit och klicka på knappen ”Lägg till fråga”. När du har gjort det går du vidare och ställer in din frågetyp och titel som du gjorde i föregående steg.

Nästa steg är att konfigurera formulärets inställningar.

På fliken ”Inställningar” kan du aktivera spårning för dina formulärvisningar och svar med hjälp av Google Analytics och MonsterInsights. Växla helt enkelt på ”Aktivera Google Analytics-spårning” för att använda funktionen.

Om du vill lära dig mer om hur du använder Google Analytics för spårning kan du läsa vår guide om hur du ställer in Google Analytics-mål för din WordPress-webbplats.

Därefter kanske du vill skrolla ner på fliken för att konfigurera inriktning och beteende.

I avsnittet ”Inriktning” kan du välja enhetstyp och den webbsida som ska visa ditt undersökningsformulär.

Alternativen för enhetstyp omfattar skrivbord, surfplatta och mobil. Om du vill att formuläret ska visas på alla dessa enheter kan du välja alla tre.

Sedan kan du välja alla sidor som du vill visa det flytande formuläret på. Vi rekommenderar att du väljer alternativet ”Alla sidor” så att besökarna kan komma åt ditt formulär var som helst på din webbplats.

När det är gjort, låt oss rulla ner och konfigurera formulärets beteende. Här kommer du att ställa in:

• Tidpunkt för visning. Välj när ditt formulär ska visas på dina sidor.
• Visningslängd. Ange hur ofta ditt formulär ska visas för besökare.
• Undersökningens körtid. Ange hur länge ditt formulär ska visas på de angivna sidorna.

Nu är du redo att gå vidare till nästa steg.

På fliken ”Notifications” anger du den e-postadress som ska ta emot meddelanden om formulärinlämning. Du kan lägga till flera mottagare, men då måste du se till att skilja dem åt med ett kommatecken.

Slutligen kanske du vill ägna lite tid åt att kontrollera formuläret en sista gång innan du slutför det.

På den övre delen av fliken ”Publicera” ser du ”Sammanfattning av webbplatsens feedback”. Du kan gå igenom punktsatserna en efter en för att se om konfigurationerna av ditt formulär är korrekta.

Om allt ser bra ut kan du bläddra ner till avsnittet ”Publicera”.

Där kan du ändra status från ”Draft” till ”Publish”. Alternativt kan du schemalägga en lansering genom att klicka på alternativet ”Schemalägg för senare” och ange datum och tid.

När du är klar klickar du bara på ”Save and Publish” för att visa ditt formulär.

Och så var det klart! Du har lyckats visa ett flytande kontaktformulär på din WordPress-webbplats med hjälp av UserFeedback.

Metod 2: Skapa ett flytande kontaktformulär i WordPress med hjälp av WPForms och OptinMonster

Om du vill ha mer designkontroll över ditt flytande kontaktformulär är det här metoden för dig. Vi kommer att använda WPForms för att skapa formuläret och OptinMonster för att få det att flyta på din WordPress-webbplats.

WPForms är ett användarvänligt tillägg för att bygga WordPress-formulär med drag-and-drop. Med över 2000 tillgängliga mallar kan du snabbt skapa ett formulär med bara några klick.

För att lära dig mer kan du se vår fullständiga WPForms-recension.

För att skapa formulär med WPForms måste du först installera och aktivera pluginet på din webbplats. Om du behöver ytterligare hjälp kan du läsa vår guide om hur du installerar ett WordPress-plugin.

Efter aktivering kan du navigera till WPForms ” Lägg till nytt från din WordPress instrumentpanel.

Du kommer då att omdirigeras till formulärbyggarens gränssnitt.

Där behöver du bara skriva in formulärnamnet och välja en mall. I det här exemplet skapar vi ett kontaktformulär och döper det till ”Kontaktformulär”.

När du har namngett formuläret kan du bläddra nedåt i panelen för att välja en mall.

I det här exemplet kommer vi att använda alternativet ”Enkelt kontaktformulär”. För att börja bygga, håll bara muspekaren över det och klicka på ”Använd mall”.

Du kommer då att omdirigeras till formulärbyggarens panel ”Fält”.

Härifrån kanske du vill granska ditt kontaktformulär och justera det förgjorda innehållet. Om allt ser bra ut redan nu kan du gå vidare och klicka på knappen ”Spara”.

För detaljerade instruktioner, se gärna vår steg-för-steg-guide om hur du skapar ett kontaktformulär.

När du är klar med att skapa ditt formulär är det dags att justera inställningarna så att det visas som ett flytande formulär.

För detta måste du installera OptinMonster och ansluta din WordPress-webbplats till plugin-programmet.

OptinMonster är ett kraftfullt plugin för leadgenerering och popup. Det kan hjälpa dig att skapa och hantera kampanjer för att konvertera besökare till prenumeranter och betalande kunder.

Du kan kolla in vår detaljerade guide om hur du bygger en e-postlista med OptinMonster.

Efter aktivering kan du klicka på menyalternativet ”OptinMonster” från din WordPress instrumentpanel.

Du kommer då att se välkomstskärmen, där du kan klicka på ”Anslut ditt befintliga konto” för att komma igång med insticksprogrammet.

Ett nytt fönster öppnas och här kan du klicka på ”Anslut till WordPress”.

OptinMonster kommer sedan att be om dina kontouppgifter för att slutföra processen.

När du har verifierat dig är du redo att skapa din första kampanj.

För att komma igång navigerar du helt enkelt till OptinMonster ” Kampanjer från din WordPress instrumentpanel.

När du har kommit till ”Campaigns” är du redo att skapa och konfigurera ditt flytande formulär.

För att komma igång klickar du bara på knappen ”Skapa din första kampanj”.

Nu är det dags att välja en kampanjtyp.

OptinMonster har olika kampanjtyper, inklusive en flytande stapel. Även om det kanske låter som den perfekta kampanjtypen har en flytande stapel begränsat utrymme. Så du vill använda den för andra fall som att meddela försäljningskampanjer eller dela kupongkoder.

Om du vill lära dig mer om hur du använder ett flytande fält rekommenderar vi att du läser vår guide om hur du skapar ett flytande sidfotsfält i WordPress.

För att hålla din design snygg kan du välja ”Slide-in” som kampanjtyp för att lägga till ditt WPForms-kontaktformulär.

En flytande slide-in stannar i det nedre högra hörnet av användarens skärm. Så det kan hjälpa till att hålla ditt innehåll läsbart, webbdesignen organiserad och användarupplevelsen bra.

Du kan helt enkelt klicka på kampanjtypen för att använda den.

Sedan bläddrar vi ner i panelen och väljer en mall.

För att använda en mall håller du bara muspekaren över mallblocket och klickar på ”Använd mall”. Här väljer vi ”Prenumerera på nyhetsbrev (Light)”.

När du har valt kampanjtyp och mall kommer ett popup-fönster att visas.

Du behöver bara ge din kampanj ett namn. I det här exemplet kallar vi vår kampanj för ”Flytande kontaktformulär”.

När du har bestämt dig för namnet kan du klicka på ”Starta byggandet”.

OptinMonster kommer sedan att omdirigera dig till kampanjbyggaren.

Gränssnittet för att skapa en kampanj består av två delar. Den vänstra sidan innehåller alla funktioner som du kan lägga till i din kampanj, och den högra sidan är förhandsgranskningen i realtid.

Mer information finns i vår handledning om hur du lägger till ett kontaktformulär med utdragbar bild i WordPress.

För att lägga till ditt WPForms-kontaktformulär kan du bläddra ner i den vänstra panelen för att hitta WPForms-blocket.

När du har hittat det drar och släpper du WPForms-blocket till förhandsgranskningen i den högra panelen.

Då ser du en rullgardinsmeny för ”Formulärval”. Du kan klicka på den och sedan välja ”Kontaktformulär”. Blocket i förhandsgranskningen kommer sedan att ladda formulärets kortkod.

Efter det kanske du vill flytta till fliken ”Displayregler”. Det är på den här fliken du kan ställa in tidpunkter och sidor för visning av det flytande kontaktformuläret.

För att säkerställa att formuläret flyter och förblir fixerat från första sekunden rekommenderar vi att du ställer in de två första rullgardinsmenyerna som ”tid på sidan” och ”är omedelbar”.

Om du sedan vill visa formuläret på alla sidor kan du ställa in följande rullgardinsmenyer som ”aktuell URL-sökväg” och ”valfri sida”.

När du är klar kan du gå till fliken ”Publicera”.

På den här fliken är det första du måste göra att ändra kampanjens publiceringsstatus till ”Publicera” eller ”Schemalägga”.

Nästa steg är att använda funktionen ”Live Site Inspector” för att testa hur din kampanj ser ut på din webbsida. För att göra detta skriver du helt enkelt in webbadressen till din webbplats i textrutan och klickar på ”Test”.

Detta kommer att omdirigera dig till en ny flik.

Om allt ser ut som du vill kan du gå tillbaka till OptinMonster-kampanjbyggaren och spara din kampanj.

Där har du det! Du har lyckats skapa ett flytande kontaktformulär med hjälp av WPForms och OptinMonster.

Metod 3: Skapa ett flytande kontaktformulär i WordPress med hjälp av ett gratis plugin för flytande formulär

Vår sista metod gör att du kan visa en flytande ikon som omdirigerar till din kontaktformulärssida. Detta tillvägagångssätt är något annorlunda, men det kan vara effektivt.

Flera gratisplugins gör att du kan lägga till flytande kontaktikoner på din WordPress-webbplats. Några populära alternativ inkluderar Simple Floating Menu och Float Menu. Dessa plugins kräver vanligtvis att du bäddar in en URL i deras inställningar.

I den här handledningen visar vi hur du gör detta med hjälp av Simple Floating Menu. Om du behöver hjälp med att installera tillägget kan du läsa vår guide om hur du installerar ett WordPress-tillägg.

Innan vi går in i inställningsområdet för Simple Floating Menu-pluginet, låt oss kopiera sidans URL där du visar ditt kontaktformulär.

För att göra detta, navigera till sidan i fråga och kopiera URL:en från URL-fältet.

Nu kan du öppna Simple Floating Menu från din WordPress-panel.

När du väl är i pluginets inställningsområde vill du aktivera den flytande formulärikonen. Du kan göra detta genom att slå på reglaget ”Aktivera flytande meny”. Den kommer då att gå från grå till grön eller från av till på.

Gå sedan vidare och leta upp fältet ”Button URL” för att klistra in webbadressen.

När du har angett knappens URL bör du se ett meddelande om att dina inställningar har sparats.

Vid det här laget bör din flytande ikon vara live på din WordPress-webbplats. Du kan dock anpassa knappens position och utseende ytterligare.

Ovanför fältet ”Button URL” kan du ändra standardikonen till något mer relevant. Detta plugin erbjuder dussintals ikonalternativ, så om du någonsin känner dig fast är det en bra idé att använda filterfunktionen.

”Tool Tip Text” visas när webbplatsbesökare håller muspekaren över den flytande ikonen. Vi rekommenderar att du fyller i det här fältet för att ge besökarna sammanhang om vad ikonen kommer att leda dem till.

Om du sedan vill omdirigera besökare till en ny sida efter att ha klickat på ikonen, markerar du bara kryssrutan i fältet ”Öppna i ny flik”.

Du kan redigera den flytande ikonens färger genom att scrolla nedåt på skärmen. Var gärna kreativ med bakgrunds-, ikon- och hover-effektfärgerna så länge de matchar ditt varumärke eller webbplatsens personlighet.

När du är klar klickar du på ”Spara inställningar”.

Därefter kan du gå till fliken ”Inställningar” för fler anpassningsfunktioner.

På den här fliken kan du välja var formuläret ska visas på webbplatsen, t.ex. längst upp till vänster, i mitten till höger eller längst ner till höger.

Det finns också inställningar för knapporientering. Du kan välja vertikal eller horisontell. Du kanske också vill ändra knappens stil. Standardformen är en rektangel, men du kan välja rund, triangel eller till och med en stjärna.

Du kan hitta fler anpassningsinställningar längre ner på panelen.

Justera helt enkelt storleken på din flytande ikon, skuggstilar, typografi och mycket mer för att göra den mer unik.

När du har gjort det är det bara att spara så att du inte förlorar dina framsteg.

Nu kan du gå vidare och se hur den flytande ikonen ser ut på din webbplats.

Så här ser vår flytande ikon ut för din referens:

Alternativ: Använd en chatbot på din webbplats

Ett flytande kontaktformulär är ett bra sätt att låta besökare nå dig. Men om du vill ge omedelbara svar till dina användare kan det vara värt att installera en chatbot istället.

En chatbot kan vara AI-driven eller hanteras direkt av ditt supportteam. Ett verktyg som Chatbot kan till exempel hämta information från din webbplats och ditt hjälpcenter för att ge AI-drivna svar omedelbart till dina besökare.

För mer information om hur du ställer in detta kan du se vår handledning om hur du lägger till en chatbot i WordPress.

Vi hoppas att den här guiden har hjälpt dig att skapa och visa ett flytande WordPress-kontaktformulär. Därefter kanske du vill kolla in vår guide om hur du skapar mer interaktiva formulär i WordPress och vårt expertval av de bästa kontaktformulärpluginsen för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.