Bygg ett standardformulär

Här går vi igenom hela formuläret i den ordning som redigeraren presenterar det.

1. Öppna redigeraren Customize

   Gå till Quote settings. På sidan Request a Quote hittar du kortet Customize och klickar på Customize. Redigeraren öppnas i helskärm.

2. Öppna fliken Quote form

   Redigeraren har fyra flikar – Button & widget, Quote form, Quote cart page och Success message. Öppna Quote form.

3. Börja från en mall

   Form template visar mallen som ditt formulär bygger på, med en kort beskrivning av vem den passar.

   Klicka på Change. En väljare öppnas med rubriken Choose a form template och anvisningen ”Select a starting point. The form fields will change only after you confirm.” Det finns tre:

   Mall	Hur appen beskriver den	Märkning
   Simple quote form	”Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload.”	Fast setup · 7 fields
   Detailed quote form	”For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance.”	More details · 14 fields
   B2B customer form	”For wholesale or business buyers who need company, shipping, billing, and payment term information”	B2B

   Välj den vars beskrivning stämmer med det arbete du ger offert på och klicka sedan på Use this template för att bekräfta. Cancel lämnar ditt nuvarande formulär orört. Gör det här nu, innan du börjar redigera fält.

   

   Börja från en mall i stället för ett tomt formulär.

   Caution

   Om du väljer en annan mall ersätts den nuvarande fältlistan. Avsnitten och fälten på skärmen byts ut mot den nya mallens egna, så alla avsnitt du har lagt till, alla fält du har döpt om och allt du har tagit bort försvinner med dem. Välj mall först och anpassa sedan.

4. Bestäm om formuläret ska visas på produktsidor

   Under Product page form display – ”Show the quote form directly on product pages” – markerar du Enable product page form display om du vill att kunder ska kunna fylla i formuläret utan att lämna produkten.

   När du markerar den visas Form position on product page, en rullgardinslista med tre alternativ:

   Placering	Var formuläret hamnar
   Below Add to Cart button	Högt upp på sidan, direkt under köpknapparna – det mest synliga alternativet.
   Below product description	Efter säljtexten, för en köpare som har läst den.
   Below product information	I slutet av produktinformationsblocket.

   

   Stäng av den här inställningen om du hellre vill att kunderna först bygger en offertvarukorg.

5. Gå igenom Form builder

   Form builder – ”Manage sections, rows, fields, and validation with the visual form builder” – innehåller dina frågor, grupperade i avsnitt. Vilka avsnitt som finns beror på mallen du nyss valde:

   Mall	Avsnitt i byggaren
   Simple quote form	Contact information · Extra info
   Detailed quote form	Contact information · Shipping address · Extra info
   B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

   Tre saker kan du göra med ett avsnitt:

   • Slå på eller av det. Öppna avsnittets inställningar och markera eller avmarkera Enable. Ett inaktiverat avsnitt visas inte för kunden, hur många fält det än innehåller.
   • Döp om det. Samma inställningspanel har en Label – ändra den till vad dina köpare skulle kalla det.
   • Flytta det. Dra avsnittet i dess handtag för att ändra ordningen i formuläret.

   Fäll ut ett avsnitt med pilen för att se fälten i det och använd Add element för att lägga till ytterligare ett fält i avsnittet.

   Kontakt- och adressfält beskrivs i Kunduppgiftsfält; företag, fakturering och betalningsvillkor i Bygg ett B2B-formulär.

   Note

   Gråade reglage i byggaren med en rad med hänglås som lyder ”🔐 This feature is available on …” betyder att funktionen finns i en högre plan. Ingenting är trasigt – öppna Pricing plans i appen för att se vad din plan innehåller.

6. Redigera ett fält

   Klicka på ett valfritt fält i byggaren så öppnas dess egna inställningar, med fältets namn som rubrik och texten ”Customize how this field appears on the form.”

   Inställning	Det här gör den
   Label	Formuleringen som kunden läser. Det är den inställning som butiksägare ändrar mest.
   Hide label	Behåller fältet men tar bort etiketten ovanför.
   Placeholder	Den grå exempeltexten i den tomma rutan. Använd den för önskat format – ”e.g. 500 units” är bättre än en tom ruta.
   Help text	En rad under fältet, för sådant som är för långt för en platshållare.
   Type	Vilken typ av fält det är, och vad kunden kan skriva i det.
   Required	Formuläret kan inte skickas utan det. Be om så få obligatoriska fält som du kan leva med.
   Options / Add option	Valen i en rullgardinslista, en radiogrupp eller en kryssrutegrupp.
   Choose default value	Vad fältet börjar med när formuläret läses in.
   Limit characters	Slår på Min characters och Max characters.
   Column width	Hur stor del av raden fältet tar, så att två korta fält kan ligga bredvid varandra.
   Custom HTML class	Ett klassnamn för din egen CSS – se Lägg till egen CSS.
   Remove	Tar bort fältet. Finns bara på dina egna fält: de inbyggda kontakt- och adressfälten är skyddade och har ingen Remove.

   

   Klicka på varje element och gör fler inställningar (om det behövs)

   Avsluta med Save changes i fältpanelen, eller Cancel för att förkasta ändringen.

   Caution

   Limit characters valideras medan du skriver: Min characters och Max characters måste var och en vara ett heltal på 0 eller mer, och minimivärdet får inte vara större än maxvärdet. Blir det fel blockerar redigeraren sparandet.

