Embedding a Zoho Creator Application in your Blog

Howdy doody folks…it’s me again. Your friendly (non)contributing author, Alan Bradford. After the invitation from Pete last August, things have been pretty hectic around my place. You see, in August I also got a call from the ASU Technology Office in response to a blog post I had written about going back to school full time. Long story short, I am now officially getting paid to blog for ASU. Which is actually exactly why I have something to say here at LoZC.

One of the great features of Zoho Creator is the ability to easily embed an application (view or form) on a website or blog. I recently updated the contact page on my blog for ASU, so I wanted to show everyone here how easy it was. Once you have your application created, the fun begins. In my case, the application is a simple contact database. I will use this as the example in all the screenshots. So before I get started with fancy thumbnail images and steps, I’m assuming you have already learned how to create an application. For those of you who don’t know how yet, I’ll wait a few seconds for you to create a Zoho account and make your first application. (Seriously folks, it’s so easy.)

Okay. Ready? Let’s learn… (click the images for a bigger view)

Step 1: With your application open in edit mode, click on the big yellow button to access the application.

Step 2: At the top of your form (or view), there is a “more actions” button. Hover over it and then select the “embed in your website” button.

Step 3: A popup window will display. In this window is a field with a bunch of code. If you like the way the form looks, simply copy the code and paste it into a page on your blog or website.

Step 3a: You can also customize the look and contents of the form if you like. Click the “customize items” tab to change things such as the submit/reset button labels, set a URL for the page to point to after a user clicks submit, customize the message that displays after a form is submitted.

Step 3b: Crazy about customization? Don’t stop now! Click the “customize look” tab to change the color of the form border and heading. This is perfect for making the form blend into the existing look of your website or blog.

Step 4: After you’ve customized your form to your heart’s content, copy the code and paste it into a page on your website or blog that accepts HTML. In my case, I pasted the form of my application on my Contact page in Wordpress.

Sorry if you were expecting something more complicated, because we’re all done. Feel free to check out my finished product over at Geek Stew.

A couple of considerations when you’re building your application with the intent to place it on a website.

1. You will probably want to know when a new record is added.
2. Your customers/visitors will probably want to know that their information was received after they clicked “submit.”

Creator makes this easy by allowing you to set email notifications in forms. You can set your application to automatically email you letting you know there is a new record. You can also set an automatic email to be sent to the person filling out the form, provided an email address was one of the required fields on your form. From the edit interface, there is a familiar button at the top of your form that says “more actions.” Hover over it and select the “set email notification” button. I’ll give you a thumbnail to whet your appetite:

Stay tuned for a step-by-step tutorial on how to use the email notification features. It may have to wait a while though, because I need to study for finals…

ZC …to the Future!

Goal:

Update a Zoho Creator application on an automatic schedule.

Ideas:

The example application borrows some categories from Flexo’s Income and Expense Report to create a ZC financial report. The unique feature of this application is that it uses a free account at LetterMeLater to periodically update the report with the monthly fixed amounts (so you don’t have to) while the form fields that are intended for monthly variable amounts are left visible so the user can manually enter them each month.

Since LetterMeLater has a feature called Recurring Emails, we’ll be able to configure it to update our fixed values for us on whichever day of the month they are expected to be credited to or debited from our account.

Blabber:

For reference, here are the lists of fixed and variable fields in the example application. All are provided to either receive an automatic or manual update so we can track our income and personal expenses.

We hide the fixed fields on the user form, since those are going to be automatically populated on a schedule using a LetterMeLater account:

The example application also keeps a running total of monthly income and expenses. It’s currently set up to store those calculations through December of 2009. If you copy this application for your own use, you’ll have to seed that form with the “0 records” for each month/year combo, using the method explained in Poor Man’s GROUP BY.

BEHAVIOR

This ZC application behaves as one would expect when it comes to supporting the manual fields (the ones that are visible in the forms). For those the user is expected to log in periodically and submit their financial data. But for the automated fields (the hidden ones), the user should register for a free LetterMeLater account and schedule the payments and credits in whatever way makes sense. That way, they don’t have to remember to enter them. Here’s what a LML screen might look like as the user configures it to their next 5 upcoming paychecks:

For the example application, I used LML to schedule 19 emails related to some fictional, monthly paycheck-related payments through November as well as 129 daily payments for internet access in the amount of $3.45/day.

Related Links:

Sendmail on deadline, LetterMeLater…

ZC Weirdness (potential bugs in the system):

None!