Hi Fernando,

First, I noticed you had a script tag and the p tag both together. Was that just to show the code here? If not, then I'd highly recommend you add the JavaScript using the CSS/JavaScript tab in the form designer and not in the Custom HTML element to ensure it loads/executes in the correct order.

Custom HTML is not a form "input" that can be submitted with the form, so any changes that are made only display on the client side and do not get sent to the server.

Another thing to consider is that the saved copy of the form is similar to read only views of the form meaning all the fields are rendered as text in div elements instead of input elements.

To have the HTML updated on the saved copy you have to address both of those items, and you can do that by adding another action in the document.ready event.

$(document).ready(function (){
  // change event is probably better than blur since it covers more
  // scenarios and won't fire when no actual changes were made
  $('#q3 input').change(function(){
    // jQuery equivalent of what you had before
    // $(this) is whatever element triggered the change event
    // so there's no need to use the full selector again
    $('#vName1').html($(this).val());
  });
  
  // check/retrieve the value on load to handle saved form
  // or values that were populated in a previous step/task
  var vName = $('#q3').find('.cf-field :input').val() || $('#q3').find('.cf-field div[type]:eq(0)').html() || '';
  $('#vName1').html(vName);
});

The new line with var vName basically does a sort of fail over check. If there's no input element, then it checks for the "display" equivalent and the contents of that. If that's not found either, it defaults to empty. Finally, it assigns the vName variable value to the custom HTML span.