Designa ditt kontaktformulär

När du har lagt till ett kontaktformulär kan du anpassa hur det ser ut. Den här guiden visar hur du ändrar stil, färger och layout på webbplatsens formulär.

Formulärblocket inkluderar olika designstilar för formulär som du kan välja mellan:

1. Välj Listvy högst upp i vänstra hörnet i redigeraren. Det är ikonen som ser ut som tre horisontella linjer ovanför varandra.
2. Hitta Formulärblocket här och klicka på det:

3. I blockinställningarna i den högra sidopanelen klickar du på fliken Stilar (representeras av en ikon med en svart och vit cirkel):

4. Välj en stil:
   • Standard visar fältnamnen utanför inmatningsfälten utan animering.
   • Animerad visar fältnamnen inuti inmatningsfälten, en kort animering och markerar även fältet som besökaren klickar på.
   • Kontur visar filnamnen inuti inmatningsfälten, en kort animering samt en kontur runt inställningarna för formulärblock hela tiden.
5. Klicka på knappen ”Spara” högst upp på skärmen.

Platshållartext är exempeltext som kan visas i ett formulärfält innan besökaren klickar på det, och som sedan försvinner när besökaren klickar för att börja skriva in sin egen text. Det kan vara användbart att visa dina besökare ett exempel på vilken typ av innehåll du förväntar dig att de ska skriva in i formuläret.

Så här lägger du till platshållartext i ett kontaktformulär:

1. Klicka på valfritt fält i ditt formulär.
2. Öppna blockinställningar i sidopanelen.
3. Bläddra ner till inställningen ”Platshållartext”.
4. Ange platshållartexten i den tillhandahållna rutan. Texten visas sedan i formulärfältet.
5. Klicka på knappen ”Spara” högst upp på skärmen.

Som standard fyller fälten i ett formulär bredden på formulärets behållare. Gör så här för att ändra bredden på enskilda fält:

1. Klicka på valfritt fält i ditt formulär.
2. Öppna blockinställningar i sidopanelen.
3. Bläddra ner till inställningen Bredd och ange bredden till 25 %, 50 %, 75 % eller 100 %.
   • Om du vill att två fält ska visas sida vid sida anger du 50 % för vart och ett. Om det finns plats kan flera fält visas på en rad.
4. Klicka på knappen ”Spara” högst upp på skärmen.

Du kan välja att redigera hur färg och text visas för varje enskilt formulärfält, eller så kan du ställa in så att varje formulärfält använder samma färg- och textinställningar.

När du klickar på ett enskilt formulärfält inkluderar blockinställningarna reglaget ”Synkronisera fältstilar”. Om detta är inställt på PÅ påverkar ändringarna som du gör i detta fält alla fält. Ställ in reglaget på AV om du bara vill ändra inställningarna för det fältet:

Du kan synkronisera följande ändringar i alla fält för att säkerställa en konsekvent visuell upplevelse i hela formuläret:

• Färg: anger färger för:
  • Etikettext: texten som visas ovanför formulärfältet.
  • Fälttext: den (valfria) platshållartexten samt inmatningstexten i ett fält.
  • Fältbakgrund: bakgrunden till inmatningssektionen i ett formulärfält.
  • Ram: ramen runt formulärfältet.
• Stilar för inmatningsfält: Ange textstorlek, radhöjd och ramstilar för fältet.
• Etikettstilar: Ange textstorlek och radhöjd för fältetiketter.

Gör så här för att justera färgerna i ditt formulär:

1. Öppna listvyn och lokalisera formulärblocket och de enskilda fälten i det:

2. När det övergripande formulärblocket är markerat öppnar du blockinställningarna i sidopanelen och klickar sedan på fliken Stilar (ikonen med en svarta och vita cirkel).
3. Med färginställningarnakan du bestämma färgen på texten i formuläret, bakgrundsfärgen och färgen på länkar som används i formuläret:

4. Därefter klickar du på ett enskilt formulärfält och öppnar blockinställningarna igen.
5. Här kan du styra följande färger för varje enskilt formulärfält:
   • Etikettext: texten som visas ovanför formulärfältet.
   • Fälttext: den (valfria) platshållartexten samt inmatningstexten i ett fält.
   • Fältbakgrund: bakgrunden till inmatningssektionen i ett formulärfält.
   • Ram: ramen runt formulärfältet.
6. Aktivera reglaget ”Synkronisera fältstilar” för att tillämpa ändringarna på alla fält, eller inaktivera reglaget för att kontrollera varje fält individuellt.
7. Klicka på knappen ”Spara” högst upp på skärmen.