Unique Dynamic form - according to buyer journey

[Charles_THIERY]

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

[Josh_Hill13]

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

[SanfordWhiteman]

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]

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]

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]

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;

}

[Charles_THIERY]

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]

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

});

[Charles_THIERY]

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.

[SanfordWhiteman]

form.setValues({ 
  field1Name : "value1",
  field2Name : "value2"
});

doesn't overwrite other fields, it only touches the fields contained in the object.

If you're seeing other behavior it's because you have a logic error somewhere else.