+45 29 72 61 17

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.

 

 

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 alt sammen tilpasset med CSS, og du kan læse, hvordan du gør det i vores blogindlæg Style webform i ClickDimensions.

 

 

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 “cont_xxxxx“>”

Ikon indeni feltet: Så skal du bruge ID fra “

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 os, 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;
}

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.