HTML 108.1 – TheSiteWizard Form

web-forms2Finding The Right Contact Form Program

In HTML 108 – Web Forms I mention my favorite site for creating a Contact form program and webpage: TheSiteWizard.com.

You can build a customized script specifically for your site at TheSiteWizard.com. At the time of this writing – I really love this place! They advertise their Wizard as:
TheSiteWizard.com’s Free Customized Feedback Form Wizard creates a FREE feedback form for your website. This allows you to put a Feedback Form or Contact Form on your site so that visitors can send you messages / email or make comments.

In full disclosure, TheSiteWizard site isn’t the greatest user-friendly site I’ve seen.  But I’ve written instructions for what to do on their site for a few friends and it seemed silly not to add that here to my blog as well. So here are my easy instructions for using TheSiteWizard.com site for creating your own form.

On TheSiteWizard.com
What you might like most about them, is that they’ll create both the program and the form code for you. If you want to customize the form and add fields, you’ll have to learn a little more about code than you may want to learn. But you’ve come this far, you can do it! And I’m going to make it real easy for you.

Here’s a step by step process for helping you to get around their site, installing the script and the form and customizing the form for your specific needs.

  1. Go to TheSiteWizard’s configure the PHP Form page.
  2. Scroll down to the “Step 1 of 2” section.
    1. Select the 1st option to Create a PHP Feedback Form (Requires PHP 4.2 or above) on your web hosting sever.
    2. Right beneath that, you’ll need to click on the Step 2 button!
  3. On the Step 2 of 2 page, fill out the requested information.
    1. Enter the email address, URL for the feedback form, thank you page and error page.
      1. You will have to create the thank you and error pages yourself.
    2. Under Advanced Options:
      1. Change the “Feedback Form” field to what you want the subject line to be.
      2. HTML Family to use: Compatible
      3. Make sure the next 3 fields are checked. This requires visitors to enter an email, name & comments.
      4. If you’re creating a CAPTCHA form, enter the public and private captcha keys you got in from Google (learn more about Captcha and how to install it: HTML 108.2 – Captcha).
        If you’re not not installing Captcha, leave this blank.
    3. Scroll down to the bottom, accept terms of service and generate code.
      1. There will be 2 different components created based on the information you entered.
        1. One will be the Contact script/program itself.
        2. One will be the HTML code for the form.
  4. The first code section is the PHP script. You will need to open Notepad for this.
    1. Copy the PHP code into Notepad.
    2. At the bottom of the Notepad window, Change the file type to All Files.
    3. Make sure the file encoding is set to ANSI
    4. Save the file as feedback.php
      You will need to know where within your website you want your contact form to be. So if you’re putting it in a sub-folder, you’ll need to save the PHP script in that same folder.

Now the HTML For Your Form
Once you have the feedback.php script, you’re ready for the 2nd part. Creating and uploading your contact form.

  1. Go back to the SiteWizard, and copy the HTML code for the form.
    1. Paste it into a site feedback form in your HTML editor.
      You’ll need to make some changes to the form to add the fields you want. (But hold off on that until you’re sure the form works as is. Then we’ll customize it.)
    2. Save your HTML form page.
    3. Create your Thank you page.
      It can simply say thank you, or you can add instructions for what to do next, it’s entirely up to you. My thank you pages say this:

      Your Email Has Been Sent
      Thank you for taking the time to visit .
      If you don’t receive a reply within 5 business days, then your email address may
      have been entered incorrectly or your email host is blocking our email addresses from
      Yourdomain.com.
      If you don’t hear back from us, please try to contact us again and ensure your email
      is set up to accept a reply from springwolf.com.
    4. Create your Error page.
      If you have created fields in your form that are required, or if your visitor didn’t enter the correct Captcha, you want to give them an error page. My error page says this:

      Opps, An Error Has Occurred
      Thank you for taking the time to visit.
      One of the fields we require was not filled out. Please make sure you provide us
      with your Name, Email and a brief comment. Use the BACK button on your browser to
      return to the feedback page.

.
Upload Your Files & Test

Now you have your Feedback script, your html page for your form, the thank you and error pages. Time to upload these to your web site. And run a test.

  1. If you’re creating this form as a Captcha form, the last thing you need is the Google recaptchalib.php script. Visit my Captcha page to learn more: HTML 108.2 – Captcha).
  2. The Files all go into the same directory/folder where you want your contact form to be. ie:
    1. mysite.com/contact/
      1. contact.html
      2. cont-tks.html
      3. cont-err.html
      4. recaptchalib.php
      5. feedback.php
  3. Test the form by using it and sending yourself an email.

Hopefully it works right off the bat. If not, visit the SiteWizard’s page for common problems and solutions.

