How To: Upload Files from a Marketo Form

How To: Upload Files from a Marketo Form

Using a Javascript snippet and simple third-party service, you can allow visitors to attach files to Marketo form submissions

Marketo’s native forms provide marketers powerful tools for collecting information from people, but the framework sometimes leaves power users (like you!) wishing for a little more flexibility. A client recently asked if our team could add file upload functionality to one of their Marketo forms. This article will walk you through the process to allow your visitors to upload files from a Marketo form.

The Challenge

Handling file uploads through forms can be tricky, especially if you have to code the functionality from scratch. The solution requires server-side processing that simply isn’t part of most marketers’ repertoire. But fear not, there is a cloud-based way to quickly implement this powerful functionality in your forms–with minimal coding.

Bottom-Line Impact

You may ask, “why would I want to upload a file via a form in the first place”? There are potentially many use cases for the ability to submit files from a Marketo landing page. Here are some scenarios:

  • Attach an RFP in PDF format to a request for services
  • Submit project specs in a Word doc
  • Send a Visio process flow for a complimentary review
  • Enter crazy sock photos in a social media contest to win a free iPad

For our client, there was a need to allow a potential customer to submit a bill of materials (a list of parts for a particular project), which their sales team could later use to check parts availability. The file upload functionality allows sales to close these deals more quickly and with less hassle.

Cloud App to the Rescue

The solution was to use a third-party, cloud-based upload service called Uploadcare. There are other services, but this one was chosen. In our demonstration we used the vendor’s “free plan”, which offered plenty of horsepower for normal use, and reasonably priced paid plans if you need more.

In addition, users can upload not only from their computer, but also from Dropbox, Google Drive, Evernote, OneDrive, Box, and social media sources, so the service makes it easy for anyone to use, regardless of where their files are stored.

We integrated this service into an existing Marketo form using a hidden field and some simple jQuery wizardry.

High-Level Overview

Basically, the solution consists of these steps:

  1. Set up an uploader widget on a third-party service.
  2. Create a custom Marketo landing page template.
  3. Add some Javascript to transform the hidden form field to a file upload widget.
  4. Create a custom field in Marketo where we will store the uploaded file URL.
  5. Create a Marketo landing page from your new template and a form with a hidden field.

If you’re following along at home, here are the steps to implement this solution.

Get the Upload Widget

  1. Create an account with Uploadcare and click the verification link in your email.
  2. In your new Uploadcare account, create a new project and configure the upload widget.
    • Disable any services from which you don’t want to receive files (such as Flickr).
    • By default, users can upload only one file, but it can be any type of file—DOCX, PDF, VSDX, JPG, etc. It’s best to leave these settings as they are. (If you experiment with multiple files, I’d love to hear how it went!)
  3. Under the Integration section, we’re going to use the Javascript code from the first box, but you can ignore the others–we’re going to use custom code instead.

    03-digital-pi-marketo-file-upload-integration

Create the Landing Page Template

Remember that Javascript code from Uploadcare that we looked at earlier? Now we’re going to add it to the landing page, plus one more custom Javascript snippet to make it work with a Marketo form. This is the hardest part if you’re not used to working with code, but we’ll walk through it step by step. Hang in there!

  1. In Design Studio, find the landing page template you want to use for your file upload form, then clone it, naming it something like “File Upload Form” so you remember its purpose later. Creating a new template is necessary because we need to place some Javascript code after jQuery is loaded, and it is often loaded near the bottom of the page. In case that’s a new term for you, jQuery is a Javascript framework that enables cool functionality—like adding file upload widgets!
  2. Add the Uploadcare Javascript code to your landing page template.
    1. In Design Studio, edit your new File Upload Form landing page template.
    2. Paste your Uploadcare Javascript code just above the tag at the very bottom of the landing page code.
    3. Don’t save the template just yet.
  3. Add custom Javascript code to make the Uploadcare widget work with a Marketo form.
    1. Copy the Javascript code below. It essentially transforms the hidden form field that we placed in the Marketo form to the Uploadcare file upload widget. If you chose to use a different field than the Uploaded File field that we’re using in this example, then you will need to change this code accordingly where it says “name=uploaded_file” to whatever the name of your field is.
      <script type="text/javascript">
        function showUploader() {
          jQuery('input[name=uploaded_file]').attr('role','uploadcare-uploader');
        }
        jQuery(document).ready(function(){
          setTimeout(showUploader,1000);
        });
      </script>
      

      Paste this code beneath the Uploadcare code that you pasted in Step 1 above but before the closing tag.

  4. Add styles to make the upload widget look a little better. You can tweak these as you see fit, but this will get you started.
    1. Copy this CSS code and paste it beneath the last Javascript block.
      <style type="text/css">
        div.uploadcare-widget-button {
          display:block;
          margin: 15px 0;
          width:160px !important;
          height: 35px !important;
          padding: 10px 0 0 10px;
        }
      </style>
      
  5. The last 20 or so lines of your template before the <body> tag should look something like this.

    05-digital-pi-marketo-file-upload-landing-page-template-code
  6. Approve and Close this template.

