Kategori arkiver: Web forms

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.

Style webform i ClickDimensions

Formål – Hvad vil det sige at style webforms i ClickDimensions? Når du opretter en helt ny webfom i ClickDimensions, så er den visuelt opsat til at se ud, som ClickDimensions har bestemt på forhånd. Hvis du gerne vil have en webform til at passe ind i jeres eget design, så har du mulighed for… Læs mere

Conditional Logic Form

Formål – hvad bruger man Conditional Logic Form til? Conditional Logic Form er helt almindelige webforms fra ClickDimensions, hvor vi tilføjer forskellige logiske funktioner. Det mest almindelige eksempel er at vise bestemte valgmuligheder baseret på andre valg. Med en webform fra ClickDImensions vil det være at skjule et form felt og kun vise det hvis… Læs mere

Subscription center

Formål – hvad bruger man et Subscription center til? Et Subscription center – eller Abonnements center, er en liste med valgmuligheder. Alle valgmuligheder er bestemte emner/områder der kan til-vælges og fravælges. Ved at lade modtageren selv bestemme, hvilke emner de vil være tilmeldt, øger virksomheden muligheden for at kunne kommunikere relevant til hver enkelt modtager.… Læs mere

Kontakt

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