{"id":782140,"date":"2023-11-06T12:45:50","date_gmt":"2023-11-06T18:45:50","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-skapar-ett-amp-kompatibelt-kontaktformular-for-wordpress\/"},"modified":"2023-11-06T12:45:50","modified_gmt":"2023-11-06T18:45:50","slug":"hur-man-skapar-ett-amp-kompatibelt-kontaktformular-for-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-skapar-ett-amp-kompatibelt-kontaktformular-for-wordpress\/","title":{"rendered":"Hur man skapar ett AMP-kompatibelt kontaktformul\u00e4r f\u00f6r WordPress"},"content":{"rendered":"

Vill du skapa ett AMP-kompatibelt kontaktformul\u00e4r? AMP eller Accelerated Mobile Pages \u00e4r en Google-teknik som laddar dina webbsidor snabbt p\u00e5 mobila enheter.<\/p>\n

I den h\u00e4r artikeln visar vi dig hur du skapar ett kontaktformul\u00e4r som laddas p\u00e5 dina AMP-sidor utan problem. Vi kommer ocks\u00e5 att f\u00f6rklara hur du l\u00e4gger till reCAPTCHA i ditt AMP-kontaktformul\u00e4r f\u00f6r att skydda det fr\u00e5n spammare.<\/p>\n

<\/span>Skapa ett AMP-kompatibelt kontaktformul\u00e4r i WordPress<\/span><\/h3>\n

AMP (Accelerated Mobile Pages) ger den b\u00e4sta upplevelsen f\u00f6r personer med en l\u00e5ngsam Internetanslutning. Det laddar sidor snabbare p\u00e5 mobila enheter och hj\u00e4lper dig d\u00e4rf\u00f6r att f\u00f6rb\u00e4ttra trafiken till din webbplats.<\/p>\n

AMP inneb\u00e4r dock ett antal utmaningar f\u00f6r webbplats\u00e4gare.<\/p>\n

En av dem \u00e4r att det till\u00e5ter begr\u00e4nsad anv\u00e4ndning av resurser f\u00f6r att ladda sidor snabbare. D\u00e4rf\u00f6r kommer vissa funktioner inte att fungera p\u00e5 dina AMP-sidor som de normalt skulle g\u00f6ra.<\/p>\n

S\u00e5 vad kommer att h\u00e4nda med kontaktformul\u00e4ret p\u00e5 din webbplats? Kommer det att fungera korrekt?<\/p>\n

Om du anv\u00e4nder plugin-programmet WPForms kommer det automatiskt att uppt\u00e4cka om formul\u00e4ret laddas p\u00e5 en AMP-sida eller inte. Och sedan visar den l\u00e4nken till den icke-AMP-versionen av sidan f\u00f6r att ladda formul\u00e4ret korrekt.<\/p>\n

\"Kontaktformul\u00e4rl\u00e4nk<\/p>\n

Du kan dock ocks\u00e5 l\u00e4gga till ett formul\u00e4r p\u00e5 din AMP-sida ist\u00e4llet f\u00f6r att visa meddelandet ovan.<\/p>\n

F\u00f6r att g\u00f6ra det m\u00e5ste du anv\u00e4nda plugin-programmet WPForms Lite och sedan skapa ett formul\u00e4r som \u00e4r helt AMP-kompatibelt.<\/p>\n

S\u00e5, utan vidare, l\u00e5t oss ta en titt p\u00e5 steg-f\u00f6r-steg-processen f\u00f6r att skapa ett AMP-kompatibelt kontaktformul\u00e4r f\u00f6r din WordPress-webbplats.<\/p>\n

<\/span>Steg 1 \u2013 Installera AMP-plugin<\/span><\/h3>\n

Det f\u00f6rsta du beh\u00f6ver g\u00f6ra \u00e4r att installera och aktivera den officiella Google AMP-plugin f\u00f6r WordPress. Detta gratis plugin \u00e4r viktigt f\u00f6r att l\u00e4gga till AMP-st\u00f6d till din webbplats.<\/p>\n

\"Officiell<\/p>\n

Du kan kolla in steg-f\u00f6r-steg-guiden om hur du installerar ett WordPress-plugin f\u00f6r detaljerade instruktioner.<\/p>\n

N\u00e4r det har aktiverats l\u00e4gger detta plugin automatiskt till AMP-st\u00f6d till din webbplats. Du kan dock fortfarande g\u00f6ra \u00e4ndringar i inst\u00e4llningarna genom att bes\u00f6ka inst\u00e4llningar<\/strong> \u00bb AMP<\/strong> sida.<\/p>\n

F\u00f6r mer information kan du f\u00f6lja guiden om hur du korrekt konfigurerar Google AMP p\u00e5 din WordPress-webbplats.<\/p>\n

<\/span>Steg 2 \u2013 Skapa ett WordPress-formul\u00e4r<\/span><\/h3>\n

Det \u00e4r dags att skapa ett kontaktformul\u00e4r med hj\u00e4lp av WPForms Lite-plugin.<\/p>\n

F\u00f6r att komma ig\u00e5ng m\u00e5ste du installera och aktivera WPForms Lite-plugin. Efter aktivering m\u00e5ste du g\u00e5 till WPForms<\/strong> \u00bb L\u00e4gg till ny<\/strong> f\u00f6r att skapa ett nytt formul\u00e4r.<\/p>\n

Om honom Milj\u00f6<\/strong> sida hittar du n\u00e5gra standardformul\u00e4rmallar. Dessa mallar l\u00e5ter dig p\u00e5skynda processen f\u00f6r att skapa formul\u00e4r. Du kan ocks\u00e5 anv\u00e4nda den tomma formul\u00e4rmallen f\u00f6r att skapa ett formul\u00e4r fr\u00e5n b\u00f6rjan.<\/p>\n

Eftersom vi vill skapa ett kontaktformul\u00e4r, g\u00e5 vidare och klicka p\u00e5 Enkelt kontaktformul\u00e4r<\/strong> mall.<\/p>\n

\"Enkel<\/p>\n

Detta tar dig till sidan Form Builder, d\u00e4r du enkelt kan l\u00e4gga till eller ta bort ett f\u00e4lt. Om du till exempel vill l\u00e4gga till ett \u00e4mnesf\u00e4lt, dra och sl\u00e4pp helt enkelt En rad text<\/strong> fr\u00e5n den v\u00e4nstra panelen till ditt formul\u00e4r.<\/p>\n

Och f\u00f6r att \u00e4ndra f\u00e4ltnamnet m\u00e5ste du klicka p\u00e5 f\u00e4ltet i den h\u00f6gra panelen och sedan g\u00f6ra \u00e4ndringar i etiketten i den v\u00e4nstra panelen.<\/p>\n

\"AMP-kompatibelt<\/p>\n

Det b\u00e4sta \u00e4r att du kommer att kunna se f\u00f6r\u00e4ndringarna live. Bra, inte sant?<\/p>\n

P\u00e5 samma s\u00e4tt kan du redigera de andra f\u00e4lten i formul\u00e4ret som du vill. Du kan ocks\u00e5 f\u00f6lja v\u00e5r steg-f\u00f6r-steg-handledning om hur du skapar ett enkelt kontaktformul\u00e4r i WordPress.<\/p>\n

N\u00e4r du \u00e4r klar med anpassningsdelen kan du g\u00e5 till formul\u00e4ret inst\u00e4llningar<\/strong> formul\u00e4rbyggarens v\u00e4nstra sidof\u00e4ltssida. H\u00e4r kan du \u00e4ndra aviserings- och bekr\u00e4ftelseinst\u00e4llningar.<\/p>\n

Slutligen m\u00e5ste du spara \u00e4ndringarna genom att klicka p\u00e5 Spara<\/strong> som finns i det \u00f6vre h\u00f6gra h\u00f6rnet av sk\u00e4rmen.<\/p>\n

\"AMP-kompatibla<\/p>\n

Det \u00e4r allt! Du beh\u00f6ver inte konfigurera n\u00e5got annat. WPForms Lite-plugin kommer automatiskt att l\u00e4gga till fullt AMP-st\u00f6d till ditt formul\u00e4r nu.<\/p>\n

Dessutom kan du l\u00e4gga till reCAPTCHA-st\u00f6d till ditt AMP-kontaktformul\u00e4r f\u00f6r att skydda det fr\u00e5n spammare.<\/p>\n

Vi visar dig hur du g\u00f6r i n\u00e4sta steg.<\/p>\n

<\/span>Steg 3: Registrera din webbplats f\u00f6r att f\u00e5 reCAPTCHA-nycklar<\/span><\/h3>\n

F\u00f6r att stoppa kontaktformul\u00e4rspam st\u00f6der WPForms 3 olika typer av CAPTCHA f\u00f6r dina formul\u00e4r:<\/p>\n

I den h\u00e4r handledningen kommer vi att fokusera p\u00e5 reCAPTCHA, en skr\u00e4ppostfiltreringstj\u00e4nst fr\u00e5n Google. Det hj\u00e4lper dig att skydda din webbplats fr\u00e5n spammare och automatiserade bots.<\/p>\n

F\u00f6r att anv\u00e4nda den p\u00e5 din webbplats m\u00e5ste du registrera din webbplats p\u00e5 Googles reCAPTCHA-webbplats f\u00f6r att f\u00e5 webbplatsnyckeln och hemliga nyckeln till din webbplats.<\/p>\n

Och sedan kan du anv\u00e4nda dem f\u00f6r att l\u00e4gga till reCAPTCHA-st\u00f6d till ditt AMP-kompatibla kontaktformul\u00e4r.<\/p>\n

S\u00e5 g\u00e5 \u00f6ver till Google reCaptcha-webbplatsen och klicka sedan p\u00e5 Administrationskonsol<\/strong> som finns i det \u00f6vre h\u00f6gra h\u00f6rnet av sk\u00e4rmen.<\/p>\n

\"Google<\/p>\n

Google kommer nu att be dig logga in p\u00e5 ditt konto. Efter det kommer du att omdirigeras till reCAPTCHA-panelen.<\/p>\n

Om du tidigare har skapat en reCAPTCHA med det h\u00e4r kontot, m\u00e5ste du klicka p\u00e5 plusikonen (+) f\u00f6r att registrera din nya webbplats.<\/p>\n

\"Registrera<\/p>\n

Men om du anv\u00e4nder det h\u00e4r kontot f\u00f6r f\u00f6rsta g\u00e5ngen kommer du automatiskt att se sidan “Registrera en ny webbplats” efter att du loggat in p\u00e5 ditt konto.<\/p>\n

N\u00e4r du \u00e4r p\u00e5 den sidan m\u00e5ste du skriva valfritt namn i rutan M\u00e4rka<\/strong> f\u00e4lt f\u00f6r framtida referens.<\/p>\n

\"V\u00e4lj<\/p>\n

D\u00e4refter m\u00e5ste du v\u00e4lja vilken typ av reCAPTCHA du vill anv\u00e4nda.<\/p>\n

Det \u00e4r viktigt att notera att reCAPTCHA V2 inte \u00e4r kompatibel med AMP. D\u00e4rf\u00f6r m\u00e5ste du v\u00e4lja “reCAPTCHA V3” f\u00f6r att l\u00e4gga till reCAPTCHA-st\u00f6d till ditt AMP-kompatibla kontaktformul\u00e4r.<\/p>\n

I det Dom\u00e4n<\/strong> m\u00e5ste du ange dom\u00e4nnamnet (utan http:\/\/ eller www) p\u00e5 din webbplats d\u00e4r du vill l\u00e4gga till reCAPTCHA-st\u00f6d. Du kan ocks\u00e5 l\u00e4gga till flera dom\u00e4ner eller underdom\u00e4ner genom att klicka p\u00e5 plusikonen (+).<\/p>\n

S\u00e5 l\u00e5ngt som \u00c4gare<\/strong> motsvarande f\u00e4lt kommer din e-postadress att finnas d\u00e4r som standard. Du kan dock l\u00e4gga till en annan e-postadress om du vill.<\/p>\n

Slutligen, markera kryssrutan “Acceptera reCAPTCHA anv\u00e4ndarvillkor” och scrolla sedan ner till botten av sidan f\u00f6r att klicka p\u00e5 Skicka<\/strong> knapp.<\/p>\n

\"Acceptera<\/p>\n

Nu kommer du att se ett framg\u00e5ngsmeddelande tillsammans med webbplatsnyckeln och den hemliga nyckeln f\u00f6r din webbplats. Du b\u00f6r kopiera dessa nycklar eftersom du kommer att beh\u00f6va anv\u00e4nda dem p\u00e5 din WordPress-webbplats.<\/p>\n

\"Kopiera<\/p>\n

Men innan dess \u00e4r det en sista sak du beh\u00f6ver g\u00f6ra.<\/p>\n

F\u00f6rst m\u00e5ste du klicka p\u00e5 G\u00e5 till Inst\u00e4llningar<\/strong> L\u00e4nk. Scrolla sedan ner till botten av sidan och markera sedan kryssrutan “Till\u00e5t den h\u00e4r nyckeln att fungera med AMP-sidor”.<\/p>\n

\"Till\u00e5t<\/p>\n

Detta kr\u00e4vs f\u00f6r att reCAPTCHA v3 ska fungera p\u00e5 AMP-sidor. N\u00e4r detta \u00e4r gjort m\u00e5ste du klicka p\u00e5 Spara<\/strong> knappen f\u00f6r att spara \u00e4ndringarna.<\/p>\n

<\/span>Steg 4 \u2013 L\u00e4gg till reCAPTCHA i ditt kontaktformul\u00e4r<\/span><\/h3>\n

F\u00f6r att komma ig\u00e5ng m\u00e5ste du l\u00e4gga till webbplatsnyckeln och den hemliga nyckeln p\u00e5 din webbplats.<\/p>\n

S\u00e5 g\u00e5 \u00f6ver till din WordPress-webbplats och g\u00e5 till WPForms<\/strong> \u00bb inst\u00e4llningar<\/strong> v\u00e4nster sidof\u00e4ltssida p\u00e5 din WordPress-adminpanel.<\/p>\n

D\u00e4refter m\u00e5ste du klicka p\u00e5 reCAPTCHA<\/strong> fliken f\u00f6r att \u00e4ndra inst\u00e4llningarna.<\/p>\n

\"WPForms<\/p>\n

H\u00e4r m\u00e5ste du v\u00e4lja “reCAPTCHA v3” som typ och sedan klistra in webbplatsen och hemliga nycklar i respektive f\u00e4lt.<\/p>\n

\"L\u00e4gg<\/p>\n

N\u00e4r du \u00e4r klar m\u00e5ste du scrolla ner och klicka p\u00e5 Spara inst\u00e4llningar<\/strong> knappen f\u00f6r att spara \u00e4ndringarna.<\/p>\n

Det \u00e4r dags att l\u00e4gga till reCAPTCHA i det AMP-kompatibla kontaktformul\u00e4ret.<\/p>\n

F\u00f6r att g\u00f6ra det m\u00e5ste du g\u00e5 till WPForms<\/strong> \u00bb alla former<\/strong> och klicka sedan p\u00e5 din formul\u00e4rrubrik f\u00f6r att \u00f6ppna den.<\/p>\n

G\u00e5 sedan till inst\u00e4llningar<\/strong> \u00bb Allm\u00e4n<\/strong> och markera sedan alternativet “Aktivera Google v3 reCAPTCHA”. Och gl\u00f6m inte att klicka p\u00e5 Spara<\/strong> knappen f\u00f6r att spara \u00e4ndringarna.<\/p>\n

\"Aktivera<\/p>\n

<\/span>Slutgiltiga tankar<\/span><\/h3>\n

Grattis! Du har skapat ett AMP-kompatibelt kontaktformul\u00e4r f\u00f6r din WordPress-webbplats. Du har ocks\u00e5 lagt till reCAPTCHA i det h\u00e4r formul\u00e4ret f\u00f6r att skydda det fr\u00e5n spammare.<\/p>\n

Om du gillade den h\u00e4r artikeln kanske du ocks\u00e5 vill kolla in v\u00e5r steg-f\u00f6r-steg-handledning om hur du skapar ett enkelt enk\u00e4tformul\u00e4r i WordPress.<\/p>\n

F\u00f6lj oss ocks\u00e5 p\u00e5 Facebook och Twitter f\u00f6r att f\u00e5 uppdateringar fr\u00e5n v\u00e5r blogg.<\/p>\n

\n
\n

Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n