Unique Dynamic form - according to buyer journey | Adobe Higher Education
Skip to main content
Charles_THIERY
Charles_THIERY
Level 2
October 27, 2017
Frage

Unique Dynamic form - according to buyer journey

  • October 27, 2017
  • 6 Antworten
  • 4573 Ansichten

Hello,

I want to build a form strategy which correspond to the progress of the lead.

I want to know if it's possible to build a unique dynamic form as described below:

(* mandatory)

1st time people reach this form:

*email:

*first name:

*last name:

*company:

*company size:

*country:

"Download" button

2nd time :

Hello Charles, need additional information:

*Industry:

*phone:

"click here to update all my info" => add fields from step 1 with pre-filled values + the ones just above

"Download" button

"Not me" => show only fields from step 1 without pre-filled values

3rd time :

Hello Charles, need additional information:

*Project timeline:

*Budget:

"click here to update all my info" => add fields from step 1 and 2 with pre-filled values + the ones just above

"Download" button

"Not me" => show only fields from step 1 without pre-filled values

4th time:

Hello Charles

"click here to update my info" => show all fields from steps 1, 2, 3 with pre-filled values

"Download" button

"Not me" => show only fields from step 1 without pre-filled values

In addition to that, I want that on step 2, 3, 4 that if the last filled out form has been filled out more than 6 months then show all fields already filled + the 2 new ones corresponding to the progress.

I think if I set fieldset and a specific field attached to each one could help for making the progress display right. However I don't see how to make the features "click here to update my info", "not me", and the "6 months" triggers working. Maybe is not the right way and I should make different forms and activate then based on Javascript checking?

@@Sanford Whiteman​, I've seen some of your posts and it sounds you may know a solution to help.

BR,

Charles

Dieses Thema wurde für Antworten geschlossen.

6 Antworten

Josh_Hill13
Josh_Hill13
Level 10
October 27, 2017

Progressive forms should help here, but don't entirely address your needs. You'll have to custom code this.

SanfordWhiteman
SanfordWhiteman
Level 10
October 27, 2017

Like Josh says, this isn't going to work with ProgPro alone. You'll need to augment it with some JS & CSS. It's not difficult, but not a 1- or 2-liner, either.

The main headache is the Forms 2.0 API doesn't offer direct programmatic access to the state of the Progressive Profiling block: there's no method like getProgProPage() to know whether the lead is showing the 1st, 2nd, or 3rd page of ProgPro fields. Instead, you need to inspect the DOM itself (on whenReady()) and count the current fields. In essence, you're restating the ProgPro rules again in JavaScript (this doesn't mean you don't also need the native ProgPro functionality, though)

From there, you can use that result to show/hide the always-on (non-ProgPro) fields before revealing the form itself.

Alternately, you can work directly with the form descriptor. More pointers are in this post.

Charles_THIERY
Charles_THIERYAutor
Level 2
October 30, 2017

Hello,

Thank you for your help.

I've sticked to the solution with different fieldsets, however I have 2 issues when I want to push  "progress values" when the form is submitted.

Indeed with the code below, instead of pushing additional values, it keeps only these ones. 2nd issue, the features "required field" are bypassed due to this code in bold...

Do you know how to fix it please?

MktoForms2.whenReady(function (form) {

  //listen for the validate event

    form.onValidate(function() {

        // Get the values

        var vals = form.vals();

      //Check if the honeypot field is empty

        if (vals.homepage == "") {

            // Not a spam bot! Submit the form

//            if (vals.eMEAFormsection3 == "ALL" ) {

//                form.vals({ "eMEAFormsection3":"1"});

//            }

//            if (vals.eMEAFormsection2 == "ALL" ) {

//                form.vals({ "eMEAFormsection2":"1"});

//            }

//            if (vals.eMEAFormsection1 == "ALL" ) {

//                form.vals({ "eMEAFormsection1":"1"});

//            }

//         

// if (vals.eMEAFormsection1 == "1" && vals.eMEAFormsection2 == "1"){

//                form.vals({ "eMEAFormsection3":"1"});        

//            }

//            else if (vals.eMEAFormsection1 == "1" && vals.eMEAFormsection2 == "" ){

//                form.vals({ "eMEAFormsection2":"1"});         

//            }

//          else {

// form.vals({ "eMEAFormsection1":"1"});               

//            }

            form.submittable(true);

        }

        else {

           // This is a spam bot! Don't submit the form

           form.submittable(false);

        }

    });

});

SanfordWhiteman
SanfordWhiteman
Level 10
October 30, 2017

I won't be sure of what you're trying to do here unless I see the page with the actual form.

But the reason you're bypassing native validation is because you're failing to check for it.

form.onValidate(function(native) {
  if (!native) return;
 // etc...

Robb_Barrett
Robb_Barrett
Level 10
October 30, 2017

the simple version of this is to create a form for each scenario you described above and then have some evaluation function that will return the correct form ID.

Something like:

function pickForm() {

          var formId;

          if("{{lead.attibute 1}}" == '') {

            formId = 1;

         } else

          if("{{lead.attibute 2}}" == '') {

            formId = 2;

     }

return formId;

}

Robb Barrett
Charles_THIERY
Charles_THIERYAutor
Level 2
October 30, 2017

Basically, I just want to change the value of a field from the form submitted by another value before really submitting the form.

Let's say the field A was = 0 when the user hit the submit button, I want to make a test on other field submitted and based on the result change the submitted field A to = 1.

How the code should be please?

Robb_Barrett
Robb_Barrett
Level 10
November 1, 2017

The Developers section has documentation on how to achieve something like this.

Basically, here's what you want:

form.onSubmit (function() {

var vals = form.vals();

if (vals.FirstName == 'Robb') {

form.vals("IsACoolGuy":"Yes")};

});

Robb Barrett
    Charles_THIERY
    Charles_THIERYAutor
    Level 2
    November 3, 2017

    Hello Robb,

    Thank you for this but it's like what I tried previously with onvalidate and instead of just replacing in the form the field "IsACoolGuy" to "Yes" in fact it removes all the other fields and keep only this "IsACoolGuy" submitted.

    I don't know if there is a workaround to avoid this.

    Robb_Barrett
    Robb_Barrett
    Level 10
    November 1, 2017

    Meant to include link to examples: http://developers.marketo.com/rest-api/assets/forms/examples/ 

    Robb Barrett
    Allgemeine NutzungsbedingungenAccessibility statement

    Loading footer...