Results tagged “ithemes”

First of all let me personally thank iThemes who originally subsidized the development of the Contact Forms plugin for donating the plugin to the Movable Type open source community! I am proud to call everyone at iThemes a friend.

Now, onto the show. I am happy to announce the final stretch for the plugin as we gear up for a formal production ready release. The plugin was revamped so that it could act more reliably as a "Movable Type Mail Form Processor" - on steroids of course. It has been more or less completely redesigned with a lot of focus being paid to a more polished user experience.

Once the plugin is complete, I will post all of the details and documentation over at Endevver. In the meantime, I thought people might like to see a few screenshots of the work in progress.

You can download the latest version of the Contact Forms plugin over at github and get support over at Endevver's tender.

(screenshots after the jump)

One project that I had always hoped to find time to work on while at Six Apart was a plugin that provided Movable Type bloggers with a capable and easy to use contact form solution for their web site or blog. It was a recurring problem I had while working on the various Movable Type-powered web sites I helped to administer. But alas, I could never scare up the time or the resources to do it.

But as luck would have it, I have an abundance of time right now, and a great partner willing to take on some of the expense required to build a plugin as large in scope as this one. So at last, I am pleased to announce a free and public beta of the first ever Contact Forms Plugin for Movable Type. If you don't have time to install it, take a look at a quick four minute demonstration:


Contact Forms Plugin for Movable Type from Byrne Reese on Vimeo.

It has a very robust feature list including the ability:

  • to deploy multiple contact forms to a web site
  • to add custom fields to your contact forms
  • to view and respond to inquiries directly from within Movable Type
  • to add contact forms in posts, pages or templates
  • for designers to specify their own form HTML along with their themes
  • for developers to define their own custom fields via YAML

If you have questions, would like to be involved in the beta, or would like information on how to purchase the plugin once it is officially released, then by all means: contact me! Powered by the Contact Forms plugin of course!

The Contact Forms plugin was developed in partnership with iThemes, the creator of many excellent themes for Movable Type. The plugin is currently in active beta.

Contact Forms Screenshot

Contact forms are one of the most common and oldest ways in which sites have provided their visitors with a way to contact them. They are preferable to many because using a form obviates the need to disclose an email address. But where many solutions fall short is that the form itself only automates the sending of an email. They offer very little customization and are unable to store submitted form data for searching later.

The Contact Forms plugin for Movable Type provides a comprehensive solution for allowing site administrators to manage multiple ways for their site's visitor's to contact them and ask them questions them questions via a simple form submission. Contact form submissions are then stored in the database and tracked to ensure that every message is replied to, and to make all responses searchable.

Finally, site administrators are given a simple screen on which they can monitor incoming inquiries and respond to them in kind via email.

Download

Features

  • Manage multiple contact forms and design the form elements you would like to appear in each.
  • Drag-and-drop interface for managing the order of contact form field elements.
  • Simple interface for managing, monitoring and replying to incoming inquiries.
  • Ability to flag inquiries to receive special attention by others, or for later review.
  • Quickly view the status of each inquiry through simple icons: unread, read and replied to.
  • Embed contact forms in a template via a simple template tag, or retrieve from the plugin of the HTML yourself so that you drop it into a page, a post, or edit manually. Which ever is easier.
  • View incoming inquiries and view a specific inquiry using a split pane view common to most email applications.

Plus, enjoy using the speedy and responsive plugin because of its extensive use of javascript and AJAX. That means you can be more productive because you will spend more time talking to your visitors and less time waiting for the application to load.

Pro Features

Users of Movable Type Pro will also have access to the following features:

  • Assign a "Contact Form" custom field to pages and entries.

Designer Features

Designers can also make special use of this plugin by specifying in their themes the hooks and information necessary to render forms according their unique style and structure. This allows for theme developers to leverage this plugin to provide a seamless experience for their customers as well.

Developer Features

The Contact Form plugin comes with a standard set of form fields for rendering and displaying on the published blog for visitors to fill out. If developers would like to extend the types of form elements available, they can do so using a simple YAML based API.

Installation

To install this plugin follow the instructions found here:

http://tinyurl.com/easy-plugin-install

Support

For support, please visit Endevver's (where I work) dedicated support site.

Since leaving Six Apart I have been having fun working on a number of projects I just never could find the time for while working there. Of course, I am even more privileged to be working with iThemes who have been subsidizing much of the work I am doing and who also share a philosophy of giving back to the Movable Type Community in the form of numerous open source plugins.