Putting the Pieces Together

Okay, let’s make some magic happen. The setup in Marketo requires several things: a form (duh!); a landing page where the form lives; a string field where you can store the URL of the uploaded file.

  1. Figure out what Marketo field to use to store the URL of the file that is uploaded. In this example, we’ll use a custom String field called “Uploaded File”. You will likely need to create this field, or you could use a temporary field that we’ll overwrite later.
  2. Create a form. It can be as complex as you like, but our example only has three visible fields—First Name, Last Name and Email Address.
    1. Add the Uploaded File field to the form, and set its Field Type to Hidden.
    2. Approve and Close the form.
  3. Create a new landing page from the File Upload Form template. Add whatever copy and images make sense for your purposes.
  4. Add the form we just created to the landing page, as you normally would.
  5. Approve and Close this landing page.

Try It Out!

Now the fun part—seeing it in action! Let’s give it a shot in the browser.

  1. Select your page in Marketo and click the orange View Approved Page button.
  2. You should see your new landing page open up with your form. After a moment, you should also see a box show up in your form that says “Choose a file.” If so, your integration worked!
  3. When you click on that box, you’ll see a drag-and-drop interface for uploading a file along with any other upload options you left checked when configuring the Uploadcare widget.

    08-digital-pi-marketo-file-upload-form-landing-page-uploader-widget

Best Practices

While this is good as a proof of concept, there are a few other things to consider when using this technique in a production environment.

  1. First, when you upload files from a Marketo form, it’s probably best to move this data from the Uploaded File field and put it somewhere that it won’t be overwritten if the person uploads a new file. I recommend using {{lead.Uploaded File}} in a Flow step to write the uploaded file URL to an Interesting Moment.
  2. Next, this upload widget might not work for everyone in every browser. Post instructions for sending a file separately (probably via email) for anyone who has trouble with the form.
  3. Finally, you will probably want to involve a web developer to help customize your upload widget further to better match your brand identity.

If you put this technique into use, I would love to hear about your specific use case in the comments. If you need some help, reach out in the comments below or via our contact form. Happy uploading!

jbourne@digitalpi.com

Jon Bourne is a marketer with a varied background in technology, design, agency consulting and direct sales. He has been a front-end developer, account executive, technology consultant, creative director, and head of marketing as well as an owner, partner and executive in multiple design and development agencies. Jon brings his technical background together with branding and marketing savvy to deliver return-oriented strategies that drive top-line growth and create efficiencies and cost savings for client companies—turning marketing organizations from cost centers to profit centers.

  • TurnableUcom

    Leave reply
    October 5, 2016

    I just used this technique, it works beautifully, thank you!

  • Pavan Kumar

    Leave reply
    June 19, 2017

    Hi Jon,

    Can you please tell me how do I map the storage location of the file with a field in marketo. I am stuck with that part

  • Marc Brookshire

    Leave reply
    July 20, 2017

    This is great. Any insight on how to require the file be uploaded before the form is submitted?

LEAVE A COMMENT