How to make a web form and get it online quickly

Coding a web form is a long, tedious process. However, there is an easier way.

Using Simfatic Forms you can quickly create feature-rich web forms without coding. You just have to design the form using the visual editor; Simfatic Forms generates all the required code. You don’t have to worry about coding HTML, CSS JavaScript or PHP.

Even if you know coding, and do forms regularly, Simfatic Forms saves you all the time spent on coding and lets you focus on the form design.

This tutorial takes you step-by-step through the process of creating a web form using Simfatic Forms and getting it online.

First, download a Free trial version of Simfatic Forms.
[click to continue…]

Simfatic Forms Validation: save your time coding

This is in continuation of the JavaScript form validation script explained here.

Simfatic Forms is a complete web form development software. You can create forms add form validations, select your options for server side processing, generate the script and install the form on the web server. No coding required.

This page takes you through some of the form validation features of Simfatic Forms.
[click to continue…]

JavaScript Form Validation Script: More features

This is in continuation of the JavaScript Form Validation script in this page. In this page, we will see some of the advanced features of the script.

Showing all the form validation errors together in a message box

If you want to show all the error messages together, then just call the EnableMsgsTogether() function as shown below.

frmvalidator.EnableMsgsTogether();

[click to continue…]

Using the window.close method

It may be needed that you need to give a close link in the popup you created. The window.close () method could be used to close a window.

However, there are certain security restrictions for using the close() method.

The close method closes only windows opened by JavaScript using the open method. If you attempt to close any other window, a confirm message is displayed, asking the user to choose whether the window is to be closed or not.
[click to continue…]

Using the window.open method

The syntax of the window.open method is given below:
open (URL, windowName[, windowFeatures])

URL
The URL of the page to open in the new window. This argument could be blank.

windowName
A name to be given to the new window. The name can be used to refer this window again.

windowFeatures
A string that determines the various window features to be included in the popup window (like status bar, address bar etc)
[click to continue…]

JavaScript Popup Windows

JavaScript popups are handy to display help information or to zoom in an Image.

There are different types of Popups. The first type is a new browser window opened using the window.open() function. Such types of Popup windows were overused and exploited by many websites during the earlier days of the web. This resulted in the later versions of browsers blocking popup windows. Eventually, popup windows became almost extinct now. Automatically opening popup windows is considered a very bad practice.

Div based popups

Div is a block of content enclosed with the <div> and </div> tags. Unlike the browser window popups, div based popups are less intrusive and are often very useful.

There are a number of ways to use a popup.

Tooltips

JavScript tooltip

Tooltips are useful pieces of information displayed usually on moving the mouse cursor on top of an element.
(like an image or a link). The qTip jQuery plugin is good to show tool tips.

jQuery is a great JavaScript Library. You can learn it here

Here are the steps to create some cool tool tips:

For the elements that you need the tooltip, give a unique id attribute. For this example, we add an id attribute to the hyper link like this:

<a href='#' id='link_example1'>The tooltip Link</a>

Now, add the following code to your page within the <head> and </head> tags:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
    $('#link_example1').qtip(
    {
     content:'A simple tooltip for the link',
     style: {name: 'dark', tip: 'topLeft'}
    });
});
</script>

The first line adds jQuery to to your page. If you already have jQuery included in your page, no need to add that line.
The second line adds the tooltip library qTip. (You can download the script from here and don’t forget to upload the script to your website )

The line below creates the tooltip:

$('#link_example1').qtip(
    {
     content:'A simple tooltip for the link',
     style: {name: 'dark', tip: 'topLeft'}
    });

As you might have noticed, this attaches the tooltip to the element with the unique ID link_example1

See the jQuery tooltip demo here

The qTip jQuery plugin has a huge set of customizable options. See the documentation.

Popup on clicking a link

Colorbox is another good Popup jQuery plugin. The example below shows how to open a modal popup when a link is clicked

First, the link:

<a href='content_help.html' id='link_content' >Help Link</a>

Notice that the link points to ‘content_help.html’ we want to open ‘content_help.html’ in a popup.

Now, the popup code:
Put the code below between <head> and </head> tags of your page.

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function()
    {
        $('#link_content').colorbox({opacity:0.3});
    });
</script>

Notice that the ID of the link is link_content.

The code below opens the popup.

$('#link_content').colorbox({opacity:0.3});

You can provide any valid link (like an image ) in he href attribute of the link. The colorbox plugin grabs it and puts it in the popup.

See the Popup demo here

For more options and customization, see the colorbox documentation page

Opening a popup on loading the page

We can use Colorbox plugin to open a popup on loading the page as well.
Here is the code (put it inside <head> and </head> tags of your page ) :

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
    $(window).bind('load',
        function(e)
        {
            $.colorbox({opacity:0.3, href:"offer.html"});
        });
});
</script>

The code opens the page “offer.html” in the popup:

$.colorbox({opacity:0.3, href:"offer.html"});

See the popup demo here

Delayed popup

A slight change in the code above can delay the popup for a few seconds.

$(function()
{
$(window).bind('load',
    function(e)
    {
    window.setTimeout(function()
        {
         $.colorbox({opacity:0.3, href:"offer.html"});
        }, /*timeout->*/ 2000);
    });
});

Delayed popup demo

You can download the samples here

From an HTML Form to an Email Inbox

Getting the HTML form data in the email inbox will be a very convenient way to collect user responses very quickly. Except, when you have hundreds of responses per day! Here are the methods you have to get the HTML form data in your email inbox.

One quick and simple method is to use the ‘mailto:you@yourdomain.com’ in the ‘action’ field of the form. This method is very simple; but has many drawbacks.
See the article: Can JavaScript Email a Form?
[click to continue…]