> For the complete documentation index, see [llms.txt](https://support.emarketeer.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.emarketeer.com/docs/docs_se/guider/guides/forms/ui-overview.md).

# Formuläreditor: UI-översikt

En referensguide till formuläreditorns gränssnitt — flikar, Toolbox, frågetyper och konfigurationsalternativ.

Formuläreditorn har sex flikar: Designer, Preview, Themes, Logic, JSON Editor och Translations. Den här artikeln beskriver vad varje flik gör och vilka frågetyper som finns tillgängliga.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-dedcad922bee9b0a022af0b35b1b51645df3a175%2Fui-overview-form-tabs.png?alt=media" alt="Formuläreditorn med de sex flikarna: Designer, Preview, Themes, Logic, JSON Editor och Translations."></div>

## Designer-fliken

Designer-fliken är där du bygger ditt formulär. Den har tre huvuddelar: Toolbox till vänster, designytan i mitten och Property Grid till höger. Toolbox visar bara ikoner. Håll muspekaren över en ikon för att se frågetypen. Property Grid är stängd tills du klickar på **Survey settings** ovanför designytan, eller markerar en fråga och klickar på en kategoriikon i fältet till höger.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-f2aa72dd1809ce6dba9464a9b8fd4fbcd8e7d2a6%2Fui-overview-designer-tab-overview.png?alt=media" alt="Designer-fliken med Toolbox som ikonkolumn till vänster, designytan i mitten och panelen Property Grid öppen till höger."></div>

### Toolbox

Toolbox listar alla frågetyper och strukturelement du kan lägga till i ditt formulär. Dra ett objekt från Toolbox till designytan, eller klicka på det för att lägga till det längst ned på den aktuella sidan.

### Frågetyper

<details>

<summary>Contact fields</summary>

**Contact Field** Ett enkelradigt inmatningsfält kopplat till ett specifikt fält på kontaktkortet. Använd det när du vill att formulärsvar ska uppdatera respondentens kontaktpost i eMarketeer.

Data som skickas in via ett Contact field sparas både som formulärsvarsdata och som kontaktpostdata. Det skriver över eventuellt befintligt värde på kontaktkortet.

Ett formulär som innehåller ett **Contact field: Email** skapar en ny kontakt eller matchar mot en befintlig när formuläret skickas in.

Contact fields förifyller data från kontaktdatabasen om respondenten är känd — till exempel när hen öppnar formuläret via en personlig länk.

Tillgängliga fält: Email, First Name, Last Name, Salutation, Company, Title, Phone number, Mobile phone, Address 1, Address 2, City, State, Zip code, Country, Note.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-9933cd765f710b43eed36d4e039dc28f610e3279%2FContact-Fields.png?alt=media" alt="Frågetypen Contact fields i designytan."></div>

**Custom Contact Field** Fungerar på samma sätt som Contact Field, men är kopplat till ditt kontos anpassade kontaktfält i stället för standardfälten på kontaktkortet.

</details>

<details>

<summary>Enkelsvarsfrågor</summary>

**Radio button group** Visar en lista med alternativ. Respondenten väljer ett.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-e7528b022cb24eb20052e1439e1af9e586c29cf8%2FRadioButtonGroup.png?alt=media" alt="En radio button group-fråga i designytan."></div>

**Dropdown** En listruta med ett enda val. Användbar när alternativlistan är lång eller när du vill spara utrymme på skärmen.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-dcb50b31a02fc8d73109c6fc6831a7af0db0024e%2Fdropdown%20question.png?alt=media" alt="En dropdown-fråga i designytan."></div>

**Yes/No (Boolean)** En växlare som returnerar sant eller falskt. Visas som en switch, ett par radioknappar eller en kryssruta beroende på temainställningarna.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-7c40bac3ffae7bf00354a4131b40caa274c2532a%2FBoolean.png?alt=media" alt="En Yes/No (Boolean)-fråga i designytan."></div>

</details>

<details>

<summary>Flersvarsfrågor</summary>

**Checkboxes** Visar en lista med alternativ. Respondenten kan välja mer än ett.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-07e7fbe13555e54f64b7cc6be3f68ea6ebb047c9%2FCheckboxes.png?alt=media" alt="En checkboxes-fråga i designytan."></div>

**Multi-select dropdown** En listruta som tillåter flera val.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-b2396f3327a3381fa9e4f273534fa1ca896298f7%2FMulti-select-dropdown.png?alt=media" alt="En multi-select dropdown-fråga i designytan."></div>

</details>

<details>

<summary>Betyg och rangordning</summary>

**Rating scale** En numerisk skala som respondenten använder för att betygsätta något. Du kan ersätta de numeriska etiketterna med stjärnor eller emoji-ikoner.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-a3d59757163c174868e9a9fe64a4bc09d5a1b007%2FRatingQuestions.png?alt=media" alt="En rating scale-fråga i designytan."></div>

**Ranking** En lista med dra-och-släpp-funktionalitet där respondenten ordnar alternativ i önskad prioritetsordning.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-71486f1cf905f8bd19817948dfd9081d88fa54de%2FRanking.gif?alt=media" alt="En ranking-fråga i designytan som visar dra-och-släpp-omordning."></div>

</details>

<details>

<summary>Textinmatning</summary>

**Single-line input** Ett enkelradigt textfält. Accepterar även siffror och datum.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-2ad410b9cce250c0ed3bf4c7ee5ca65e333e1faf%2FSingleLineInput.png?alt=media" alt="En single-line input-fråga i designytan."></div>

**Long text** Ett ändringsbart textfält med flera rader för längre svar.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-51398b1b2ea42c51879ab5faa79fb78bbd2e35c9%2FLongText.png?alt=media" alt="En long text-fråga i designytan."></div>

**Multiple text boxes** Flera enkelradiga fält grupperade tillsammans. Användbart när du behöver ett antal korta svar under en fråga.

</details>

<details>

<summary>Image picker</summary>

Visar en serie bilder. Respondenten klickar på en (eller flera, om det är konfigurerat) för att välja den. Varje alternativ har ett kopplat värde.

</details>

<details>

<summary>Matrisfrågor</summary>

**Single-select matrix** Ett rutnät med rader och kolumner. Varje rad är ett påstående eller ett objekt; respondenten väljer ett kolumnalternativ per rad med radioknappar.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-856fe700899a33f23f517f439476be56e75bce75%2FSingleSelectMatrix.png?alt=media" alt="En single-select matrix-fråga i designytan."></div>

</details>

<details>

<summary>Presentationselement</summary>

**HTML** Ett block med formaterad text som du skriver direkt i editorn. Använd det för instruktioner, rubriker mellan frågegrupper eller annat icke-interaktivt innehåll.

**Image** Bäddar in en statisk bild eller video i formuläret. Respondenten kan inte interagera med den.

**Expression (read-only)** Visar ett beräknat värde — en summa, ett medelvärde eller en sammansättning av andra svar. Användbart på den sista sidan för att sammanfatta vad respondenten har skickat in.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-83a55a7906fd234d5617c9395e4b89af68147616%2FExpression.gif?alt=media" alt="En expression-fråga i designytan som visar ett beräknat värde som uppdateras i realtid."></div>

</details>

<details>

<summary>Strukturelement</summary>

**Panel** En behållare som grupperar frågor visuellt. Paneler kan göras hopfällbara och kan ha en egen rubrik och beskrivning.

**Dynamic panel** En upprepande panelmall. Respondenten kan lägga till eller ta bort panelinstanser, vilket gör det användbart för poster med variabel längd, till exempel flera kontakter eller orderrader.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-bc7e336c59102d2461336420a6ed61b17958dcb8%2FDynamicPanel.png?alt=media" alt="Ett dynamic panel-element i designytan med flera panelinstanser."></div>

</details>

<details>

<summary>Consent</summary>

**Consent** Lagrar samtycke på den identifierade kontakten. Använd listan **Consent Type** för att ange syftet: **Store & Process** eller **Marketing**. Consent-frågor är inte obligatoriska som standard — gör dem obligatoriska om kontakten måste ge samtycke innan formuläret skickas in.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-eaabc41fb3a11938871f386090df37e10ff8daf6%2Fconsent.png?alt=media" alt="Två Consent-frågor i designytan, en för varje syfte — Store &#x26; Process och Marketing."></div>

</details>

<details>

<summary>Captcha</summary>

**Captcha** Lägger till botskydd i formuläret. Captchan löses i bakgrunden, så respondenterna ser den inte i det renderade formuläret. I Designer visas den som en platshållare. Captchan är obligatorisk, och ett formulär kan inte sparas utan den.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-b346ca70e2b8b4ef63e778aec49837b0dd991b63%2Fcaptcha.png?alt=media" alt="En Captcha-fråga i designytan."></div>

</details>

### Lägga till en fråga

För att lägga till en fråga drar du den från Toolbox till designytan. Du kan också klicka på knappen **Add Question** längst ned på en sida för att infoga ett enkelradigt inmatningsfält. Klicka på ellips-ikonen bredvid knappen för att välja en annan typ innan du infogar.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-ce595512d6d6b305c95d697bc93c185ecf02b62f%2Fui-overview-add-question-button.png?alt=media" alt="Knappen Add Question längst ned på en sida, med frågetypsmenyn öppen från ellips-ikonen."></div>

### Redigering direkt i designytan

När du klickar på en fråga i designytan visas inline-redigeringskontroller direkt på frågan. Du kan redigera frågetexten, sortera om alternativ, duplicera frågan, ta bort den eller markera den som obligatorisk — utan att öppna Property Grid.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-44c934f512bbeb072005079286e22bcb459eb1f9%2FInPlaceEditing.png?alt=media" alt="En fråga i designytan med inline-redigeringskontroller synliga."></div>

### Property Grid

Property Grid på höger sida av editorn visar konfigurationsalternativ för den valda frågan, sidan eller formuläret. Alternativen är grupperade i kategorier.

Om du vill ange ett standardsvar för en fråga markerar du den, öppnar kategorin **Data** i Property Grid och klickar på **Set Default Answer**.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-632afad98be7eae320b30fb4f5d0edd022cc49b3%2FDefaultAnswer.png?alt=media" alt="Property Grid med kategorin Data öppen och alternativet Set Default Answer synligt."></div>

### Sidhantering

Ett formulär kan ha flera sidor. Lägg till en sida genom att markera formuläret, öppna kategorin **Survey** i Property Grid, gå till **Pages** och klicka på **Add new page**. Du kan också dra en fråga till skelett-sidan längst ned i designytan — det skapar automatiskt en ny sida.

### Ändra frågetyp

Om du vill ändra en fråga till en annan typ använder du typväljaren i frågans verktygsfält i designytan. Vissa typbyten medför att data försvinner — till exempel raderas alternativlistan om du konverterar en Dropdown till ett Single-line input. Ångra är tillgängligt om du vill återgå till den tidigare typen.

## Preview-fliken

Preview-fliken visar formuläret som respondenten ser det. Fyll i det och skicka in för att se hur svarsdata registreras. Efter inskickning visas resultaten i en tabell eller som rå JSON. Klicka på **Preview Survey Again** för att starta om.

Använd enhetsväljaren för att förhandsgranska på olika skärmstorlekar och orienteringsknappen för att växla mellan stående och liggande format.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-05b17f6af1113568037495003f7c128d4ba4840f%2FPreviewTab.png?alt=media" alt="Preview-fliken med enhetsväljaren och orienteringsknappen synliga."></div>

## Themes-fliken

Med Themes-fliken kan du ändra formulärets utseende — färger, typsnitt, storlekar, hörnavrundning, skuggor och andra visuella egenskaper.

Du kan exportera ett anpassat tema som en JSON-fil och importera det till ett annat formulär för att återanvända samma stil.

För en komplett genomgång, se [Styla ditt formulär](/docs/docs_se/guider/guides/forms/styling-your-form.md).

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-af79604d13c011fbc1f85247e9e0e470ff327a7a%2FThemesTab.png?alt=media" alt="Themes-fliken med stilkontrollerna synliga."></div>

## Logic-fliken

Logic-fliken är där du definierar villkorliga regler som styr formulärets beteende — till exempel att visa en fråga bara när ett tidigare svar uppfyller vissa kriterier.

### Lägga till en regel

Klicka på **Add New Rule**. Varje regel har ett villkor (om) och en eller flera åtgärder (då).

**Villkor** — välj en fråga och en logisk operation (är lika med, är tom, innehåller och så vidare). Kombinera flera villkor med AND eller OR. Använd **Manual Entry** för att skriva ett uttryck direkt.

**Åtgärder** — vad som händer när villkoret är sant. Tillgängliga åtgärder:

* Visa eller dölj en sida eller fråga
* Aktivera eller inaktivera en sida eller fråga
* Markera en fråga som obligatorisk
* Slutför formuläret
* Ange en frågas svar
* Kopiera ett svar från en fråga till en annan
* Hoppa till en specifik fråga
* Kör ett anpassat uttryck
* Ange innehållet på bekräftelsesidan

Om du vill redigera en regel klickar du på den för att expandera den, gör dina ändringar och klickar på **Done**. Använd filtren **All Questions** och **All Action Types** för att begränsa listan när ett formulär har många regler.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-43a2f73e1bd4b772c2f8472d3b46feae0668af03%2FAddRule.png?alt=media" alt="Logic-fliken med en expanderad regel som visar villkors- och åtgärdseditorerna."></div>

## JSON Editor-fliken

JSON Editor-fliken visar formulärets råa JSON-konfiguration. Du kan redigera den direkt, men för de flesta ändringar är Designer-fliken och Property Grid enklare att använda.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-c8404a788e952e61be63c9ebb2e92bd85c130ec9%2FJSONTab.png?alt=media" alt="JSON Editor-fliken med ett exempel på en formulärkonfiguration."></div>

## Translations-fliken

Translations-fliken listar alla översättningsbara strängar i ditt formulär. Använd den för att ange text på flera språk så att respondenter kan välja mellan dem.

**Lägga till ett språk** — öppna panelen Languages till höger och klicka på plusikonen för att välja ett språk från listan.

**Filtrering** — använd filtret **All Pages** för att visa strängar från en specifik sida. Aktivera **Used Strings Only** för att dölja strängar som inte används i formuläret.

**Import och export** — använd verktygsfältsknapparna för att importera eller exportera översättningar som en CSV-fil.

<div align="left" data-with-frame="true"><img src="https://2555292243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FicfGEyRadiE4k7sV4O4o%2Fuploads%2Fgit-blob-7b81ad4a112d6411a299fd569c98631b64e35a25%2FTranslationsTab.png?alt=media" alt="Translations-fliken med panelen för språkinställningar och strängtabellen synliga."></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://support.emarketeer.com/docs/docs_se/guider/guides/forms/ui-overview.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