The most recent plugin I am working on utilizes jQuery a great deal, a javascript framework I have been using more and more frequently because of its intuitiveness, terseness and huge breadth of samples to draw from. But simply dropping it into the Movable Type application leaves many of the UI components its spawns feel bolted on as opposed to a seamlessly integrated component.

So I took a little time to develop a simple jQuery Dialog Theme that makes the dialogs jQuery spawns feel more like the traditional Movable Type dialog. The result is a dialog that looks and feels no different than what users are accustomed to, but that is faster, snappier and more feature rich, allowing users to resize and move the dialog around on the screen. Take a look:

jQuery Dialog Theme

To use the skin you need to include the skin's css (downloadable below) on your page. Then when you spawn the dialog you need to set the dialog's class to "mt" like so:

$(document).ready(function() {
  $("#replyDialog").dialog({
    modal: true,
    width: 660,
    height: 495,
    dialogClass: "mt",
    autoOpen: false,
    overlay: { opacity: 0.5, background: "black" }
  });
});

Download the skin from the link below, and everyone thank iThemes for their continued support of Movable Type and their gracious contributions to the Movable Type Open Source community!

The Custom Header Plugin for Movable Type makes it easy for users to upload and customize the header for their blog. It uses javascript and Ajax to make the customization process as seamless, intuitive and painless as possible. No knowledge of HTML or CSS is required, but the theme you are using must explicitly support this plugin. Here are a list of features the plugin has:

  • Upload and crop a photo or image to use as a header
  • Automatically restricts your cropped image to the proper aspect ratio for your header (according to your theme's design)
  • If you make a slight mistake, easily re-crop the image to fine tune your header exactly the way you want it.
  • Your cropped header and the original file you uploaded is managed for you within Movable Type's asset management framework.

Download

Installation

This plugin is installed just like any other Movable Type Plugin.

Screenshots

Custom Header Screenshot

Custom Header Screenshot (cropping)


Usage

Users

Custom Header MenuTo use the Custom Header plugin you must first apply a template set to your blog that supports the plugin. You will know if you plugin supports the Custom Header plugin because a "Custom Header" menu option will appear under your Design menu.

To customize your header, select "Custom Header" from the Design menu. Then select a photo to upload and click the "Upload" button. A dialog will automatically appear allowing you to crop the photo you upload. When the area has been selected that you want to use for your header, click the "Crop" button.

That's it. Your header is ready to be used. Republish your blog and your header will appear.

Template Sets Known to Support Custom Header

Designers and Theme Developers

To add support for this plugin to your theme or template set, you will need to edit your template set's definition within its config.yaml file. The definition is simple and defines the max width and height for the header that your users will be allowed to upload. The definition looks like this:

custom_header:
  max_width: 780
  max_height: 125

This definition should be placed within your template set's config.yaml like so:

template_sets:
  awesome:
    base_path: templates
    label: 'My Awesome Blog Theme'
    custom_header:
      max_width: 780
      max_height: 125
    templates:
      archive:
        category_entry_listing:
          snip...

Once this is in place and a users installs this template set, then a "Custom Header" menu option will automatically appear under the Design menu.

Template Tags

<mt:CustomHeaderAsset>

This template tag puts the current blog's header asset into context. That means that because the Custom Header plugin utilizes Movable Type's asset management framework you can utilize all of MT's asset related template tags in order to display all manner of information about your header. For example, this tag will display an HTML image tag for your header:

<mt:CustomHeaderAsset>
   <img src="<mt:AssetURL>" 
         width="<mt:AssetProperty property="image_width">"
         height="<mt:AssetProperty property="image_height">>
</mt:CustomHeaderAsset>

If there is no custom header associated with the current blog then this tag will return an empty string.

<mt:CustomHeaderMaxWidth>

This template tag returns the maximum width allowed for the custom header defined by the current template set.

<mt:CustomHeaderMaxHeight>

This template tag returns the maximum height allowed for the custom header defined by the current template set.

<mt:AssetParent>

This template tag puts the parent asset, or the asset from which the current asset was derived, into context. This is useful for example if you want to display not only the header image, but the original image from which the header image was cropped. For example, the following template code will display a thumbnail of the original image for the current header image:

<mt:CustomHeaderImage>
  <mt:AssetParent>
    <mt:AssetThumbnail width="200">
  </mt:AssetParent>
</mt:CustomHeaderImage>

Known Issues

  • This plugin currently only works for Themes and Template Sets that explicitly support the custom_header directive in their configuration files.
  • Your blog must be republished after uploading a new header.
1


Recent Comments

Close