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 et andet felt eller værdi vælges.
Se længere nede i vores eksempel.

For at oprette Conditional Logic Form i ClickDimensions skal du bruge disse elementer:

  • Webform
  • Lidt CSS
  • Felt ID
  • jQuery script

Start med at se vores eksempel:

Du kan se dette eksempel live her [åbner på en ny side]

Her er vores webform. Der er kun ét felt synligt med to valgmuligheder.Conditional Logic Form

Vælger man første valgmulighed “Online” så sker der ingenting.
Conditional Logic Form

Vælger man den anden valgmulighed “”On-Premise” så kommer der nye muligheder frem.
Conditional Logic Form

Her kan man nu vælge hvilken On-premise CRM version virksomheden bruger.
Conditional Logic Form
Du kan se dette eksempel live her [åbner på en ny side]

 

Guide til Conditional Logic Form:

STEP 1
Du skal starte med at lave din webform i ClickDimensions. Det er helt som du plejer, indsæt de felter du skal bruge, gem og publisher.

STEP 2
Når din webform er opsat skal du tilføje en stump kode til CSS. Åben Code Editor og tilføj dette:
Kopier alt herunder og indsæt i jeres Code Editor – i CSS

/*— Dette skal tilføjes i CSS. Skjuler feltet der skal komme frem – For A Fact —*/
.hideMe {
visibility: hidden;
}

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

Du kan se på billedet hvor det skal indsættes.
Conditional Logic Form Code Editor

STEP 3
Find ID på dine Form felter
Du skal brug et ID element fra de forskellige felter på formen, som både skal gemmes og komme frem, samt ID fra det felt, som skal bestemme om det andet felt skal blive synlig.
I vores eksempel skal vi altså bruge et ID for feltet: CRM løsning og et ID for feltet: CRM version

Den nemmeste måde at finde find et ID på et felt er at højre-klikke med musen på feltet. Så får du muligheden for at vælge “Inspicér Element”
(Der findes også andre værktøj til dette. Vi bruger eksempelvis “Firebug”)
Conditional Logic Form Inspicer element
Når du klikker kommer der kode frem. Du skal have det ID der står efter <select id= Conditional Logic Form ID

Du skal finde ID for begge de to felter du skal bruge.
I vores eksempel har vi følgende ID. Du kan se om du kan finde dem ved at teste overstående på vores eksempel – Du kan se dette eksempel live her [åbner på en ny side]

  • CRM løsning: f_6fcb74f72adae51180cf000c29bed951
  • CRM version: f_20e6a2a12adae51180cf000c29bed951

STEP 4
jQuery script – Du skal nu have indsat dit jQuery script i Code Editor. (Du kan se på billedet længere oppe hvor det er)

Kopier vores script – opdater med jeres egne ID og indsæt det så i Code Editor.
BEMÆRK – Du skal indsætte ID fra feltet der skal skjules 3 steder – og ID fra feltet der skal bestemme om noget skal være synlig eller ej 2 steder.

Hvis du har valgt en Liste, som I vores eksempel. Så skal du også huske at opdatere med mulighederne fra jeres egen liste!
I vores script er valgt værdien: on-premise (Det skal opdateres med jeres værdi)

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

/*—jQuery custom script inklusiv start jQuery og ID – For A Fact—*/
clickd_jquery(document).ready(function(){
clickd_jquery(“#f_20e6a2a12adae51180cf000c29bed951”).parent().parent().parent().addClass(“hideMe”);
clickd_jquery(“#f_6fcb74f72adae51180cf000c29bed951”).change(function() {
if(clickd_jquery(“#f_6fcb74f72adae51180cf000c29bed951″).val() ==”on-premise”){
clickd_jquery(“#f_20e6a2a12adae51180cf000c29bed951”).parent().parent().parent().removeClass(“hideMe”);
}
else{
clickd_jquery(“#f_20e6a2a12adae51180cf000c29bed951”).parent().parent().parent().addClass(“hideMe”);
}
});
});

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

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

Gem og din Conditional Logic Form 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