|
|
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)
Ok, we have our Text Fields and our Submit button in place, now what? Now we have to give our form some functionality. The most common feature that will be used is to have the results of the form emailed back to you or to an administer of the data. Click the "Edit Email Settings" tab (Figure 1.5) to setup this functionality.
 Figure 1.5 (Click the "Edit Email Settings" tab to manipulate email functionality)
Here you'll see that Sitemason lets you know that if you want "to send an email each time a form is submitted, click the "Add" button." Thanks Sitemason! By choosing "Add" a pop-up window will be launched (Figure 1.6) for you to edit the email settings.
 Figure 1.6 (Configure settings to send an email when a form is submitted)
Here you have hundreds of combinations to manipulate the data to get the results you want in an email to you, or to the user who filled out the form. First lets go through an example of wanting to receive an email with just the info entered into the fields. Remember, this is all how you want the EMAIL to appear with the fields and doesn't manipulate the data itself. In this first example, the "From Name" is going to be the name the user entered when they filled out the form. So place your cursor in the "From Name" text box and from the "Insert a field" drop down menu, choose the "name" field. Your available options in the "Insert a field" drop-down menu are going to be limited to the fields you've created for your form. There are some additional default fields you can add (Figure 1.7) that give you even more info from the user's web browser for those that are data hungry.
 Figure 1.7 (Fields available for the submission email)
For our example, we've used the "name" field and entered it into the "From Name" text box so that the email you receive appears to be from the person that filled out the form. Same goes for "From Email Address." Your email will appear to be coming directly from the user's email address. The "To Email Address" is going to be whatever email address you want the form submission sent to. In this case we're using "support@sitemason.com." The "Email Subject" should be self explanatory. This is whatever you want the email to say in the subject line of the email being sent to you. We used "Custom Form Tutorial. Now the meat of the email message. You'll want to label each line in which you're receiving data from. We wrote out "Name:" and then used the "Insert a field" drop-down to choose the name field. It's good practice to do this because if you don't you'll get the email with just the data and no reference to what it is. For example, in a more complicated form, if you had multiple emails and phone numbers, you'd have a hard time discerning which was primary, secondary, etc. Figure 1.8 shows what our email message settings look like when they're all filled out.
 Figure 1.8 (A completed Email Message settings window)
After you've added the Email Message functionality, you're ready to try out your form! If you click the "View My Web Tool" button in the top left of your screen (Figure 1.9) you will see your form in a new pop-up window and you're ready to try it out. Enter some sample data to test and see if it comes to your inbox! Figure 1.10 is a view of a filled out form in the "View My Web Tool" pop-up window. Hit the submit button and check your email. See if you have any new mail!
 Figure 1.9 (View My Web Tool button)  Figure 1.10 (Preview of tool in pop-up window)
If you created your form correctly you should have an email to whichever address you chose for the "To Email Address" text box. Figure 1.11 shows what it looked like in Sitemason's inbox.
 Figure 1.11 (Form results in an Email)
Later we will be adding instructions for creating a thanks page, multi page forms, and workflows. Let us know what you'd like to learn more about by contacting support@sitemason.com.
|
|
Support