Vill du bädda in anpassade HTML-kodavsnitt i dina WordPress-kontaktformulär? Att lägga till anpassad HTML i ditt formulär är ett bra sätt att bli kreativ och förbättra dina formulär.
De bästa WordPress-formulärpluginerna låter dig skapa formulär utan kod, samtidigt som du kan lägga till din egen anpassade HTML till dina formulär för att göra dem ännu mer avancerade.
Så i den här handledningen går vi igenom hur du lägger till anpassad HTML till dina WordPress-formulär med hjälp av WPForms.
Varför lägga till anpassad HTML i ditt kontaktformulär
Du kanske undrar varför du ska lägga till HTML i dina WordPress-formulär.
I många fall kan en avancerad användare eller webbutvecklare vilja utöka funktionaliteten i ett formulär. En av de främsta fördelarna med att lägga till anpassad HTML i ditt formulär är att det hjälper dig att få ditt formulär att sticka ut från resten av innehållet.
I exemplet nedan kan du se hur enkelt det är att lägga till en länk till en integritetspolicy i någon text på ditt kontaktformulär.
Då kommer besökarna att se något i stil med detta:
Dessutom kan du lägga till en bild i ditt formulär med hjälp av anpassad HTML-kod för att göra formuläret mer visuellt tilltalande eller för att visa anpassade produkter och produktalternativ.
Och genom att lägga till dessa ytterligare funktioner i dina formulär kan du få formuläret att sticka ut på sidan och hjälpa till att fånga dina besökares uppmärksamhet. Detta kan uppmuntra dem att skicka in ditt formulär.
Att lägga till anpassad HTML i ditt formulär skapar massor av möjligheter att förbättra ditt WordPress-formulär. Några av dessa idéer inkluderar:
- Bädda in en YouTube-video: Du kan göra ditt formulär mer attraktivt genom att infoga en YouTube- eller Vimeo-video i ditt formulär.
- Bädda in Google Maps: På din kontaktsida kan du visa din företagsplats genom att infoga Google Maps i ditt kontaktformulär.
- Visa ett exklusivt erbjudande med villkorad logik: Om du skapar ett beställningsformulär kan du visa ett HTML-block med ett exklusivt erbjudande om en användare väljer ett specifikt alternativ i ditt formulär. Denna smarta villkorliga logik fungerar utmärkt för merförsäljningar och för att hålla din form kort.
- Visa din integritetspolicy: Lägg till text med en länk till din sekretesspolicy direkt i ditt formulär.
Hur man lägger till anpassad HTML-kod till ditt WordPress-kontaktformulär
Om du föredrar att läsa handledningen, följ dessa instruktioner för att skapa en plats på dina formulär för att placera din anpassade HTML-kod.
Steg 1: Installera WPForms
Det första du behöver göra för att komma igång är att installera och aktivera WPForms plugin. Det är en lättanvänd formulärbyggare som låter dig skapa allt från enkla formulär till avancerade formulär. Det är en av de bästa WordPress-plugins som finns.
Om du är ny på att ladda ner plugins, här är en steg-för-steg-guide om hur du installerar ett WordPress-plugin.
Dessutom måste du skapa ett formulär. Låt oss gå vidare och göra det härnäst.
Steg 2: Skapa ett formulär
Nästa steg är att göra din första form. Du kan välja vilket formulär du vill lägga till anpassad HTML till, men för det här exemplet kommer vi att skapa ett enkelt kontaktformulär med WPForms-utmaningen.
Excellent. Låt oss nu lägga till fältet som accepterar anpassad HTML nedan.
Steg 2 – Lägg till ett HTML-block till ditt formulär
Nu måste du lägga till en Html fältet till ditt formulär. Du kan hitta den på fliken Fält och sedan Lyxiga fält.
Dra sedan helt enkelt fältet från den vänstra panelen till det högra formuläret.
Det är verkligen så enkelt att lägga till ett anpassat HTML-fält till ditt WordPress-kontaktformulär med WPForms.
Steg 3: Infoga din anpassade HTML
Nu när du har din anpassade HTML-ruta i ditt kontaktformulär kan du lägga till ditt anpassade HTML-kodavsnitt.
Gå vidare och gå till ditt formulär till höger och klicka på HTML-block/kod fältet du just lade till.
Gå sedan till den vänstra panelen där du ser HTML-kodrutan nedan Fältalternativ.
Det är här du kan lägga till ditt anpassade HTML-kodavsnitt.
Så fortsätt och klistra in din anpassade HTML i det fältet. Du kan lägga till vilken typ av anpassad HTML-kodavsnitt som helst i ditt formulär.
När du är klar trycker du på Spara i det övre högra hörnet.
Låt oss nu gå vidare och få den formen på plats!
Steg 4 – Lägg till ditt anpassade HTML-kontaktformulär på din WordPress-webbplats
Så nu när du har skapat ditt kontaktformulär med ett anpassat HTML-fält med WPForms-plugin, vill du lägga till det på din webbplats.
För att komma igång, klicka på Bädda in knappen i formulärbyggaren.
Nu, när meddelandet Infoga på en sida visas, fortsätt och klicka på Skapa ny sida knapp.
Därefter kommer WPForms att be dig att namnge din sida. För vårt exempel lägger vi till det här anpassade HTML-kontaktformuläret på en kontaktsida, så vi kallar det Kontakta oss.
Skriv in titeln på sidan du vill ha i rutan och klicka Kom igen!
Så nu kommer du att se den nya sidan med ditt anpassade HTML-kontaktformulär. Du kan gå vidare och trycka på Posta i det övre högra hörnet på din sida.
Och ta sedan en titt på ditt nya formulär. Du borde kunna se det i aktion.
Du har gjort det. Du har slutfört att skapa ett WordPress-kontaktformulär med ett anpassat HTML-fält.
Slutliga tankar om anpassade HTML-formulär
Bra jobbat. Vi hoppas att den här handledningen hjälpte dig att lära dig hur du ställer in det anpassade HTML-fältet i dina kontaktformulär i WordPress.
Så nu när du har lagt till anpassad HTML i ditt formulär bör du kolla in vår guide om hur du designar kontaktformulär i WordPress för att se till att din anpassade kod ser ut som du vill.
Så vad väntar du på? Kom igång med det mest kraftfulla WordPress-formulärpluginet idag och börja skapa vackra, anpassade formulär för din webbplats för småföretag.
Och om du gillar den här artikeln, följ oss på Facebook och Twitter för fler gratis WordPress-tutorials.
