In this blog post, your learn how to add CloudWok to NinjaForms. Thereby, you can use the flexibility and power of NinjaForms combined with the ability to receive file uploads directly into your preferred cloud storage: Google Drive folders, Dropbox folders, Box.com folders, Facebook photo albums, or Amazon S3 buckets.

NinjaForms is a great and completely free WordPress Form Builder. NinjaForms offers plenty of options for customizing your form and translating it into different languages.


Now, we will show you how to integrate the CloudWok embed code into NinjaForms, and make it even more powerful. If you use CloudWok, you can let your website visitors upload large files, such as videos, or many small files, such as photos, PDF documents, etc. Your files will not clutter your WordPress server. Instead, the files are directly transferred to your personal cloud storage where you can more easily access and work with them.

Lesson #1: How to create a NinjaForm form with file-upload that transfers files to your Dropbox, Google Drive, or other cloud

Update (Feb/2017): The description below is a bit outdated and we will replace it soon. The current version of NinjaForms does not allow to add Text elements any more which makes it a bit more difficult to add the CloudWok file upload widget to a form. However, it is possible with the following workaround:

1. Instead of adding a “Text” element, add an “HTML” element in Ninja forms with only the CloudWOK HTML code:

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

2. Add the “Script n Styles” WordPress plugin to your WordPress installation and add the CloudWok CSS styles and JavaScript code as outlined in this blog post.

Then it should work and the CloudWok upload widget appears in your Ninja form.

— OLD/OUTDATED DESCRIPTION —

Add CloudWok to your NinjaForm with these 3 steps:

1. Click on the NinjaForms “Forms” menu item on your left-hand WordPress admin menu bar.
2. Build a new form and add all the field that you need (text field, checkbox, password field, star rating, etc.)
3. Add an “HTML” element to your form and add the following code (with your own WOK_ID as explained on this site):

<div class="cloudwok-embed" data-wokid="WOK_ID">
  <div class="cloudwok-upload-files"></div>
  <div class="cloudwok-upload">
    <div class="cloudwok-dropzone"></div>
  </div>
</div>
<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>

We noticed that the NinjaForms submit button does not work properly when we add the CloudWok embed code AND when NinjaForms “Settings > Submit via AJAX” is enabled. We are currently looking into this issue. In the meantime, you can solve the problem by disabling the “Submit via AJAX” option in NinjaForms.

Save your form and publish it – voilà! You can now collect files in your preferred file storage via the CloudWok file upload feature that is added to your form.

ninjaforms-and-cloudwok-wp-admin-screenshot
Copy the cloudwok embed code into a ninjaforms text element.
ninjaforms-and-cloudwok-example
Example of NinjaForms with embedded CloudWok widget.

Lesson #2: View links to uploaded files in your Submissions view & other tricks

Update (Feb/2017): Unfortunately we had to discontinue this feature because it could allow  access to viewing uploaded files through unprivileged third parties. We are currently looking into providing on a better solution that works similarly and is more secure.

You would see the download-links of the uploaded files in your WordPress NinjaForms Submissions view? This is how you would do it:

  1. Add a Hidden Field to your form
  2. Find out the name of the hidden input field. It should be something like ninja_forms_field_11. Replace 11 with the field ID of your hidden field.
  3. Adjust your CloudWok embed code from Lesson #1 as shown below. Replace HIDDEN_FIELD_NAME with your own hidden input field name, e.g., “ninja_forms_field_11”, and enter your own wok id.
<div class="cloudwok-embed" data-wokid="WOK_ID" data-uploaded-files-target-selector="input:hidden[name=HIDDEN_FIELD_NAME]>
  ...
</div>
<script>
 ...
</script>

The download links will now appear in your NinjaForms Submissions view next to each submission.

NinjaForm submissions with download-link
NinjaForm submissions with download-link

You can also add a custom prefix to each file name. Thereby, you can more easily sort submissions in your Dropbox folder (or Google Drive folder, …). You can, for example, write the uploader’s name from another field as prefix of each file name. This is how it can be done:

<div class="cloudwok-embed" data-wokid="WOK_ID"  data-uploaded-files-target-selector="input:hidden[name=ninja_forms_field_11]">
  <div class="cloudwok-upload-files"></div>
  <div class="cloudwok-upload">
    <div class="cloudwok-dropzone"></div>
  </div>
  <input type="hidden" style="display:none" name="filename_prefix" value="my_prefix">
</div>
<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);
    // add event listener to change prefix of uploaded files based on
    // value of nameField
   var changePrefix = function() {
     document.querySelector(".cloudwok-embed
       input[name=filename_prefix]").value =
       document.querySelector("input[name=ninja_forms_field_1]").value
    };
    var nameField = document.querySelector("input[
      name=ninja_forms_field_1]");
    nameField.addEventListener("change", changePrefix);
  })(window, document);

</script>
Prefix uploaded files with name of the uploader
Prefix uploaded files with name of the uploader

The hidden input field specifies a fixed prefix. If you would like to dynamically change the prefix, e.g., based on the uploader/submitter name, then you need some JavaScript, as shown by example in the code snippet above.

Drop me a line if you have issues or feedback: markus@cloudwok.com.

Enjoy!