Archive for March, 2009

Adding a form to your web site

Tuesday, March 31st, 2009

We recently learned of a great online service that allows you to create a FREE custom form (with no programming needed) in just minutes, so we wanted to share this useful information with WebSpawner users.

Adding a form to your web site is a great way to collect contact or other information from your site’s visitors. Here is a picture of a sample contact form:

sampleform

EmailMeForm.com provides a simple online form generator… you can create a custom form and add it to your WebSpawner web site in minutes. Registration and creation of one form is FREE (they also offer an optional paid upgrade to allow for multiple forms and additional features). When a visitor fills out your form on your site, you’ll receive an email message from EmailMeForm.com containing the visitor’s input information.

In this post we will walk step-by-step through the process of creating a form for use on a WebSpawner web site.

To get started creating your own form, go to www.EmailMeForm.com and click the Signup for Free link.

emailmeformsignupbutton

You’ll see a brief sign-up form. Enter your First and Last Name, a Username, a Password (and Re-type it as requested), and a valid Email address (this is important as it used to verify your registration, so be sure it is entered correctly). Then click the Sign Up button as shown.

emailmeformsignupform

Next you will receive an email message from EmailMeForm.com which contains a verification link. Check your email and locate the message, then click the verification link. You should then see a confirmation message like the following one in your web browser:

emailmeformconfirmation

Click the here link in the “Please click here to go into your Control Panel” message as shown above.

Next, in the Control Panel screen, click the Create new form option in the Navigation Bar:

creationnewformoption

Now you will see Step 1 of the Web Form Creation Wizard:

webformstep1

  • Enter a Web Form Name (such as “Contact Form”);
  • Enter one or more Recipient Email Addresses (this is where EmailMeForm.com will send the information that visitors enter into your web site form so make sure you enter at least one valid address of your own);
  • Enter an optional Email Address to receive any input that EmailMeForm interprets as spam (this can be left blank if you like);
  • Enter a full URL address for a Thank You page (if you have created one in your web site) or just enter the address for your WebSpawner web site’s index page if you prefer;
  • Enter the number of input fields that you would like your form to have (4 for example);
  • Then click the Next button.

Next you will see Step 2:

webformstep2

  • Enter the Field Name that you wish to appear for each field of your form (for example: “Your Name” and “Your Email Address” and so on);
  • Use the pull-down menus to select the other options for each field, including Text effects (Bold or Italic if you like), Field Type (text, checkboxes, radio buttons, etc.) and Required input (Yes or No);
  • Then click the Next button to proceed.

Step 3 of the Web Form Wizard allows you to set specific column and row sizes if you wish; however, default values will automatically appear based upon your previous selections, so you can simply leave these settings as is and click the Next button if you like:

webformstep3

Step 4 will appear next. This step contains a number of optional customization features that you can tinker with if you like, or to simplify things just leave everything as is and scroll down to the bottom. In the last option called ‘Display Mode’ step you should click the first button labeled “Web Form will be inside the web page, visitor never leaves the site” and then click the Next button:

webformstep4

Step 5 contains more optional settings that you can modify if you like, or to keep things easy simply leave these as is and click Next as shown.

webformstep5

Step 6 of the Wizard will show you a preview of the form you have created, as shown below. You can click the Back button to return to earlier steps and make changes if you like, or if you like the form as is, click the Finish button to complete the process.

webformstep6

Creation of your form is now complete, and a message confirming this will appear… now you’ll need to click the “Get the HTML Code” link in the message, as shown below.

webformcreationcomplete

In the next window titled “Get the HTML Code for your forms” select your form in the pull-down menu, and click the button labeled “Get HTML for displaying the form inside a page on your site.” Your HTML code will appear in the box below… click inside the box as shown in the image below and Select All of the code (Control-A on a Windows computer or Command-A on a Mac), then Copy it (Control-C on Windows or Command-C on Mac).

copyEmailMeformcode

Now you are ready to open a new window in your web browser and log into your WebSpawner website account at www.webspawner.com (hint: keep the EmailMeForm browser window with the HTML code open in case you make a mistake and need to copy it again).

