Hur man stylar och anpassar Elementor kontaktformulär

Med Elementor är det enklare än någonsin att skapa kontaktformulär. Allt du behöver är att dra och släppa några widgets, anpassa inställningarna enligt dina krav, och du är klar.

Men att anpassa eller styla ett Elementor-kontaktformulär effektivt kan förändra utseendet på dina kontaktformulär mycket. Ett enkelt och lättförståeligt kontaktformulär kommer alltid att få fler svar än obskyra och röriga. Det är därför det anpassade formuläret Elementor är så viktigt.

Du kan helt enkelt skapa, styla och anpassa Elementor från. Men i den här artikeln kommer du att lära dig hur du anpassar ett elementor-kontaktformulär med MetForm-formulärbyggaren.

Varför ska du använda ett Elementor-kontaktformulär

Öka omvandlingsfrekvensen
När en användare hittar ett sätt att hålla kontakten med dig och ställa relevanta frågor angående de produkter eller tjänster du erbjuder, ökar möjligheten till konvertering i hög grad. Det minskar också avvisningsfrekvensen. 

Få feedback: Ett anpassat kontaktformulär för Elementor kan vara ett utmärkt sätt att höra från dina webbplatsanvändare. Om du ser fram emot att förbättra din tjänst eller berika användarupplevelsen, överväg att lägga till ett feedbackformulär på din webbplats.

Håll koll på förfrågningar: När någon besökare på din webbplats skickar en förfrågan till dig via ett anpassat WordPress-kontaktformulär, går det antingen till ett e-postmeddelande som du har angett eller till startlistan på din WordPress-instrumentpanel. Det hjälper dig att enkelt hålla reda på förfrågningar. 

Filtrera skräppost: Ett Elementors kontaktformulär kommer att rädda dig från spammare. Om du lägger upp din e-postadress på din webbplats finns det en chans att du får otaliga spammeddelanden.
Som ett resultat kanske du inte hittar de viktiga meddelandena när du behöver dem. Ett kontaktformulär i Elementor med en spamskyddsfunktion kommer bara att leverera meddelanden från riktiga människor, inte från bots eller spammare. 

Flera användningsområden: Du kan använda ett kontaktformulär av olika anledningar. Oavsett om det gäller att få feedback, jobbansökningar, säljförfrågningar eller förfrågningar om support, är ett kontaktformulär allt du behöver på din webbplats. 

Vad du behöver för att designa Elementor Custom Form?

Du behöver bara två plugins på din WordPress-webbplats för att börja skapa Elementor-kontaktformulär:

1. Elementor Page Builder
2. MetForm Form Builder

I den här guiden kommer jag att gå igenom hur du skapar ett Elementor-kontaktformulär med hjälp av Elementors sidbyggare och MetForm.

MetForm som är ett anpassat kontaktformulärplugin har både en pro- och gratisversion. Medan gratisversionen har alla grundläggande funktioner som du behöver för att skapa ett Elementor-kontaktformulär, låter proversionen dig utforska några avancerade fält och funktioner. Dessutom hittar du knappast dessa avancerade funktioner i något annat gratis eller pro Elementor-kontaktformulär, till exempel Elementor Contact Form 7, wpfroms, Ninja Forms, etc.

När det kommer till Elementor kan du antingen använda Elementor Pro eller gratisversionen. 

 Utan vidare, låt oss gå vidare:

Installera MetForm Custom Contact Form Plugin

Om du har installerat Elementor behöver du installera MetForm-formulärbyggaren på din WordPress-webbplats. Det är ett freemium WordPress-formulärbyggarplugin som har de grundläggande och avancerade funktionerna hos en standardformulärbyggare. Här är installationsprocessen för MetForm: 

1. Från din WordPress-administratörsinstrumentpanel, gå till Plugins ➜ Lägg till ny 
2. Söka efter "MeForm” från det övre högra sökpluginfältet.
3. Hitta MetForm från sökresultatet och klicka på "Installera nu” 
4. Aktivera MetForm.

Skapa och anpassa Elementor-kontaktformuläret från grunden

