Vill du veta hur man skapar en formen i flera steg med Elementor ?

Känner du till Typeform? Han är en skapare av former populär onlineplattform välkänd för sin interaktiva stil. I Typeform kan du skapa en formen interaktivt onlinespel i flera steg för en mängd olika ändamål.

Om du har en WordPress-baserad webbplats som drivs av Elementor, kan du enkelt integrera din former Typform med hjälp av Essential Addons.

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

Men sedan version 2.9, Elementor själv har en funktion som du kan använda för att skapa former i flera steg. I den här artikeln kommer vi att visa dig hur du gör med hjälp avElementor.

Un formen multi-step i sig är en utmärkt idé för att spara utrymme på din design (oavsett om det är en sida eller en mall för temabyggare). 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.

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.

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.

.