In the WebSpawner Member Menu, click to select the page to which you would like to add your new form, then click the Modify button.

In the Modification form, scroll down to the Body Text step and click inside the text box where you would like your form to appear (that is, above, below, or in the middle of any existing text on your page). Now Paste in the copied code (Control-V on Windows or Command-V on Mac). Complete the modification process by clicking ‘Continue’ at the bottom of the form, and then click ‘I Like It’ at the test page preview to publish your changes.

Your website will now include your new form for visitors to see, and when a visitor completes the form, the information entered will be sent to you in an email message from EmailMeForm.com.

Adding a music player to your site

Saturday, March 7th, 2009

Check out this cool music player, courtesy of playlist.com (go ahead, click the Play button or click on a song):

In a few easy steps you can add a great music player like this (with your own song selections) to your web site for FREE; in this post, we’ll show you how.

To begin, in a new browser window go to www.playlist.com.

Next you’ll need to create a free playlist.com account; click the Sign up button or link. You’ll see a form like this one:

playlistsignup1

Fill in the form with a Username and an Email Address (be sure the address you provide is a valid one that you can access). Enter a Password, then re-enter the Password Again as requested, and click the Continue button.

Now you’ll see a form like this:

playlistsignup2

Fill in your First and Last Name, and enter your Birthdate and Gender, then click the Sign up! button.

An ad will display asking you to select your cellphone carrier… you can bypass this if you are not interested by clicking the link at the top that says “No thanks, continue to my Project Playlist account.” Then you’ll see the following confirmation that your account has been created:

playlistsearchbar

Now you’re ready to start selecting your songs from the many songs uploaded by other playlist.com users. Enter a song or artist name and click the Search button. The results of your search will display like the example below:

playlistsearchresults

Click the triangular Play button (as shown in the image above) to hear a song file, and when you’ve found one that you like click the plus-shaped Add button (just under the Play button) to add the song to your own playlist. Continue searching and adding songs as you like.

A sample music player appears to the right of the search results, and will reflect the songs that you have added so far, as shown in the example below:

playersample

The little pencil icon at the top of the player allows you to edit your playlist… click the pencil and then click and drag songs up or down to change the song order, or double-click the little button marked X to the right of a song to remove it.

When you’ve finished adding songs to your playlist, click the EMBED link at the bottom-right of the sample player (shown in the image above).

You’ll be asked “Where do you want to put your playlist?” and you will need to click the last answer labeled E: Get the code for any other social network, blog, or your own personal website.

Then you’ll be prompted to “Choose which of your playlists you want to get the code for:” and you’ll need to click on your desired playlist (if you’ve created more than one, they will all appear in the list).

Next the Player Configuration options will appear as shown below.

playlistconfig

Use the pull-down menus to answer the three questions regarding Autostart, Random/Shuffle, and Custom Skin (we recommend choosing “No” for all three). Then select your desired music player color from the pull-down list. When finished, click the green Get Code button as shown above.

A box will appear like the one below:

playlistcodebox

Click inside the box and select all of the code (use Control-A on a Windows keyboard or Command-A on a Mac), and then Copy that code (Control-C on Windows, or Command-C on a Mac).

Open a new browser window (but keep the code window open in case you need to go back to it), and log in to your WebSpawner account at www.webspawner.com.

In the WebSpawner Member Menu, click to select the page to which you would like to add your music player, then click the Modify button.

In the Modification form, scroll down to the Body Text step and click inside the text box where you would like your music player to appear (that is, above, below, or in the middle of any existing text on your page). Now Paste in the copied code (Control-V on Windows or Command-V on Mac). Complete the process by clicking ‘Continue’ at the bottom of the form, and then click ‘I Like It’ at the test page preview to publish your changes.

Your website will now include your music player for all viewers to enjoy.

If you ever want to change the songs in the music player on your web site, just log back into your playlist.com account and modify the same playlist; any new songs that you add will automatically appear in the music player on your website, without the need to copy and paste the player code again. Very cool indeed!