Nu när du har allt du behöver för att göra WordPress anpassade kontaktformulär med Elementor, låt oss gå vidare och skapa ett kontaktformulär från grunden.

Steg 1

Skapa en Elementor-kontaktformulärsida genom att gå till Sidor ➜ Lägg till ny. Ge formuläret en lämplig titel och klicka sedan på "Redigera med Elementor”. 

Steg 2

Sök efter MetForm i Elementor-widgetens sökfält. Dra och släpp den på Elementor-innehållsområdet. 

Steg 3

Från vänster, klicka på "Redigera formulär”. 

Om du skapar ett formulär för första gången eller vill skapa ett helt nytt formulär, klicka på "Ny“. 

Om du har sparat "från" du tidigare skapat kan du redigera dem genom att klicka på "Välj Form“. 

Steg-4

För att börja skapa ett formulär från början klickar du bara på den tomma kontaktformulärmallen. Om du väljer att använda det färdiga kontaktformulärmallbiblioteket som erbjuds av MetForm, kan du välja vilket formulär som helst från listan med formulärmallar.

När vi börjar från början, låt oss gå vidare med den tomma mallen för kontaktformuläret.

Steg-5

Nu kommer du att se ett popup-fönster med Elementor-innehållsområdet och widgetområdet.

Elementor-widgetområdet består av alla widgets från MetForm och Elementor. 

För att börja skapa formuläret, lägg till nya avsnitt från Elementor-innehållsområdet enligt kraven för formuläret du ska skapa.

Steg-6

Dra och släpp widgetarna du behöver för att ge din form en form. 

Hur man utformar och anpassar element eller kontaktformulärelement

Nu när du har dragit och släppt alla widgets du behöver på din elementor-formulär kan du redigera dem så mycket du vill. 

För att anpassa alla formulärfält eller knappar, bara klicka på knappen eller fältet från Elementor-innehållsområdet. 

Du kan göra ändringar i formulärfältens innehåll och stil. Utöver det kan du också utforska den avancerade fliken för att lägga till fler funktioner. När du är klar publicerar du kontaktformulärsidan. 

Anpassa hela kontaktformuläret i Elementor

Om ditt mål är att anpassa hela formuläret du skapar, utforska formulärinställningarna som MetForm kommer med. 

Under Allmänna Inställningar, det finns alternativ för att anpassa följande kärninställningar för ett formulär: 

1. Formulärtitel
2. Framgångsmeddelande 
3. Obligatorisk inloggning (Ja/Nej)
4. Fånga användarwebbläsardata (Ja/Nej)
5. Dölj formulär efter inlämning (Ja/Nej)
6. Lagra formulärposter i databasen (ja/nej)
7. Postens titel
8. Begränsa det totala antalet poster (Ange antal)
9. Räkna visningar (Ja/Nej)
10. Stoppa vertikal rullning (aktivera/avaktivera)
11. Omdirigera till (dit användarna kommer att omdirigeras efter att formuläret skickats in)

Skicka ett bekräftelsemail till användare med en inlämningskopia

Om du vill skicka ett bekräftelsemail till de personer som fyller i det anpassade WordPress-kontaktformuläret, gå till MetForms formulär Inställningar ➜ Bekräftelse Flik. Växla "Bekräftelsemail till användaren” till Ja och fyll sedan i följande fält: 

1. E-postämne
2. E-post från
3. E-post Svara till
4. Tack meddelande

Hur meddela administratören om ett nytt formulär? 

När ett nytt kontaktformulär skickas sparas det vanligtvis i MetForm-postdatabasen (om det är aktiverat från de allmänna inställningarna). 

Men om du vill bli meddelad om nya inlämningar kan du också anpassa det från Meddelandefliken i MetForms formulärinställningar. Aviseringsfliken kommer med följande fält: 

1. Avisering via e-post till administratör (växla på)
2. E-postämne
3. E-posta till
4. E-post från
5. E-post Svara till
6. Admin Note

Vilka formulärfält ska du använda på ditt Elementor-kontaktformulär?

Olika typer av formulär kräver olika formulärfält. Om du skapar ett enkelt kontaktformulär i Elementor, räcker det med bara några enkla widgets som text, e-post, telefon, captcha och widgets för att skicka in knappar för dig. 