Adding Fields To The Form
Now that you know your form works and you’ve tested it by sending yourself an email, you can customize the form and add additional fields. This requires two steps.

  1. You will need to add the fields to your form itself.
    Do yourself a favor and make a copy of the webpage before you make changes to it. That way you have something to go back to in case you mess up. I typically call the page by the same name and add backup to its name. Ie: contact-backup.html. Then you can change the contact.html and not worry about what it originally said when it worked. You can simply copy the back up and start again.
  2. You will need to include those fields you added to the contact page, into the feedback.php script.
    That’s easier than it sounds. Don’t panic!

Add Fields To The Form
To learn how to add fields to a form, go back to the HTML 108 – Web Form tutorial. When you’ve got your form looking the way you want it, you’ll need to add the additional fields on the form to the PHP script. You will need the exact name of the fields, so you can duplicate them in the script and that means they are case-sensitive. You can write down a list, or keep the form open in source code mode so you can copy and paste the field names from the form to the script to make sure you don’t make any mistakes in typing.

Feedback.php Modification For Adding Fields
If you add or change the fields on the feedback form, you’re also going to have to add or change those fields in the PHP script.

Once your fields have been added to the form, Open NotePad and the Feedback.php script. Save the script to Feedback-original.php. Close that and reopen the Feedback.php file again. This way you have a back up copy of the original script in case you need to go back to it, or restore it.

Below is a portion of the script that you need to look for and what you should add is in RED. There are 2 places where you’ll need to make additions or changes.

Part 1:
Look for the “End of Configurable section” line. Below that you’ll see the 3 fields that were initially generated for you in the form:
$fullname = isset($_POST[‘fullname’]) ? $_POST[‘fullname’] : $_POST[‘name’] ;
$email = $_POST[’email’] ;
$comments = $_POST[‘comments’] ;
.
Beneath the comments line, you can add your customized fields. In this example,

  • I’m adding a comment line “My Form Configuration Section” so I know where my stuff is, in case I need to come back and add or change things again. It makes it easier to find.
  • I’m also adding 2 fields, referredby and topic.

// ——————- My Form Configuration Section ————————————–
$referredby = $_POST[‘referredby’] ;
$topic = $_POST[‘topic’] ;
// ——————- End My Form Configuration Section ——————————-


~~ Here’s a Snippet of the First Section To Change ~~

.
// ——————– END OF CONFIGURABLE SECTION —————     <– Look for this line
.
define( ‘MAX_LINE_LENGTH’, 998 );
$headersep = $uself ? “\n” : “\r\n” ;
$content_nl = $forcelf ? “\n” : (defined(‘PHP_EOL’) ? PHP_EOL : “\n”) ;
$content_type = $use_utf8 ? ‘Content-Type: text/plain; charset=”utf-8″‘ : ‘Content-Type: text/plain; charset=”iso-8859-1″‘ ;
if ($use_sendmailfrom) {
ini_set( ‘sendmail_from’, $mailto );
}
if (strlen($smtp_server_win)) {
ini_set( ‘SMTP’, $smtp_server_win );
}
$envsender = “-f$mailto” ;
$fullname = isset($_POST[‘fullname’]) ? $_POST[‘fullname’] : $_POST[‘name’] ;
$email = $_POST[’email’] ;
$comments = $_POST[‘comments’] ;
.
// ——————- My Form Configuration Section ————————————–
$referredby = $_POST[‘referredby’] ;
$topic = $_POST[‘topic’] ;
// ——————- End My Form Configuration Section ——————————-
.
$http_referrer = getenv( “HTTP_REFERER” );

Part 2
The next section is a little further down. Look for the command $messageproper =
This is where the script formats the email to be sent. So how you list your fields here, is how they will be displayed in the email you receive. In my email, I want the Referred By and Topic fields to come before the Comments.
.


~~ Second Section To Change ~~

.
Remember this is how your email is going to look when you open it in your in box. So be careful how you add your new fields here.
.
$messageproper =
“This message was sent from:” . $content_nl .
“$http_referrer” . $content_nl .
“————————————————————” . $content_nl .
“Name of sender: $fullname” . $content_nl .
“Email of sender: $email” . $content_nl .
    “Referred By: $referredby” . $content_nl .
    “Email Topic: $topic” . $content_nl .
“————————- COMMENTS ————————-” . $content_nl . $content_nl .
wordwrap( $comments, MAX_LINE_LENGTH, $content_nl, true ) . $content_nl . $content_nl .
“————————————————————“

  1. Now save the feedback.php file with your changes.
  2. Upload the form and the feedback.php script to your site.
  3. Test it again by sending yourself another email from your form.
  4. As long as you didn’t make typeos or accidentally remove some of the original code, it should work right off the bat.

That’s all there is to it.

Good Luck.

© 1997-2014 Springwolf, D.D., Ph.D., Springwolf's Kosmos. All Rights Reserved.
© 1997-2014 Springwolf, D.D., Ph.D., Springwolf’s Kosmos. All Rights Reserved.

 

Leave a Reply