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

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

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

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

Her kan man nu vælge hvilken On-premise CRM version virksomheden bruger.

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

Du kan se på billedet nedenfor, hvor det skal indsættes.

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”).

Når du klikker, kommer der kode frem. Du skal have det ID der står efter.

Du skal finde ID for begge de to felter du skal bruge.

I vores eksempel har vi følgende ID:

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”);
}
});
});

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.