How to upload files from a Marketo form

Written by Matt Simpson. Updated on August 31, 2022. First published on August 20, 2020, in Product

Please note that the guide is currently being updated. If the current instructions are not working for you, please refer to the new instructions.

Marketo is a marketing software-as-a-service platform designed to help businesses automate marketing tasks. Among the great number of tasks Marketo performs is the ability to build forms for your landing pages. However, uploading files via Marketo forms is not possible "out of the box."

Luckily, Marketo allows you to integrate third-party solutions into the existing functionality — and that's where Uploadcare File Uploader comes in to save the day.

This article will walk you through the process of integration step by step to help you create easy-to-use forms with the ability to attach images, videos, PDFs, and any other files you need.

Quick introduction to Uploadcare File Uploader

Uploadcare File Uploader is a responsive and mobile-ready HTML5 uploader provided as a typical JavaScript library. Here are just a few facts to give you an idea of what it looks like and how it works:

It has an easy-to-use intuitive UX with a tab-based UI, drag-and-drop field, and progress bar for every file.
File Uploader accepts any type of file up to 5 TB in size and can get files from over a dozen sources including local storage, cloud storage, social media, and camera.
Uploader allows users to edit uploaded images: crop, rotate, flip, mirror, sharp, blur, enhance, etc.
It’s compliant with SOC2 and HIPAA, and provides a 99.9% percent guarantee that all uploads hit their target.

You can visit our docs for more information. Now, let’s make some magic!

Step 1. Create an account at Uploadcare and configure File Uploader

First of all, sign up for an Uploadcare account. After that, you’ll be able to create your first project from the dashboard and configure File Uploader. Go to the Integration tab and click on the Customize Uploader button. You’ll see the following:

Here you can choose upload sources for your uploading form and disable any services you don’t need. Available sources are:

local disk
local webcam
any publicly available URL
social media platforms (Facebook, Instagram)
cloud storage (Google Drive, Dropbox, OneDrive, Box)
other services like Evernote, Flickr, Huddle, etc.

Also, you can:

allow multiple uploading
turn on the preview option
allow users to remove uploaded files
allow users to crop uploaded files
allow users to edit images
shrink images before uploading

Configure your file uploader depending on your needs and proceed to the next step. We’ll get back to the configurator later.

Step 2. Create a Marketo landing page template and add a form

Go to Marketo Design Studio and create a new landing page template.

Creating a new landing page in Marketo Design Studio

Choose your folder, give your template a name, and click Create. Your template will appear in a new tab:

Now you can write custom code to edit this template and add your own blocks.

Also, you can download the template to your computer and do all the manipulations in your own code editor.

Edit the landing page template in your own code editor

When everything’s done, you’ll need to copy your code and paste it back into the design studio. If you want to go this way, here’s a detailed guide for you.

Now you need to add a form to your landing template. You can write your own form, or use a ready-made form available on Marketo. It’s almost the same as creating a landing page: just go to Marketing Activities, then click on New > New local asset > Form.

Step 3. Integrate File Uploader

Now that we have our landing page template and form, we can add a bit of code to integrate Uploadcare File Uploader into it.

1. Get back to Uploader Configurator from the first step and find the code snippet at the bottom, which is generated automatically depending on your configurations. Copy and paste that code snippet into the <head> tag. It will look something like this:

<script>
  UPLOADCARE_PUBLIC_KEY = 'publickey';
  UPLOADCARE_TABS = 'file camera url facebook gdrive';
  UPLOADCARE_PREVIEW_STEP = true;
  UPLOADCARE_CLEARABLE = true;
</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>

The “publickey” will be changed to your own unique Uploadcare Public Key, which can be found from the API Keys tab on the dashboard.

2. Copy and paste the other piece of code from the configurator to add the Uploader button to your page. It will look something like this:

<input
  type="hidden"
  role="uploadcare-uploader"
  data-multiple="true"
  data-multiple-min="1"
  data-crop="4:3"
  name="upload-file" />

After that, you can add some CSS to style your upload widget and match your brand identity if you want, then click on Approve and Close.

And there you have it!

If you’ve done everything right, you’ll see a shiny new form on your landing page with a Choose a file button. If you click on it, you’ll see the File Uploader window, where your users can upload and edit images:

Wrapping up

That’s it! Now you have a powerful, easy-to-use solution to gather all kinds of files from your users. If you have any questions, you can ask them in our Community area, or leave them in the comments below.

How to upload files from a Marketo form

Quick introduction to Uploadcare File Uploader

Step 1. Create an account at Uploadcare and configure File Uploader

Step 2. Create a Marketo landing page template and add a form

Step 3. Integrate File Uploader

And there you have it!

Wrapping up

Infrastructure for user images, videos & documents

Next up

Serverless file upload for Meteor applications

6 proven techniques to load an image-heavy website faster

Color recognition: extract dominant colors from any image automatically

Cloud file systems are the new black