Forums/Community/Support tips & notes

Putting Your New Custom Form in a Popup

Adam
posted this on June 12, 2012 13:34

1. Introduction

All of the code from this lesson is available on GitHub @ https://github.com/apanzerj/Former-For-Zendesk/tree/Lesson-2-Branch
Objective: Let's put the new ticket creation form we created in Lesson 1 into a popup box. To do this we're going use a Javascript library called jQuery and jQuery User Interface. These two libraries make a lot of the "niceties" of Zendesk possible. When we're done you'll have something like this: http://jsfiddle.net/apanzerj/eARdt/ (click the Show Form button). 
Setup
  1. To set this up we need to get the locations of the two libraries we are going to use. I use a special site, http://scriptsrc.net/, to find these useful tools.
  2. Once you get there, click the link to copy the jQuery library first. As of this writing you should end up with something like this:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.7.2/jQuery.min.js"></script>
  3. Put this in your HTML document from the previous lesson. This is going to be in the "former.html" file we made, but you'll need to add a <head> and </head> tags. The final product should look like this (The blue part is the added part and yes, the picture is clipped off but the concept is there):
    ?name=clipped.png
  4. Do the same thing but this time with the jQuery User Interface (jQueryUI) library.
  5. We'll need to update the form with labels. We want to enclose each piece of text with a <label for= tag, such that the name line (for example) looks as follows:
    <p><label for="z_name">Name: </label><input type="text" name="z_name"></p>
    The added parts are in bold.
  6. Do this for each input element in our form. In addition, place a <div> around the contents of the form (but not the form itself). Thus you'll have the following:
  7. Now that we have the HTML portion taken care of, we need to move on to our Javascript portion. If you're familiar with Javascript but not jQuery this might be a bit different from what you're used to seeing.

2. Hello Caller, What's Your jQuery?

The jQuery wiring behind our form.
  1. We'll start with the basic opener for all Javascript. The script tag.
    <script type="JavaScript">
  2. You'll need to add a close tag also, which is: </script>. All of your Javascript code needs to go BETWEEN these statements.
  3. In jQuery you usually want to execute your code after the document has loaded (or become "ready") for the user. To do this we open with the following block:
    $(document).ready(function(){
  4. Notice that we opened a ( and a { so we'll need to close this when we're done. Thus the last part of this script will be });
  5. We'll want to tell jQuery that the div called box_form has our form in it. When we do, jQuery place the contents in a dialog box. In addition, we are also telling jQuery that we are creating a new Dialog object, and it will have specific properties (in the next step). To do this we write the following:
    $('#box_form').dialog({
  6. The next few lines set the parameters of the new dialog. We do not want it to open automatically when the page loads (we want the user to click the button). We set the height and width, and lastly we set the box to modal (It prevents the user from seeing the background or clicking on other stuff).
    autoOpen: false,
    height: 375,
    width: 350,
    modal: true,
  7. Now we'll put some buttons in too. We want two buttons, ideally, a cancel and a submit button. To do this, we'll use the following code:
      buttons: [
                {
                text: "Cancel",
                click: function() {
                    $(this).dialog("close");
                }},
                {
                text: "Submit",
                click: function() {
                    $('#zFormer').submit();
                }}
            ]
    Explanation (can be skipped - if you do pickup at part 8):
    The "[" character tells jQuery what follows is an array (think of it like a list of things, in this case, buttons). The "{" is an object marker (think of this as similar to the jQuery object from the previous tutorial). We have two properties for our button: the text of the button and the function (code) that executes when we click it. Our first button is the Cancel button, and the action it takes is $(this).dialog("close"). The "$(this)" object refers to the dialog and the dialog("close") simply tells us to close it (the opposite, obviously of dialog("open") which you'll see later).
    The next button is our submit button. The action assigned to it says: "Find the element id labeled zFormer and submit it. This is the same as if we had an HTML <input type="submit" element and clicked on it.
  8. Close out your dialog code with a }); at the end so that we tell jQuery we're done with the dialog object. The entire dialog object, put together will look as follows:
  9. We're almost there. We've got to find a way to trigger the dialog box. We'll attach the dialog to the button at the bottom of our HTML called "Clicky" with the display value of "Show Form". This is a smaller piece of code.
    $('#clicky').button().click(function() {
            $("#box_form").dialog("open");
    });
    This tells jQuery when the user clicks on the element clicky which is a button to find the div element box_form and open the dialog associated with it.
  10. Finish off your jQuery by remembering to close out our brackets and such. You'll tack on a }); and be done for the most part with jQuery.

3. I Can CSS Clearly Now the Rain is Gone

Organizing and arranging our dialog box.
  1. We need to tell the browser that we want what follows to be treated as CSS styling. So we use the <style> tag, as follows:
    <style type="text/css">
  2. Make sure to add a close tag for our style section as well. You should have something like this:
    <style type="text/css"> </style>
  3. You'll put all your CSS code between these two style tags.
  4. We don't want to style anything on the page except the elements in our div. To do this, we need to give CSS some selectors.
  5. Set the font size to 12 pixels on all elements in the div (and all it's child elements too). We also want to give everything some space. So we adjust the lower margins to 15px (a gutter of 15 pixels):
    #box_form > *{
        font-size:12px;
        margin-bottom:15px;
    }
  6. Next we're going to tell the browser to treat all label elements (those tags we added previously) as block elements (this means they get their own line to themselves). Because these are labels we should also make their font a little bigger. So we'll toss in a font size increase to 18 pixels.
    #box_form > p > label{
        display:block;
        font-size:18px;
    }
  7. Now we make it so that our 3 inputs (the text boxes) and our multi-line description box (the textarea) are each long enough to span the page entirely. To do this we add the following CSS:
    #box_form > p > input, #box_form > p > textarea{
            width:300px;
    }

4. Plain As Day

Let's make this look snappier!
  1. So now we have some text that floats in the middle of the screen with our form on it. It doesn't look very stylish but it gets the job done. What if we wanted it to look better? Thankfully jQuery has this already figured this out for us, with themes.
  2. Themes can be previewed over at http://jqueryui.com/themeroller/ (Hint: Click on Gallery to see the pre-made ones).
  3. When you find one you like go back to the tab called Roll Your Own and click Download theme.
  4. In this case, I really like the theme called vader. We'll need to put this CSS file with our code in the same directory. In your HTML file make sure to include the following:
    <link rel="stylesheet" type="text/css" href="jquery-ui.css">
  5. Now save your file and hit refresh. Voila! It looks a lot nicer now.

Next lesson

In the next lesson, I'll show you how to open your popup ticket form from a tab.