Skip to content

Instantly share code, notes, and snippets.

@timwis
Last active December 17, 2015 04:59
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timwis/5554718 to your computer and use it in GitHub Desktop.
Save timwis/5554718 to your computer and use it in GitHub Desktop.
Integrate filepicker.io with Wordpress' Jetpack contact form plugin

Installation

  1. Go to Plugins > Editor
  2. Select Jetpack by Wordpress.com at the top-right
  3. Select jetpack/modules/contact-form.php from the list of files on the right (changes the directory)
  4. Select jetpack/modules/contact-form/grunion-contact-form.php from the list of files on the right
  5. Search case 'date'
  6. Below that case and before default, add the following case, replacing ***API-KEY-GOES-HERE*** with your filepicker.io API key, and adding any other filepicker.io rules (mime types, file size, etc.) as attributes
	case 'filepicker':
		$r .= "\n<div>\n";
		$r .= "\t\t<label for='" . esc_attr( $field_id ) . "' class='grunion-field-label " . esc_attr( $field_type ) . ( $this->is_error() ? ' form-error' : '' ) . "'>" . esc_html( $field_label ) . ( $field_required ? '<span>' . __( "(required)", 'jetpack' ) . '</span>' : '' ) . "</label>\n";
		$r .= "\t\t<input type='filepicker' name='" . esc_attr( $field_id ) . "' id='" . esc_attr( $field_id ) . "' value='" . esc_attr( $field_value ) . "' class='" . esc_attr( $field_type ) . "'/ data-fp-apikey='***API-KEY-GOES-HERE***' data-fp-mimetypes='*/*' data-fp-container='modal' onchange='alert(event.fpfile.url)'>\n";
		$r .= "\t</div>\n";
		break;
  1. Select jetpack/modules/contact-form/grunion-form-view.php from the list of files on the right
  2. Search drop down
  3. After the Website <option> add the following
	<option value="filepicker"><?php esc_html_e( 'Filepicker', 'jetpack' ); ?></option>
  1. Go to Appearance > Editor
  2. Select Header from the list of files on the right
  3. Add the following script tag before the closing </head> (Remove the space in the opening script tag. Included because of gist restrictions)
	<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>

Usage

  1. While creating a post/page, click the custom form icon next to the Add Media button above the content area
  2. Add whichever fields you like, and include one of the type Filepicker
@pnvmedia
Copy link

Awesome! once the file is added I get a popup with the link to the file and before hitting submit on the contact form there is nothing show that the file has been added to the message. Is there something I can do to give the uploader confirmation other then the link the the file? Many Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment