1

I created a Landing Page in Marketing Cloud that basically consists of a form with checkboxes and a signature field. I have an AMPscript block that updates a salesforce fields based on the form answers (checks) when the form is submitted. I also want to save the signature field and pass the url of the image to a field in salesforce. For that I have a JS code that encodes the image using base64 and then POST the image data in JSON format to the processing page that contains the server-side script (for saving the image in content builder). The problem is that I want to make this two actions when submitting the form (when clicking on the submit input), and for some reason the AMPscript code and the JS code for the submit action are not executing at the same time. When I created a button "save" for the JS code, I was able to do the two actions separately. But I just want to have one button on this landing page. Can anyone tell why this is happening?

AMPscript Block

%%[
   /*retrieve the client account ID */
   var @accountId, @rgpdTreatment, @appResults, @emailResults, @info, @marketing, @updateRecord
   SET @accountId = RequestParameter("AccountId")

   /*get parameters to show in the form if account id exists*/
   IF NOT EMPTY(@accountId) THEN
      SET @clientRows = RetrieveSalesforceObjects(
        "Account", 
        "Id,PersonIndividualId,PersonEmail,Name,ID_Type__c,ID_Number__c",
        "Id", "=", @accountId)
   ENDIF

   /* update rgpd consent on submit */
   IF RequestParameter("submitted") == "true" THEN
      SET @rgpdTreatment = RequestParameter("agree")
      SET @appResults = RequestParameter("appResults")
      SET @emailResults = RequestParameter("emailResults")
      SET @info = RequestParameter("informacoes")
      SET @marketing = RequestParameter("comunicacoes")
      SET @rgpdTreatment = Iif(@rgpdTreatment == "on", "true", "false")
      SET @appResults = Iif(@appResults == "on", "true", "false")
      SET @emailResults = Iif(@emailResults == "on", "true", "false")
      SET @info = Iif(@info == "on", "true", "false")
      SET @marketing = Iif(@marketing == "on", "true", "false")
      SET @updateRecord = UpdateSingleSalesforceObject(
         "Account", @clientId,
         "RGPD_data_treatment__c", @rgpdTreatment,
         "App_web_app_results__c", @appResults,
         "Results_by_email__c", @emailResults,
         "Information_by_Email_Mobile__c", @info,
         "Marketing_campaigns__c", @marketing
      )      
   ENDIF
]%% 

HTML (form)

<form action="%%=RequestParameter('PAGEURL')=%%" method="post">
    <input type="checkbox" name="agree" id="agree"><label for="agree">Agree</label>
    <div id="consentimentos" class="consentimentos">
        <p style="font-family: Helvetica, Montserrat, Arial, sans-serif; font-size: 14px; "><b>Consentimentos:</b></p>
        <input type="checkbox" name="appResults" style="float:left;"><label for="appResults" style="width: 100%; display:block; padding-left:15px;">&nbsp; App </label><br><br>
        <input type="checkbox" name="emailResults" style="float:left;"><label for="emailResults" style="width: 100%; display:block;padding-left:15px;">&nbsp; Email </label><br><br>
        <input type="checkbox" name="informacoes" style="float:left;"><label for="informacoes" style="width: 100%; display:block;padding-left:15px;">&nbsp; Info </label><br><br>
        <input type="checkbox" name="comunicacoes" style="float:left;"><label for="comunicacoes" style="width: 100%; display:block;padding-left:15px;">&nbsp; Comm </label><br>
        <label for="drawing-board">Signature:</label>
        <div class="flex-row">
            <div class="wrapper" style="float:left; position: relative;">
                <canvas id="signature-pad" width="600px" height="150px"></canvas>
                <div style="position:absolute; right: 0; bottom:0;">
                    <button id="clear"><span><u>Clear</u></span></button>
                </div>
            </div>
            <div style="float:right;">
                <button id="save"><span> Save </span></button>
            </div>
        </div>  
        <div class="signature_image"></div>   
        <input name="submitted" type="hidden" value="true"><br>
        <input type="submit" value="Submit">
    </div>
</form>

JS code

<script>
  const canvas = document.querySelector('canvas');
  const saveImg = document.getElementById('save');
  const sign_block = document.querySelector('.signature_image')
  const clearButton = document.getElementById('clear');
  const ctx= canvas.getContext('2d');
  let writingMode= false;

  saveImg.addEventListener('click', (event) => {
    event.preventDefault();
    const imageURL = canvas.toDataURL();
    const image = document.createElement('img');
    const imageType= 'png';
    image.src = imageURL;
    image.height= canvas.height;
    image.width= canvas.width;
    image.style.display ='block';
    image.name = '%%=v(@accountID)=%%';
    sign_block.appendChild(image);
    clearPad();
 
    var base64enc = imageURL.split(";base64,")[1];
    var filename = image.name
    
    fetch("https://", {  //URL of the processing page
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            base64enc: base64enc,
            fileName: filename,
            assetName: imageType
        })
    })
        .then(function(res) {
            window.alert("Success!");
        })
        .catch(function(err) {
            window.alert("Error!");
        });
    });
</script>

1 Answer 1

0

Right now you have 2 buttons. 1 with a JS listener on "Click" with preventDefault and your custom image submission and 1 Submit Button which would trigger the POST to the same page.

If you now want to have just the submit button you need to add the listener to the Submit Button and within the JS logic you need to make sure to POST the data to the same page. Right now you would do just one or the other.

3
  • Yes, I showed what I have right now. But I just want to have the submit button. I have a AMPscript code that evaluates if the form was submitted and if was, it shows a "Thank you for your submission" message instead of the form. When I added a listener to the submit button, I received the success window message for the POST but the "Thank you" message is not showing up. The image is being saved in content builder but the fields are not updating in salesforce.
    – Raas
    Oct 7, 2022 at 9:50
  • yes, because the logic is done processing after your js script. You prevent the default submit, which would lead to the ampscript logic being executed. So after your image save POST success you need to submit/ POST the form parameters to the same page. Thats the part thats missing imho.
    – DonL
    Oct 11, 2022 at 12:46
  • Yes, you're right! I put the prevent default for the tests, and forgot to delete it. It's working! Thank you!
    – Raas
    Oct 18, 2022 at 21:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .