Webform med ikoner

Formål – hvad er webform med ikoner?

Det er en ekstra ting du kan style dine webforms med.

Læs evt. vores blog indlæg Style webform i ClickDimensions hvis du vil vide mere om mulighederne for generelt at tilpasse design på ClickDimensions webforms.

For at oprette en webform med ikoner i ClickDimensions skal du bruge disse elementer:

  • Webform
  • Felt ID
  • Lidt CSS

Start med at se vores eksempel:

Sådan ser en helt almindelig webform ud i ClickDimensions hvis du blot bruger standard design.
CSS ClickDimensions webform standard

På den næste billede, har vi indsat forskellige ikoner ud for de forskellige indholdsområder.
Som du kan se på billedet, så kan du både indsætte et ikon ved siden af tekst feltet eller inden i selve tekst feltet.
Du kan selvfølgelig også tilpasse hvor teksten, der indtastes, skal starte – så denne er indrykket i forhold til billedet.
Skygge effekten, ændring af submit knap og de runde hjørner – det er altsammen tilpasset med CSS – og du kan læse hvordan du gør det i vores blog indlæg Style webform i ClickDimensions

Webform med ikoner

 

Guide til at indsætte ikoner i  webforms

Step 1
Du skal have lavet den webform du vil bruge i ClickDimensions. Indsat alle felter, publiceret og gemt

Step 2
Du skal finde ID for det felt, hvor du vil indsætte et ikon.
Læs vores blog indlæg Conditional Logic Form hvordan du finder et felts ID

Alt efter om dit ikon skal stå udenfor feltet (som i vores eksempel ovenover på Email, First name og Company) eller indenfor i feltet (som på Mobilephone og Jobtitle)er der forskel på hvilket ID du skal bruge.

  • Ikon udenfor feltet: Så skal du bruge ID fra <Div id=”cont_xxxxx“>
  • Ikon indeni feltet: Så skal du bruge ID fra <Input id=”xxxxx“>

Step 3
Indsæt CSS koden via Code editor.
Du kan brug denne css kode – du skal blot opdatere med din egen ID

  • background: Biledplaceringen af det ikon du vil indsætte
    Her i vores css kode er baggrunden sat til Hvid #FFFFFF – den kan du opdatere til en anden farve.
  • background-repeat: Sørger for at dit ikon kun vises én gang. (skal ikke ændres!)
  • text-indent: Opdaterer hvor langt fra kanten til venstre, at inputs feltet skal placeres.
  • background-position: Bestemer hvor ikonet placeres.

Alt efter om du har ikonet udenfor eller indenfor skal der muligvis tilføjes ekstra css i dit tilfælde?
CSS koden herunder er taget fra eksemplet til “Email feltet” – kontakt For A Fact hvis du vil have support til at tilpasse det for jeres webform.

Kopier alt herunder og indsæt i jeres Code Editor – i CSS

/*— FOR A FACT – INSERT IMAGE TO INPUT FIELD —*/
/*— Email field—*/
#cont_id_f_9e417700b9dfe41180ba000c29bed947{
background: url(https://app-eu.clickdimensions.com/blob/forafactdk-abcbj/files/emailb2a6178c.png) #FFFFFF !important;
background-repeat: no-repeat !important;
text-indent: 25px !important;
background-position: left center !important;
}

Kopier alt ovenover og indsæt i jeres Code Editor – i CSS

STEP 5
Klik på “Refresh” i Code Editor – du skal gerne se dine ikoner med det samme.

Gem og din webform med ikoner er nu klar.

Download denne side som PDF guide?
Udfyld formen, så har du den i din indbakke når du skal igang med at lave din egen webform.

Skriv et svar

Kontakt

For A Fact
Nørregade 7 B, 1165 København K
Email: Info@Forafact.dk
Telefon: +45 2972 6117