Vill du anpassa ett kontaktformulär 7-formulär med Elementors Essential Addons-plugin?
Kontaktformulär 7 är en av Wordpress plugins av de mest populära formbyggarna. Det är helt gratis och du kan använda det för att skapa en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP på din WordPress-webbplats.
Du kan också skapa många typer av formulär som ett bokningsformulär eller ett filuppladdningsformulär. Den erbjuder 14 typer av fält som du kan använda när du skapar ett formulär.
Se även: Hur man använder Elementor-widgets/mallar som Gutenberg-block
Ett av de vanligaste problemen med plugin för kontaktformulär 7 är dess anpassningsprocess. Kontaktformulär 7 använder standardstilen för din Wordpress tema tillgång. Du kan använda en annan stil, men CSS-kunskaper kommer att krävas. Om du inte har några CSS-kunskaper kan du använda modulen Viktiga tillägg för att styla din form.
Essential Addons är ett Elementor-tillägg som förbättrar processen att anpassa dina kontaktformulär 7-formulär med Elementor. Elementor och Essential Addons är freemium plugins. Du kan använda gratisversionerna av båda för att utforma dina kontaktformulär 7-formulär.
Hur man utformar ett kontaktformulär 7-formulär med viktiga tillägg
Innan du börjar styla dina formulär, se till att du har installerat Elementor et Viktiga tillägg. När du har installerat och aktiverat, skapa en ny sida (Sidor – > Lägg till) och redigera den med Elementor.
Innan du startar anpassningsprocessen, ställ in sidlayouten genom att klicka på kugghjulsikonen i det nedre vänstra hörnet. Ställ in layouten från rullgardinsmenyn.
Lägg till ett nytt avsnitt genom att klicka på plusikonen i redigeringsrutan och dra widgeten EA-kontaktformulär 7 från den vänstra panelen i redigeraren.
Gå till den vänstra panelen och välj formuläret vars stil du vill anpassa.
När du har valt ett formulär, navigera till fliken Stil. Som du kan se kan du ställa in flera stylingalternativ. Här är de vanliga stylingalternativen du kan ställa in.
- Formulärets bredd, justering och bakgrund
Under blocket FormContainerklickar du på färgväljaren i avsnittet Bakgrundstyp och ställ in önskad färg för formulärets bakgrund. Du kan använda antingen en enfärgad eller en gradientfärg som bakgrund.
Läs också: Elementor: Hur man importerar eller exporterar mallar
För att ställa in formulärjusteringen, välj helt enkelt önskat justeringsalternativ i avsnittet Formulärjustering.
Om du vill ställa in formulärets bredd anger du värdet för formulärets maximala bredd i fältet Form Max bredd.
- Bakgrundsfält, kantbredd och radie
För att definiera bakgrunden för fälten, bredden och radien för gränsen, kan du öppna avsnittet Input & Textarea. Klicka på fältfärgväljaren Bakgrundsfärg för att ställa in bakgrunden.
Du kan också ställa in bakgrundsfärgen för fält i felsökningsläge genom att klicka på fliken FOKUS.
För att definiera fältens bredd kan du definiera värdet i fälten Ingångsbredd. I det här avsnittet kan du också ställa in bredden på textrutefältet i Textområdes bredd.
För att ställa in gränsradien, gå bara till att redigera fältet Gränsradie och ställ in det gränsvärde du föredrar. Du kan också ställa in typografin (typsnittsfamilj, teckenstorlek, typsnittsstil) genom att klicka på pennikonen i fältet typografi.
- Etiketter
Med Essential Addons kan du också anpassa stilen på dina formuläretiketter. Du kan ställa in textfärgen såväl som typografin. För att göra detta, öppna alternativet Etiketter. Ställ in textfärgen genom att klicka på färgväljaren i fältet Text färg.
För att ställa in typografin, klicka på pennikonen i fältet Typografi.
- Skickaknapp
För att anpassa stilen på skicka-knappen, öppna blocket Sänd knäppas. Härifrån kan du ställa in knappjustering, bredd, bakgrundsfärg, textfärg, kantradie samt typografi.
- Felmeddelande
För att anpassa stilen på felmeddelandet kan du öppna blocket fel. Du kan ställa in felmeddelandets textfärg, typografi, valideringsfelbakgrundsfärg, valideringsfelstextfärg, etc...
Du kan ställa in flera andra stilalternativ. Du kan leka med den vänstra panelen tills du är nöjd med stilen på din form.
Du kan lägga till flera andra element på din sida med hjälp av de tillgängliga widgets som erbjuds av Elementor och Essential Addons. När du är klar klickar du på knappen PUBLICERA längst ned i den vänstra panelen för att publicera din sida.
Integrera formuläret på en vanlig sida
Efter att ha klickat på knappen PUBLICERA, din kontaktsida har i princip publicerats. Själva sidan drivs av Elementor. Om du föredrar att lägga till din kontakt~~POS=TRUNC formulär~~POS=HEADCOMP 7 till en vanlig sida (en sida skapad med Gutenberg, standard WordPress-redigerare), kan du installera plugin Elementor block för Gutenberg. Denna plugin kommer att konvertera en Elementor-mall till ett Gutenberg-block.
För att registrera din kontakt~~POS=TRUNC formulär~~POS=HEADCOMP 7 som en Elementor-mall, klicka på pilknappen bredvid knappen PUBLICERA / UPPDATERA på den vänstra panelen och välj Spara som mall.
Ge din mall ett namn och klicka på knappen REGISTRERARE.
Skapa en ny sida (Sidor – > Lägg till) och ge den ett namn som "kontakta oss" "kontakt" eller något annat namn du vill.
Lägg till ett nytt block och välj Elementor bibliotek och välj mallen för kontaktformulär som du just skapade.
Och nu har du precis anpassat ditt Kontaktformulär 7-formulär.
Skaffa Elementor Pro nu!!!
Slutsats
Här ! Det var allt för den här artikeln som visar hur du anpassar ett kontaktformulär 7-formulär med Essential Addons. Om du har några frågor om hur du kommer dit, låt dem veta i commentaires.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
