Designa formuläret

Inställningarna under Appearance i Sami B2B Onboarding ändrar hur hela formuläret ser ut: dess typsnitt, storlek, bredd, fältstil och färger. De gäller ett formulär, så varje formulär kan ha sitt eget utseende, och de ändrar aldrig ditt tema.

Öppna inställningarna under Appearance

1. Öppna formuläret

   Gå till Forms och klicka på Edit bredvid formuläret. Byggaren öppnas.

2. Öppna Appearance

   Klicka på Appearance i listen till vänster. Panelen listar varje inställning nedan, och förhandsvisningen i mitten ändras medan du ändrar dem.

   

   Varje inställning under Appearance ändrar förhandsvisningen direkt.

3. Spara

   När formuläret ser rätt ut klickar du på Save i sparfältet. Om formuläret är publicerat ser köpare det nya utseendet nästa gång de öppnar det.

Inställningar under Appearance

Inställning	Vad den ändrar	Standard
Font	Typsnittet för hela formuläret. Öppnar panelen Select font.	Theme default
Font size scale	Storleken på all formulärtext, från 80 % till 130 % av ditt temas storlek, i steg om 5 %.	100%
Width	Formulärets största storlek, i px (320 till 1200) eller % av utrymmet det sitter i (30 till 100). Formuläret är centrerat och blir smalare på små skärmar.	640 px
Layout	Default placerar fälten rakt på sidan. Boxed lägger formuläret i ett eget kort, med utfyllnad och en kantlinje.	Default
Style	Utseendet på varje fältruta. Se Fältstilar.	Classic
Field spacing	Utrymmet mellan fälten: Comfortable eller Compact.	Comfortable
Color scheme	Formulärets bakgrunds-, text- och knappfärger. Se Färger.	Default
CSS class	Lägger till ett eget klassnamn på formuläret, så att stilar i ditt tema kan rikta in sig på det, till exempel wholesale-form.	Tom

När du växlar Width mellan px och % börjar den om på 640 px eller 100 %.

Välj ett typsnitt

1. Öppna typsnittslistan

   Klicka på rutan Font under Appearance. Panelen Select font öppnas.

2. Hitta ett typsnitt

   Skriv i Search eller scrolla. Listan har två grupper:

   • System fonts: Theme default, typsnittet som ditt tema redan använder, sedan System UI, Helvetica, Arial, Georgia, Times New Roman och Monospace. Inget extra laddas för dessa.
   • Other fonts: nästan 1 000 webbtypsnitt. Varje typsnitt visas i sin egen stil. De laddas från Google Fonts i din butik, vilket kan göra sidan lite långsammare att ladda.

3. Välj det och dess vikt

   Klicka på ett typsnitt. Förhandsvisningen ändras direkt. Om typsnittet finns i flera vikter väljer du en i listan Weight längst ned i panelen, till exempel Regular, Bold eller Italic. Klicka på Done.

   Noteringen under Font bekräftar vad du valde, till exempel Bold. Loads from Google Fonts on the storefront.

Fältstilar

Klicka på rutan Style för att se alla åtta stilar, var och en ritad som ett exempelfält Company name. Klicka på en för att tillämpa den på varje fält i formuläret.

Stil	Hur ett fält ser ut
Material filled	En grå ruta med etiketten inuti, överst.
Material outlined	En ruta med kantlinje där etiketten sitter på dess övre kant.
Classic	En mjuk grå ruta med en lätt skugga och rundade hörn. Standard.
Classic rounded	Classic, med helt runda rutor på en rad.
Flat	En grå ruta med fyrkantiga hörn och ingen skugga.
Flat rounded	Flat, med helt runda rutor på en rad.
Line	Bara en linje under svaret.
Line rounded	Ser likadan ut som Line: en understrykning har inga hörn att runda av.

I de rundade stilarna behåller rutor som rymmer flera rader, till exempel Long text, mjukt rundade hörn i stället för att bli helt runda.

Varje kort visar hur ett fält ser ut i den stilen.

Färger

Raden Color scheme visar tio färdiga scheman: Default, Forest Light, Cool Ocean, Matcha Calm, Warm Sand, Blush, Slate, Charcoal, Forest Dark och Midnight. Varje färgprov visar dess bakgrunds-, text- och knappfärger. Klicka på ett för att använda det.

• Default tar sidans egna färger, så formuläret matchar ditt tema. För att ändra de färgerna ändrar du ditt temas inställningar.
• Alla andra scheman målar formulärets egen bakgrund bakom det. Knappar och stegmarkörer tar schemats knappfärg.

Skapa egna färger

1. Öppna schemat

   Klicka på Edit scheme under färgproven. Panelen Editing öppnas för schemat du valde, till exempel Editing Warm Sand.

2. Ändra färgerna

   Klicka på en färg för att öppna färgväljaren. Dra i kvadraten och färgremsorna, skriv en hexkod eller använd pipetten för att välja en färg från skärmen om din webbläsare erbjuder det. Färgerna du kan ställa in:

   Färg	Vad den målar
   Background	Bakom formuläret.
   Text	Etiketter, rubriker och svar.
   Solid button background	Huvudknapparna, till exempel Submit application, och stegmarkörerna.
   Solid button label	Texten på de knapparna.
   Outline button	Kantlinjen på konturknappar, till exempel Back.

   Background, Text och Outline button kan visa Theme color, vilket betyder att formuläret använder ditt temas färg där.

   Så fort du ändrar en färg blir schemat Custom och ett färgprov Custom läggs till i raden. De här färgerna gäller bara det här formuläret. Ditt temas egna färgscheman ändras inte.

   

   Ändra valfri färg så får formuläret ett eget Custom-schema.

3. Stäng eller återställ

   Stäng panelen för att behålla dina färger. För att gå tillbaka till ditt temas färger klickar du på Remove color scheme längst ned i panelen: formuläret återgår till Default.

Lägg till din logotyp

Logotypen sitter i formulärets sidhuvud, ovanför dess rubrik.

1. Öppna sidhuvudet

   Klicka på Elements i listen och klicka sedan på Header överst i listan.

2. Ladda upp logotypen

   Slå på Show store logo, klicka sedan på Upload image och välj filen. Den måste vara en .jpg-, .png- eller .svg-bild på högst 1 MB. En storlek på ungefär 200×60 px passar bäst.

   För att ändra den senare klickar du på Replace image. För att ta bort den klickar du på Remove.

3. Spara

   Klicka på Save i sparfältet.

Kontrollera designen

Förhandsvisningen i byggaren ritar ditt formulär med samma kod som din butik använder, så layouten, fältstilen, avståndet och schemat du ser är det köparna får.

• Använd knapparna Desktop preview och Mobile preview ovanför förhandsvisningen för att kontrollera båda skärmstorlekarna.
• Inställningar du lämnar åt ditt tema, Theme default för typsnittet och Default för färgerna, tar ditt temas typsnitt och färger i butiken. För att se dem klickar du på Preview (ögonknappen) i verktygsfältet. Det öppnar formulärets sida i din butik i en ny flik, så som det senast sparades.

Nästa steg

• Bygg ditt formulär – ställ in varje fälts bredd, etikett och platshållare.
• Efter att köparen skickat in – skriv tackskärmen som köpare ser efter det här formuläret.
• Lägg till ett formulär i din butik – placera det färdiga formuläret på en sida, i en temasektion eller var som helst med HTML.