Gå till innehållet

Hur man skapar ett flerstegsformulär med Elementor

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Vill du veta hur du skapar ett flerstegsformulär med Elementor?

Känner du till typform? Han är en populär online formbyggare välkänd för sin interaktiva stil. I Typform kan du skapa ett interaktivt flerstegsformulär online för en mängd olika ändamål.

Om du har en WordPress-baserad webbplats som drivs av Elementor, kan du enkelt integrera dina Typeform-formulär med Essential Addons.

Se även: Hur man lägger till ett prisnät i Elementor

Men sedan version 2.9 har Elementor själv en funktion som du kan använda för att skapa flerstegsformulär. I den här artikeln visar vi dig hur du gör det med hjälp av Elementor.

Ett flerstegsformulär i sig är en bra idé för att spara utrymme på din design (oavsett om det är en sida eller en temabyggarmall). Det låter dig förkorta en lång form till en enklare form.

Hur man skapar ett flerstegsformulär i Elementor

Innan du börjar, se till att du har uppgraderat din Elementor till pro-versionen om du inte har gjort det sedan Form-widgeten (Elementor-widgeten för att skapa formulär) bara är tillgänglig i proffsen.

Läs också: Hur man skapar ett kontaktformulär i Elementor

I den här artikeln hoppar vi direkt till att lägga till formulärwidgeten. Flerstegsformen som vi ska skapa består av tre steg enligt följande:

  • Steg 1: Namn och kön
  • Steg 2: Telefon och e-post
  • Steg 3: Radioknapp

Dra först Form-widgeten till Elementors redigeringsruta.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Gå till inställningspanelen till vänster för att göra inställningarna. I blocket Formulärfält sous fliken Innehåll, definiera fälten efter dina behov. I vårt fall är fälten följande:

  • namn
  • Genre
  • Telefon
  • E-post
  • hobby

skapa ett formulär i flera steg

När du är klar med att lägga till och definiera de formulärfält du behöver lägger du till ett annat fält och ställer in fälttypen på Steg.

Se även: Hur man skapar en rundad bild i Elementor

Detta steg lägger automatiskt till ett nytt fält i toppordning och ett nytt fält längst ner. Du kan ställa in etiketten för det övre fältet till något liknande steg 1.

Dra sedan det nedre fältet och placera det strax ovanför fältet från det andra steget (telefonfältet i det här fallet).

Lägg till ett annat fält och ställ in fälttypen på steg. Dra den och placera den strax ovanför fältet i det tredje steget (hobbyfältet i det här fallet).

skapa ett formulär i flera steg

Här. Du kan förhandsgranska resultatet innan du anpassar formuläret. Som standard är stegtypen inställd på nummer och text.

Du kan redigera från blocket Stegparametrar under fliken Innehåll.

Du kommer åt fliken Stil för att anpassa ditt formulär. Det finns 5 justeringsblock som du kan öppna.

skapa en flerstegsformulär med Elementor

  • Form : du kan öppna detta block för att definiera utrymmet mellan kolumnerna och raderna i formuläret, typografi (typsnittsfamilj, teckensnittsstorlek, teckensnittsstil etc.) för etikettens form och färgen på texten på den senare .
  • Fält : Du kan öppna detta block för att definiera typografi för formulärfält, textfärg för fälten, bakgrund, kantbredd, kantfärg och kantradie.
  • Knapp : Du kan öppna detta block för att anpassa knapparna. Oavsett om det är skicka-knappen, den tidigare knappen eller nästa knapp. Du kan definiera element som texttypografi, textfärg, bakgrundsfärg etc.
  • Meddelande: Du kan öppna detta block för att definiera typografin för meddelandena samt färgen på texten.
  • Steg: Du kan öppna detta block för att definiera typografin för stegen, färgen, separatorns bredd, separatorns utrymme osv ...

När du har redigerat din mall kan du publicera eller uppdatera den.

Läs också: Hur man skapar en gruppmedelssektion med Elementor 

Om du vill infoga formuläret du just skapade på en Gutenberg-sida (eller kanske vill infoga det i ett blogginlägg) kan du spara formulärwidgeten som en global widget. Du kan sedan importera widgeten med hjälp av plugin Elementor block för Gutenberg.

Skaffa Elementor Pro nu!

Slutsats

Här är ! Det är det för den här artikeln som visar hur du skapar en flerstegsform med Elementor.  Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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.

.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer