Javascript in a form for UploadCare

[Vincent_Ferugl1]

Hello,

I’d like to use the tool named UploadCare to allow visitors to upload documents in a Marketo embedded form.

Regarding our specific configuration with our website, we use a CMS component to integrate Marketo form and there is a call to Marketo form to display it. To use UploadCare, I have to insert the javascript code directly in the form.

I read that I can add the code in the editor of the form as a HTML rich-text element, I copied the code provided by UploadCare Support with my API key (below).

<div>
<script>
UPLOADCARE_PUBLIC_KEY = "my_Key";   UPLOADCARE_PREVIEW_STEP = true;
</script>
</div>
<div>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
</div>
<div><input type="hidden" role="uploadcare-uploader" data-multiple="true" data-multiple-min="1" data-crop="4:3" name="upload-file" /></div>

The UploadCare widget is displayed but twice! (see attached the preview).

Despite the help of UploadCare Support, I wasn’t able to fix it.

Is this code correct?

Is it related to this post from @SanfordWhiteman ? https://nation.marketo.com/t5/Product-Blogs/HOWTO-Add-Forms-2-0-JS-behaviors-inside-a-Rich-Text-Area...

I tried to insert this code as a HTML rich-text element but same behavior, the widget is displayed twice:

[Form Behaviors JS - Do Not Delete!]
<script>
MktoForms2.whenReady(function(form){
  var formEl = form.getFormElem()[0];
  if( formEl.getAttribute("data-inline-behaviors-loaded") == "true" ) {
    return;
  }
  formEl.setAttribute("data-inline-behaviors-loaded", "true");
  // now continue
  console.log("Doing something special");
});
</script>

Any idea to fix it (note: I have no skill in development)?

Thank you!

BR,

Vincent

[SanfordWhiteman]

Yes, you would have to do it as outlined in my blog post. But that's only if you have a compelling reason to include the UploadCare <script> elements within the form. Is there a specific reason you can't have the scripts outside (i.e. after) the form embed?

[Vincent_Ferugl1]

Hello @SanfordWhiteman,

Thank you for your reply.

Could you please tell me where to add your script? In the HTML of a new rich-text area or in the same as used for the script of UploadCare? (see screenshot)

I tried both but same behavior, the widget still appears twice, maybe I made a mistake in the process?

According to my IT team, I have to add the script directly in the form regarding our settings to call Marketo forms.

Nevertheless, I tried to add it on our website in a component dedicated to insert code, the UploadCare widget appears once but under the form (and so under the submit button). I'd like to have it before the submit button.

Thank you.

Vincent

[Miguel_Board1]

@Vincent_Ferugl1 Did you ever get this to work? I am in a similar situation. I'd like to move the uploadcare button higher up on the Marketo Form but am also currently getting double buttons...after attempting to add the script as HTML in a rich text form field. I've used the same script mentioned on the @SanfordWhiteman  blog post, also.

The file selection buttons work and the submission of the form still works.

https://go.mazars.us/2023-0508-WBN-2046-Uploadcare-Form_LP-DoubleButton-RFP.html

[SanfordWhiteman · Accepted solution]

Hey Miguel, are you trying to embed the special form behaviors in a Rich Text area (rather than their own JS file)? If so you have to make sure they only run once — this has the sound of adding the button 2x because the script runs 2x. Highly recommend you move the behaviors to their own .JS file in Design Studio.

EDIT: Worked w/Miguel offline and indeed the key is moving your behaviors outside the form.