WebSpawner.com Blog

A few weeks back I posted here on adding a form to your web site using a provider called EmailMeForm.com. I had used their service to prepare a basic contact form for another web site I maintain, finding their form creation process simple and the appearance of the form pleasing, which lead me to post about the service here. However, I recently discovered that some visitors were getting a pop-up window upon their completion of the form which loads a totally unrelated web site (this did not occur in my initial testing or the first several weeks of use); when I attempted to reach EmailMeForm about the matter I did not receive a response. Accordingly, I set out to create a replacement form for my site and discovered FormSmarts.com, which is even easier to use and contains no ads or pop-up windows. As no HTML coding is needed, FormSmarts is a convenient form-creation solution for WebSpawner users, and after thorough testing I feel the service is worthy of recommendation.

To create and add a FormSmarts form to your own WebSpawner web site, you will first need to create a free FormSmarts account. Open a new browser window and go to FormSmarts.com, then click the Sign Up link near the top of the page. A secure sign-up form will appear, as shown below:

Enter your First and Last Name and your valid Email address; type in a Password and type it again to Confirm Password, and use the pull-down menus to select your Activity and Country. Click to place a check in the box to agree with the terms of use (after reading them of course), then click the Sign me up! button.

You should see a message confirming the creation of your account and advising that you must confirm your email address next to activate it. Check your email to receive a message from FormSmarts.com like the one shown below, and click the link to confirm your email address:

A new FormSmarts window will open in your browser, confirming “Registration Complete”. Click Sign in and create forms now >> at the bottom of that window to proceed.

On the next screen, enter your Email address and your Password, then click the Sign in button:

Now that you’ve created your account, confirmed your email, and signed in, you’re ready to build a form for your site. You should see a My Web Forms screen with three tabs labeled Forms, Fields, and Settings, like the one below (click the Forms tab to bring it to the front if it is not currently selected as shown):

Under ‘Create a form’ enter a Form Name which you will use to identify your form, such as “Contact Form.” Enter a Form Title such as “Contact Me.” The Form Filling Instructions field is optional; you can enter instructions there if you like, following the example provided. Under Return URL enter the complete URL address (including the http:// portion) for your WebSpawner web site. Then click the Create Form button. You should see a message confirming the creation of your form like the one below:

Click add fields as shown (or just click the Fields tab near the top) to proceed… the screen will update as shown here:

As indicated, “No fields are attached to this form” yet so you need to add the fields as you wish. Click in the box and enter a Field Name and Description for your first field. Use the pull-down menu to select an appropriate Data Type and Widget for the field, and under the Optional menu select “Yes” to allow a user the option to submit the form without filling in this field, or select “No” to require the user to complete the field before submission. Click the Add Field button to add this new field to your form. Then repeat these steps to add each additional field, as shown in the example below:

Note that you can have 4 fields per form in a free FormSmarts account; an optional paid upgrade to “FormSmarts Pro” is available for additional fields and features. You can edit any field by clicking the small pencil icon if needed.

At this point you are now finished with the form creation and just need to add the form to your web site (covered below). By default, when a visitor completes your form FormSmarts will send an email containing the visitor’s input to the Email Address you provided during creation of your account. If you want a copy of the form input emails to be sent to an additional email address, you can do this as well; click the Settings tab as shown above to proceed. The screen will then refresh; click the Form Recipients link under the Settings tab:

Under “Add a Recipient” enter the Name and Email address which you would like to have receive a copy of every form input message, then click the Add button, as shown below:

When you are finished making your changes to your form and are ready to add it to your web site, click the Forms tab at the top again. Next to your form, under the “Embed” heading, click inside the box (which contains the needed code for your new form) as shown below.

The code in the box should be selected; Copy it using Control-C on a Windows computer or Command-C on a Mac.

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 FormSmarts window with the 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. 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, similar to the example shown below. When a visitor completes the form on your site, the information entered will be sent to you promptly in an email message from FormSmarts.com.

Would you like to greet your web site’s visitors with a song of your choice or a sound recording of your own voice welcoming them to your site? You can take any MP3 audio recording or music file on your computer and add it to your WebSpawner web site for free in just a few steps using a great online service called divShare.

To begin, open a new window in your web browser and go to www.divshare.com.

Locate the box labeled “Create a Free Account” as shown below. Enter your First Name and a valid E-mail Address, then choose and enter a Password you will remember and then re-enter it in the Confirm PW box. Then click the Sign Up button.

Next you will be shown a code which you will need to type to create your account and then click the Sign Up> button, as shown here:

You should receive an e-mail from divShare soon which contains a link which you will need to click within 24 hours to “confirm” your account, but even if you haven’t received that e-mail yet you can proceed to upload an MP3 file of your choosing now.

In the Member Dashboard screen, locate and click the Upload a new file button:

In the Upload screen click the Choose File button. Find the sound or music file on your computer and select it, then click the Upload button as shown below.

A progress bar will indicate the uploading status and when the upload is complete a confirmation message will appear like the one below. Click the more options button:

Now click inside the top box labeled Embed MP3 as shown below. Select all of the code (Control-A on a Windows computer or Command-A on a Mac) and Copy it (Control-C on Windows or Command-C on Mac).

Now open a new browser window and go to www.webspawner.com, then proceed to log in to your WebSpawner account with your UserName and Password (or, if you haven’t created a WebSpawner account yet, you can create one for FREE by clicking the green Sign Up Now button the WebSpawner homepage).

In the WebSpawner Member Menu, select your page under Step 1 and click the Modify button under Step 2:

Scroll down in the Modification form to the Body Text step and click inside the box (click above or below any text you have entered there to make your embedded sound file appear above or below the text on your web page as you wish). Now paste your copied code into the Body Text box (Control-V in Windows or Command-V on a Mac) so it appears, as shown here:

At the bottom of the Modification form, click the Continue button. Then, at the test page preview, click the I Like It button to save and publish your changes.

Your web site will now contain your sound file. The embedded audio player will appear on your webpage like our example below, with controls that allow a viewer to play and pause the sound file and adjust the sound volume.

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:

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.

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.

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:

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:

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

• 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:

• 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:

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:

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.

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.

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.

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).

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.

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:

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:

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:

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:

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:

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.

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:

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!