In this article, your learn how to add CloudWok to an AssemblyForm form. Thereby, you can receive form submissions along with file uploads. The files are directly uploaded into your preferred cloud storage (Dropbox, Google Drive, Box.com, or Amazon S3) via CloudWok. You can receive large files up to 10GB file size (and more – if using an enterprise plan).

Lesson #1: How to create a simple upload form that transfers files to your Dropbox/Google Drive/…

1. Create a new form
2. Click on “Add Content” > “Text & Image” > “Text”
3. Select the “HTML” field
4. Copy the following code (replace ENTER_YOUR_WOK_ID with your own wok id as explained here):

<div class="cloudwok-embed" data-wokid="ENTER_YOUR_WOK_ID">
  <div class="cloudwok-upload-files"></div>
  <div class="cloudwok-upload">
    <div class="cloudwok-dropzone"></div>
  </div>
</div>

5. Click on “Properties” > “Custom Code” and enter the following code:

<script>
  (function(window, document) {
    var loader = function() {
      var script = document.createElement("script"),
      tag = document.getElementsByTagName("script")[0];
      script.src = "https://www.cloudwok.com/cdn-vassets/javascripts/cw.js";
      tag.parentNode.insertBefore(script, tag);
    };
    window.addEventListener ? window.addEventListener("load", loader, false) :
    window.attachEvent("onload", loader);
  })(window, document);
</script>

That’s it. Save, publish and view your form. The file-upload area will be displayed at the location where you entered the HTML code in your form.

New FormAssembly form in Salesforce
Step 1: Create a new FormAssembly form (in Salesforce)
Create a FormAssembly form with file-upload to Dropbox
Step 2: Add content to the form.
Embed CloudWok as HTML element in FormAssembly form
Step 3: Select the “HTML” field
Enter HTML code with YOUR wok id
Step 4: Enter HTML code with YOUR wok id
Add CloudWok script as custom code
Step 5: Add CloudWok script as custom code
View the form
View the form

Lesson #2: Customize the looks of your embedded CloudWok file-upload widget

You can change the style of the upload widget as explained here. Simply add CSS code into the “Custom Code” text area of your FormAssembly form. For example, reduce the width and change the “Add files” button layout as shown in the example below:

<style>
.cloudwok-embed {
  width: 60%;
}
.cloudwok-embed .lead .fileinput-button {
  color: #000 !important;
  border: solid 1px #bbb !important;
  background: #ccc !important;
  font-size: 14pt;
}
</style>
FormAssembly and CloudWok with CSS Style
This is how the form looks like with customized CSS styles.

Lesson #3: Receive and manage the download links in your Salesforce account

You would like to send the list of download-links of the uploaded files to your Salesforce account, along with the form submission? With a little trick we can do that.

  1. Add a hidden input field to your form
  2. Find out the name of the hidden input field. You can do this by opening the main FormAssembly admin area in Salesforce, select your form, click on the “Notifications” tab, scroll down to “Show the list of available aliases for this form”, and then scroll down and find out your hidden field’s name. In my case it was “tfa_3”.
  3. Adjust your CloudWok HTML code (as explained in Lesson #1) an shown below. Replace FORM_NAME with your own hidden input field name, e.g., “tfa_3”, and enter your own wok id.
<div class="cloudwok-embed" data-wokid="ENTER_YOUR_WOK_ID" data-uploaded-files-target-selector="input:hidden[name=FORM_NAME]">
  <div class="cloudwok-upload-files"></div>
  <div class="cloudwok-upload">
    <div class="cloudwok-dropzone"></div>
  </div>
</div>

You will now receive a list of uploaded files, which you can view along with the FormAssembly submission in Salesforce. You can for example connect the uploaded files to a newly created lead or opportunity in Salesforce.

The data-uploaded-files-target-selector attribute that we added to our CloudWok embed code widget lets you populate any HTML element with the download-link URLs of uploaded files.

Insert a hidden field
Step 1: Insert a hidden field
Step 1
Step 1: Hidden field
Go to Notifications
Step 2: Go to Notifications
Figure out the name of the hidden form
Step 2: Figure out the name of the hidden field
Step 3: Adjust CloudWok script
Step 3: Adjust CloudWok script
Access download-links to uploaded files from within Salesforce
Access download-links to uploaded files from within Salesforce

There are probably many more ways in which you can combine CloudWok with Salesforce. Let us know if you have issues, further ideas, or feedback: markus@cloudwok.com.

Enjoy!