Forums/Sitemason Manual: How To Edit Your Website/Custom Form

Getting Started with the Custom Form

Nate Baker
posted this on November 20, 2010 23:37

    Sitemason's Custom Form tool is an incredibly powerful form builder that is only limited by the scope of your imagination.  In this tutorial we'll go through the process of creating an elementary form for practical application purposes and then we'll take a look at some of the advanced capabilities of the custom form tool.

    In Section 1 of our tutorial, we'll create a simple form that asks the user to enter their Name, Email, and Phone number.  We'll then go through the different ways you can manipulate the results.  Lets get started.

    In Figure 1.0 you'll see the form's Sitemason interface that you are familiar with if you've used Sitemason before.  If not, spend a few minutes clicking around getting acquainted with Sitemason. 


Figure 1.0
(Setup and Information Tab)

    The Setup and Information tab outlines the general usability of the tool.  Here you can designate what name it will hold in Sitemason, which group or site you'd like the form to reside, what URL you'll give it, etc, much like you will with any Sitemason tool.  Below the setup and information at the top of the page Sitemason has provided a few helpful links and quick summaries of the other tabs you'll be using while customizing your Custom Form tool. 

    In this example we've renamed our form "Tutorial Form" and set it to the URL. http://www.sitemasonsolutions.com/tutorialform.  Now lets create some fields!

    If you're following along, choose the "Edit Form Fields" tab at the top of your page.  Figure 1.1 shows what the Custom Form Tool looks like before you enter any fields.  Not a whole lot there is there? 

Figure 1.1
(Appearance of Edit Form Fields when selected for the first time)
    This is where you want to start adding and editing your fields.  Like all the other Sitemason tools, you have an "Insert a new..." drop down box that gives you the options that you might like to add to your tool. You'll recognize some of the attributes from other Sitemason tools like Paragraph, Header, File/Picture, etc but you'll also notice quite a few more options which you see in Figure 1.2.


Figure 1.2
(Drop down options list for attributes to add to a Custom Form)

    For now we will just concentrate on adding our Name, Email, and Phone fields.  To add a field, select "Text Field" from the drop down menu, and then choose the orientation of your field (since there isn't anything on this page, we'll just select "At the top of this page"), and then click on "Add & Edit."  A pop-up screen then appears with all of the attributes available that you can manipulate with your field. 

    Figure 1.3 shows the naming convention for the Field Name and the Label.  A note worth mention for the Field Name, whatever unique identifier you choose for the Field Name, keep in mind that it MUST NOT contain spaces or any special characters.  To eliminate confusion when naming your fields, a popular naming practice is to use the underscore ("_") key when you have multiple words. For example a complicated Field Name like "registrationuserlastname" can be separated into "registration_user_last_name."

    Since we want the user to be required to enter their name, we can check the "Required Field?" box and the user wont be able to submit their form without typing in their name. 


Figure 1.3
(Text Field Editor)


    When you click the "Add" button your Text Field will be added.  In Figure 1.4a, You'll see what it looks like after we've added our three Text Fields for Name, Email, and Phone.  We set the Email field as required and left the "Required Field?" unchecked for the Phone field to leave it as an optional field (meaning the user is not required to enter their phone number to process the form).


Figure 1.4a
(Text Fields created in the Custom Form editor)

    Before your form can actually DO something, it needs that o-so-magical "Submit" button.  Otherwise it's just a bunch of pretty fields.  From your "Insert a New..." drop-down menu, select the "Submit Button" and then click "Add & Edit."  You'll then enter the Field Name ("submit" is the default) and the Button Label.  Because we're wildely creative here at Sitemason, we'll label our button "Submit." (Figure 1.4b).


Figure 1.4b
(Submit Button Editor)

    Once you click "Add" in your Submit Button Editor, you'll have a nice shiny new Submit button (Figure 1.4c)


Figure 1.4c
(Custom Form with Submit button)