Å andra sidan, om du letar efter att skapa formulär som antagningsformulär, evenemangsformulär, bokningsformulär, etc, kan du behöva använda olika formulärfält och anpassa dem därefter. 

För att göra processen att välja rätt formulärfält enklare för dig erbjuder MetForm dussintals mallar för att göra en mängd olika formulärtyper som registreringsformulär, WordPress enkätformulär, bokningsformulär etc. Kontrollera mallar för demoformulär här. I den här listan hittar du även gratis Elementors kontaktformulärmallar för att bygga kontaktformulär på några sekunder.

Hur bäddar man in Elementors anpassade kontaktformulär på vilken sida som helst? 

Om du inte vill skapa en sida för ditt Elementor-kontaktformulär, hellre bädda in formuläret på vilken sida som helst, låter MetForm dig också göra det. 

MetForm skapar individuella kortkoder för alla formulär du skapar. Dessutom kommer du också att ha anpassade kortkoder för kontaktformulär i MetForm. För att hitta kortkoden för ett specifikt kontaktformulär som du har skapat, gå till WordPress Admin Dashboard ➜ MetForm ➜ Formulär.

Där hittar du kortkoder i alla former. Kopiera bara kortkoden och klistra sedan in den på sidan där du vill bädda in det anpassade WordPress-kontaktformuläret. Bingo! 

Integrationer du kan använda för Elementor Kontaktformulär

Om du använder MetForm kan du integrera REST API för att skicka data till tredje parts API. Annat än det kan du integrera formuläret med Mailchimp, Google Sheet, MailPoet, Aweber, ConvertKit, GetResponse, ActiveCampaign, Zapier och Slack.

Ange om användarna behöver registrera sig/logga in för att fylla i ett formulär

Vanligtvis kan vem som helst fylla i ett formulär du gör om du inte bestämmer dig för att endast registrerade eller inloggade användare ska tillåta att fylla i det. 

Så om du vill att endast inloggade användare ska fylla i formuläret, aktivera inloggningssystemet. 

Å andra sidan kan du också låta användare registrera sig och sedan fylla i formuläret. 

För att aktivera användarinloggning och registrering, gå till formulärinställningarna och klicka sedan på fliken Auth. Du får möjlighet att både aktivera och inaktivera användarinloggning och registrering för ditt elementorformulär.

Hur lägger man till betalningsmetoder till ett formulär byggt med Elementor? 

Om du använder MetForm för att skapa ditt Elementor-kontaktformulär, gå till Formulärinställningar och klicka sedan på Betalning flik. 

Här hittar du betalningsmetoder som t.ex Paypal och Rand som du kan använda för att samla in betalningar från dina kunder. Du måste konfigurera dem manuellt och sedan växla mellan betalningsmetoden PÅ för de blanketter du vill ta emot betalningar med. 

Hur integrerar man CRM-system till Elementors kontaktformulär?

Du kan integrera ditt elementor-kontaktformulär med Hubspot-kontakt, Hubspot-formulär, Zoho kontakt, och Hjälpscout. 

Vad du behöver göra är att integrera de CRM:er du gillar genom att aktivera och konfigurera dem från CRM flik.

Hur man konverterar inlämningar från kontaktformulär till inlägg

Det är en av de finaste funktionerna i MetForm. MetForm låter dig konvertera formulärinlämningarna till individuella inlägg. Gå bara till formulärinställningarna och klicka sedan på fliken "Inlägg". Aktivera formuläret för att lägga upp och gör nödvändiga inställningar. Så enkelt är det.

Slutord

Vid det här laget känner du till dussintals sätt att skapa ett Elementor-formulär eller ett anpassat Elementor-formulär. Allt du behöver är Elementor-sidbyggaren och MetForm-formulärbyggaren. Så vänta inte längre. Börja skapa dina Elementor Custom-kontaktformulär och anpassa Elementor-formulären till ditt hjärta. Och sist men inte minst kan du också skapa en komplett kontaktsida med MetForm. 

Om du har någon förvirring eller har några frågor, hör gärna av dig via kommentarsfältet.