Letar du efter ett sätt att skapa en landningssida med ett formulär för din WordPress-webbplats?
En WordPress-landningssida med ett kontaktformulär är praktiskt taget allt du behöver för att omvandla din webbtrafik till leads och försäljning. Men hur gör du det? Behöver du skapa en landningssida i HTML? Eller ett kontaktformulär i HTML? Eller båda?
Hur lanserar du en landningssida med kontaktformulär snabbt utan att behöva anlita en utvecklare? Och hur säkerställer du att den konverterar?
Den goda nyheten är att du inte behöver någon kodning alls för att skapa en landningssida med kontaktformulär i WordPress. Allt du behöver är ett par plugins och du kan vara igång på mindre än 10 minuter.
I den här artikeln visar vi dig steg för steg hur du skapar en landningssida med ett formulär i WordPress.
Låter bra? Låt oss dyka in.
Vad är en landningssida med kontaktformulär?
En landningssida är en webbsida på din webbplats som är specifikt utformad för att sälja din produkt eller tjänst. Du kan också använda landningssidor för att samla in leads. En landningssida med kontaktformulär är en enkel landningssida med bara ett kontaktformulär och inga distraktioner så att du kan fokusera på att konvertera din webbtrafik.
Kort sagt: en landningssida är en konverteringsmaskin på din webbplats.
Hur det fungerar är också enkelt. Du skapar marknadsförings- eller reklamkampanjer som för trafiken direkt till din landningssida. Sedan konverterar landningssidan den trafiken till leads eller betalande kunder. Du kan samla e-postadresser eller prenumeranter på push-notiser för remarketing. Eller så kan du skapa ett beställningsformulär för att fylla i beställningar automatiskt.
Eftersom målet med en landningssida är att konvertera mer av din webbplatstrafik till kunder, måste den se attraktiv och engagerande ut. Viktigast av allt är att du måste utforma olika call-to-action-element på rätt sätt, till exempel:
- Köpknappen
- Registreringsformulär
- Spela upp media-knapp
Och mer!
Hur man skapar en WordPress-landningssida med ett formulär
I de följande avsnitten kommer vi att visa dig steg för steg hur du skapar en landningssida i WordPress. Som vi sa är det inte en bra lösning att skapa en landningssida med ditt tema.
Därför rekommenderar vi att du använder ett av de bästa WordPress-plugins för landningssidor. Även om du inte är utvecklare kan du skapa en högkonverterande landningssida i WordPress och öka din webbplatstrafik och försäljning.
Vår rekommendation är att använda SeedProd.
SeedProd är den bästa byggaren för WordPress-landningssidor på marknaden. I den här artikeln kommer vi att använda SeedProd för att skapa din första landningssida. Om du inte är 100% övertygad om att detta är rätt byggare för landningssidor för dig, bör du kolla in vår recension av SeedProd.
Och sedan, sätt igång!
Steg #1: Installera SeedProd-pluginet på din webbplats
Först måste du besöka SeedProd-webbplatsen och köpa pluginet. Sedan kan du ladda ner plugin-filen till din dator. Kopiera sedan pluginets licensnyckel från din SeedProd-instrumentpanel.
Next, you’ll have to log into your WordPress dashboard and install the plugin. If you need detailed instructions, check out this step-by-step guide to installing a WordPress plugin. Head over to the SeedProd plugin welcome screen on WordPress and verify your license key:
After your account is verified, you’re ready to create a landing page.
Step #2: Create a Landing Page with SeedProd
In the SeedProd welcome screen, scroll further down and click on Create Your First Page button:
Then, you’ll see 5 different types of landing pages that you can create:
Using SeedProd’s templates, you can quickly launch complicated pages such as:
- Coming Soon and Maintenace Mode Pages
- Login Pages
- 404 Pages
And if you scroll down a little further, you can launch a custom landing page from pre-built templates. Click on Add New Landing Page:
Then, choose a landing page template from the pre-built landing pages listed in SeedProd’s builder:
Take your time and select the right template for you. To select a template, just click the checkmark icon on the template.
Remember, the template is just a starting point. In the next section, we’ll see how to customize your landing page easily using SeedProd’s drag-and-drop builder.
Step #3: Customize the Landing Page Template
After choosing your landing page template, you’ll be redirected to SeedProd’s visual drag and drop builder where you can customize your landing page. The left hand side of the editor is a list of the design elements that you can use to customize your landing page:
And you can also click on any of the design elements in the live preview to edit them directly on the preview:
You can change the text, its style, color, alignment, and layout to fit your product or overall brand. Additionally, you can easily add new blocks such as buttons, optin forms, contact forms, social profiles, and more to your landing page template.
For instance, you can drag and drop a countdown timer to increase urgency:
When you’re done, click on Save.
Step #4: Add a WordPress Contact Form
Next, you need to do is choose a WordPress contact form plugin.
Of course, a quick Google search will show you that there are way too many contact form plugins to choose from. So, we went ahead and found the best plugin for you.
We recommend using WPForms to create contact forms on your WordPress site.
WPForms is the #1 WordPress form builder plugin with over 3 million users. You get a drag and drop form builder, which means that you can create WordPress forms with incredible features in a matter of minutes.
You can also use WPForms Lite, which is the free version of WPForms. So, if you’re looking for a free form builder to get started with, you can use the Lite version. Later, when you need more powerful features for your forms, you can upgrade to the paid plans. Check out our WPForms review for a detailed look at the features.
Installera och aktivera pluginet. När det är gjort är det dags att skapa ditt första formulär. Gå till WPForms » Lägg till nytt:
Detta öppnar WPForms dra-och-släpp-formulärbyggare.
För att skapa ett nytt formulär, ge det ett namn och välj din formulärmall:
Och det är allt! Om du vill lägga till eller redigera fälten i ditt kontaktformulär kan du göra det från sidofältet. Dra och släpp formulärfält för att lägga till nya och klicka på befintliga fält för att redigera dem:
När du är klar, tryck på Spara. Du kan sedan använda kortkoden för formuläret och bädda in den på din landningssida.
Om du behöver en mer detaljerad guide, kolla in den här artikeln om hur man skapar ett WordPress-kontaktformulär.
Steg #5: Anslut din e-postmarknadsföringstjänst
Många småföretag samlar in leads från sin landningssida istället för att sälja något. Om du skapar en landningssida för att samla in leads på din webbplats, vill du skapa en optin. Anslut sedan din optin till en e-postleverantör som Constant Contact.
För att göra detta, gå till fliken Anslut i SeedProd-byggaren och välj din e-postleverantör från listan:
Klicka sedan på Anslut nytt konto:
Och följ instruktionerna för att ställa in din e-posttjänst för att samla in leads.
Steg #6: Lägg till en klick-för-prenumerera-knapp på din landningssida
Du kan också lägga till en klick-för-prenumerera-knapp för att samla in prenumeranter på push-notiser. Push-notiser är ett utmärkt sätt att öka din återkommande trafik, få mer engagemang och till och med sälja officiella varor om du har några.
I SeedProd, dra och släpp bara modulen Anpassad HTML från sidofältet.
Vi har placerat prenumerationsknappen direkt under e-postregistreringsformuläret i den första vyn.
Men du kan infoga knappen var du vill.
För den här delen behöver du viss erfarenhet av HTML och CSS. Eller så kan du kopiera den här koden och klistra in den i ditt anpassade HTML-block:
<button onclick="subscribeOnClickButton()" style="border: none; padding-left: 5%; padding-right:5%; text-align: center; display: inline-block; color: blue;">Get Updates via Push Notifications</button>Det där är en standardknapp i HTML med väldigt lite styling. Det enda speciella är onclick-funktionen i koden. Det betyder i princip att dina besökare kan klicka på knappen för att prenumerera på något. Nu behöver vi ge knappen lite extra kod för att tillåta dina besökare att prenumerera på push-notiser.
Gå till PushEngage startsida och klicka på knappen Kom igång :
Sedan vill du välja gratisplanen för att prova PushEngage eller välja en betald plan om du menar allvar med att växa din verksamhet. De betalda planerna kommer med fler kampanjalternativ och möjligheten att bygga ännu större prenumerantlistor.
I din PushEngage-instrumentpanel, gå till Webbplatsinställningar » Webbplatsdetaljer och klicka på knappen Klicka här för installationsinstruktioner. Under Valfri webbplats, får du din installationskod:
VARNING: Du måste kopiera koden du får från din instrumentpanel. Koden är unik för varje PushEngage-användare. Du kan inte kopiera koden i bilden och samla prenumeranter på push-notiser.
När du har koden i din PushEngage-instrumentpanel, lägg till detta kodavsnitt i din kod:
<script> window._peq = window._peq || [];</script> <script>
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}
</script>Din slutliga kod bör se ut ungefär så här:
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];</script> <script>
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}
</script>Du vill lägga till den här koden i HTML-blocket på din landningssida efter koden för knappen. Det bör se ut ungefär så här:
Anpassa gärna stilarna för knappen hur du vill. När du är klar med att anpassa din landningssida, fortsätt och tryck på Spara-knappen.
Steg #7: Publicera din landningssida
När du är klar med att anpassa din sida, klicka på Spara. Klicka sedan på nedåtpilen bredvid Spara-knappen och tryck på Publicera:
Du bör se ett lyckat meddelande när du publicerar din sida som ser ut ungefär så här:
Du kan klicka på knappen Se live-sida för att visa din landningssida. Och du är helt klar!
Vad du ska göra efter att du skapat en landningssida med ett formulär
Det var allt för den här gången, gott folk!
Nu när din landningssida med ett kontaktformulär är live, är den enda utmaningen du har kvar att skicka trafik till din landningssida.
Och om du letar efter ett prisvärt sätt att öka din trafik, rekommenderar vi att använda push-notiser. Push-notiser kan hjälpa dig att få mer återkommande trafik och webbplatsengagemang. Du kan också skapa automatiserade push-notiskampanjer som genererar försäljning.
Inte övertygad? Kolla in dessa resurser:
- 7 smarta strategier för att öka kundengagemanget
- Är push-notiser effektiva? 7 statistik + 3 experttips
- Hur du ställer in pushmeddelanden för övergivna kundvagnar (Enkel handledning)
- Hur man lägger till ett WordPress-plugin för webbnotiser på din webbplats
Vi rekommenderar att använda PushEngage för att skapa dina push-notiskampanjer. PushEngage är den främsta push-notisprogramvaran i världen. Så, om du inte redan har gjort det, kom igång med PushEngage idag!
