Unhide hidden field in form when link is clicked in rich text?

[ameliamarie]

I'm trying to configure a way for contacts to update their email address when visiting a "manage preferences" form. When a known contact visits the form, their information will pre-fill. However, if the contact were to update their email address, a new record is created versus updating their existing record. 

Perhaps I am completely overcomplicating this - Please let me know. I've added a section of rich text that says "Incorrect email address? Update it now." When it's clicked, the hidden field (self-service email address) would appear so the user can add a new email address. I would have an automation that would then change the data value of the primary email address field once the form is submitted. 

I can't seem to find a solution to this, which is making me think I'm approaching this the wrong way. Any advice is appreciated, thank you! 

[SanfordWhiteman]

Pretty straightforward. Don’t hide/show the proxy Email field directly when the person clicks the link. Instead, update another hidden field — a Form Visibility Manager (FVM) field. This is just a string field you use for special form behaviors.

Then use standard Visibility Rules based on the FVM field.

[Disha_Goyal6]

Hi @SanfordWhiteman , I think we can achieve the same by using jquery.

[SanfordWhiteman · Accepted solution]

Yes, you always need some JavaScript (not jQuery). That’s how you make clicking the link set a value. Like so:

MktoForms2 :: Switch to proxy email address

[ameliamarie]

This is beautiful, thank you! Would this work for forms on a guided LP (and not a form embed?) using pre-fill?

[SanfordWhiteman]

Sure, in general anything that works with the embed works with a named form (though not vice versa).

[ameliamarie]

Thank you @SanfordWhiteman I appreciate all of your support on this! 

I'm trying to apply the Javascript, but I seem to be missing something. Here's the URL: Preference Center 

I have hidden the row with the selfServiceEmailAddress field using this code:

.mktoFormRow:has(input[name="selfServiceEmailAddress"]) {
    display: none;
}

In addition to that, I'm using this HTML within the form rich text:

<span id="update-email-text">Incorrect email address? <a href="#update-email" id="update-email">Update it now.</a></span>

 I have altered the JS to incorporate the selfServiceEmailAddress field name:

MktoForms2.whenReady(function(readyForm){
   const currentValues = readyForm.getValues();
   const formEl = readyForm.getFormElem()[0];
   
   const oldEmail = formEl.querySelector("input[name='Email']");
   if( currentValues.Email !== "" ) {      
      oldEmail.readOnly = true;
      readyForm.setValues({
         selfServiceEmailAddress: "enable-email-update"
      });
   }
   
   const showNewEmail = formEl.querySelector("a[href='#update-email']");   
   showNewEmail.addEventListener("click", function(){
      readyForm.setValues({
         selfServiceEmailAddress: "update-email"
      });
   });
   
});

What am I missing?

Should I be doing anything with the visibility rules within the form itself instead of hiding the row with CSS?

[SanfordWhiteman]

Think you’re not quite grasping the approach. There’s nothing hidden using CSS (that’s why you don’t see such a rule on the demo page). All the show/hide decisions use native Visibility Rules.

There’s a Form Visibility Manager 01 field (just a string field) added as Hidden:

New Email Address (the secondary Email Address field) is hidden unless Form Visibility Manager 01 has a special value:

The Rich Text is shown until it’s clicked:

The JS updates Form Visibility Manager 01, exactly as in my demo. It doesn’t update the New Email Address (Self Service Email Address in your instance). That wouldn’t make sense!

Also, you shouldn’t have that id attribute on the <a> as that’ll cause the page to jump there on link click.

[ameliamarie]

Thanks a bunch for your insight and posting screenshots, this is helpful.  I will follow your tutorial and update if I encounter any issues.