Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

Show a floating contact form in WordPress in post image

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.

userfeedback-homepage

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.

UserFeedback's Add New button

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.

UserFeedback's Website Feedback template

Anteckningar: Medan UserFeedback Free Version är tillgänglig kan du uppgradera till deras premiumversion för att låsa upp fler mallar, få tillgång till fler frågetyper, aktivera inriktnings- och beteendeinställningar och mer. I den här handledningen kommer vi att använda UserFeedback Pro.

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

Configuring UserFeedback's questions

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.

The new question on UserFeedback's contact form

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.

Enable Google Analytics tracking on UserFeedback

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.

The Targeting section in UserFeedback's Settings tab

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.
The Behavior settings for a UserFeedback form

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.

The email recipient field in UserFeedback's Notifications tab

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.

UserFeedback's form summary

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.

The Draft and Publish button on UserFeedback

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.

UserFeedback's floating contact form on a live website

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 lättanvänt drag-and-drop-plugin för att skapa WordPress-formulär. Med över 1 800 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.

WPForms website

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.

The Add New button under WPForms in the WordPress admin area

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

The Contact Form copy in the Name Your Form field in WPForms' Setup panel

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

The Use Template button for Simple Contact Form in WPForm's Setup panel

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

The Save button on WPForms' form builder interface

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.

OptinMonster's homepage

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.

Connect your existing account

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.

Connect OptinMonster to WordPress

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.

OptinMonster's Campaigns menu item

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

OptinMonster's Create Your First Campaign button

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.

OptinMonster's slide-in campaign type

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)”.

Subscribe to Newsletter template with Use Template highlighted

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

The pop-up window to name your OptinMonster campaign

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.

WPForms' block for OptinMonster's Slide in campaign type

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.

WPForms' dropdown on OptinMonster

Experttips: Oroa dig inte om du inte kan förhandsgranska ditt formulär i kampanjbyggaren. Formuläret kommer att visas när du publicerar kampanjen.

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

Design rules configurations for showing a floating form

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

OptinMonster's Publish tab

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.

WPForms and OptinMonster's floating form on a live website

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.

A contact page's URL on a live website

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.

The Simple Floating Menu plugin's settings area with the Enable Floating Menu slider

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

The color settings for a Simple Floating Icon's icon display

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.

Simple Floating Icon's Settings tab

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.

Simple Floating Menu's customizations for the button, icon, and tip

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:

Simple Floating Menu on a live website

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.

ChatBot Review: Is is the right chatbot plugin for your WordPress website?

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

1 kommentarLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.