Integrating our file uploader into a Marketo form is a simple process that can save you a lot of time and effort. With our uploader, you can easily collect files from your form respondents directly and securely, without any hassle.
To get started with integrating the uploader into your Marketo form, follow the steps below:
To add an upload button to your Marketo Form, insert a text field in the area where you want the button to show up. Then, assign a specific ID to the field (e.g. "file-upload") or use the ID given by Marketo (you’ll need to use the same ID in the script, that we’ll add later in step 3).
On your landing page, where you connected the form, open the code editor and add the following to the <head> section:
<script>
UPLOADCARE_PUBLIC_KEY = "YOUR_PUBLIC_KEY";
</script>
<script src="<https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js>"></script>
Replace YOUR_PUBLIC_KEY with your public key, which you can find on your Uploacare account dashboard. Also, you can add other configuration variables to customize the uploader.
Add the following script before the closing </body> tag. If you add it to the <head> section, it should still work, but it's recommended that you add it at the bottom of the page's body. You can use an HTML block to add custom code.
<script>
MktoForms2.whenReady(function (form) {
// Get widget reference
var widget = uploadcare.Widget("#file-upload");
// Hide widget's text input
widget.inputElement.style = "width: 0px; height: 0px; border: 0; outline: none;";
// Make file upload required (if needed)
widget.inputElement.required = true;
// Handle file upload
widget.onUploadComplete(function (fileInfo) {
widget.inputElement.setAttribute("value", fileInfo.cdnUrl);
});
});
</script>
Make sure that the ID used here matches the ID of the text field added in step 1:
var widget = uploadcare.Widget("#file-upload");
Once you've completed these steps, publish the changes and go to the page preview. You should now see the widget added to your form.