7. Lägg fälten i den ordning du vill ha dem

   Fält ordnas om genom att dra dem. Ta tag i ett fält i draghandtaget längst till vänster på dess rad och släpp det där du vill ha det. Avsnitt har ett eget draghandtag och flyttas på samma sätt.

   Ordningen betyder mer än den verkar: ett formulär som frågar efter leveranspostnummer innan det frågar efter ett namn läser som en databas, inte som ett samtal.

   

   Dra och släpp elementet för att ändra dess position/ordning i offertformuläret

8. Lägg till egna frågor

   Extra info börjar med det som din mall lägger där, och det skiljer sig mellan mallarna. Simple quote form levereras med Quantity och Upload files; Detailed quote form med Project detail och Delivery service; B2B customer form med Message.

   Använd Add element för att lägga till allt annat du behöver – ledtid, leveransdatum, projektreferens.

   Om en grupp frågor hör ihop och inte passar i ett befintligt avsnitt använder du Add section för att skapa ett nytt.

   Danger

   Ett fält är inte valfritt: formuläret måste innehålla ett element vars name innehåller ordet email. Appen blockerar sparandet och säger det – Add an element whose name contains “email”. Otherwise, customers won’t receive the quote email. Utan det når ingenting som du ger offert på någonsin kunden.

   

   Klicka på Add element för att lägga till fler egna fält i offertformuläret

   

9. Utforma formuläret

   Style visar den förinställning som ditt formulär använder, med en knapp Change som öppnar resten. Förinställningarna är Material filled, Classic, Flat, Flat round, Classic round, Line, Line round och Material outlined – var och en visas som en liten bild av inmatningsfältet, så välj efter ögonmått snarare än efter namn.

   Bredvid finns Match theme styling if possible. Markera den så lånar formuläret i stället ditt temas egna typsnitt och inmatningsfält, vilket oftast är den kortaste vägen till ett formulär som inte ser påklistrat ut. Appen noterar att ”Theme styling applies on your storefront and is not shown in this preview”, så bedöm den inställningen i butiken, inte här.

   Customize text anger Font style, Title bar font size och Title bar font weight. Customize form color anger de enskilda färgerna – Title bar color, Title bar background, Color, Background color, Border color, Button color, Button background color, Button border och Quote popup primary color.

   

   Alla detaljer: Anpassa efter ditt tema.

10. Läs igenom formuläret i Preview

    Panelen Preview finns bredvid redigeraren och ritas om medan du arbetar. Två reglage i dess verktygsfält är värda att använda innan du sparar:

    • Kundlägesknappen, som växlar förhandsvisningen mellan Guest och Logged-in – de ser olika formulär.
    • Växlingen mellan dator och mobil, eftersom ett långt formulär är något helt annat på en telefon.

11. Spara och testa själv

    Ändra något så visas Shopifys sparfält med Save och Discard changes. Klicka på Save. Om ett fält fortfarande har ett valideringsfel vägrar redigeraren och säger ”Please resolve validation errors before saving.” – åtgärda det fält den nämner och spara igen.

    Gå sedan till din butik och skicka en riktig testförfrågan. Kontrollera att den kommer fram i Quote list med allt du förväntade dig.

    

    Formuläret i butiken, med Quote form appearance inställd på Multiple step.

Note

Mallen anger din utgångspunkt, inte ditt tak. Allt som mallen tar med kan redigeras eller tas bort, och allt den utelämnar kan läggas till med Add element eller Add section. Kom bara ihåg att ett senare mallbyte är en omstart snarare än en redigering – det ersätter den fältlista du har byggt.

Caution

Skicka alltid en testförfrågan själv innan du går live. Det är det enda sättet att bekräfta att fälten, e-postmeddelandet och offertposten stämmer överens.

Var resten av inställningarna finns

Fliken Quote form gäller bara frågorna. Flera saker som butiksägare letar efter här finns på de andra flikarna i samma redigerare:

Det du vill ha	Flik	Det du hittar
Formuläret som en sida eller i steg	Quote cart page	Quote form appearance – ”Controls how the quote form looks on the quote cart page” – inställd på Multiple step eller Single page.
Vad produktraderna visar	Quote cart page	Product list columns – ”The product details shown as columns in the customer's quote cart” – se Offererad produktgrupp.
Låta kunder gruppera produkter	Quote cart page	Enable Quote Sections – ”Lets customers group the products in their quote cart into named sections” – se Offererad produktgrupp.
Knappens formulering och placering	Button & widget	Knapptext, klickåtgärd, knappens placering och vem som kan se den.
Vad som händer efter att formuläret har skickats	Success message	Tackformuleringen och Redirect to custom URL.

Note

Redigeraren varnar själv för detta om du försöker byta flik mitt i en redigering: ”Save your changes before switching tabs to avoid losing them.”

Nästa steg

• Kunduppgiftsfält – finjustera vad du frågar efter
• Offererad produktgrupp – produktkolumner och offertsektioner på sidan Quote cart
• Lägg till reCAPTCHA – skydda formuläret mot skräppost
• Bygg ett B2B-formulär – mallen för företagskunder