BestWebForms.com © 2009
 
 
These Instructions are for NOT using the iFrame Code Snippet method.

The EASIEST way to make your web form match the general look of your website is to use the Web Form Designer to use the iFrame Code Snippet Method which will generate the IFRAME Code Snippet. Then just paste the snippet into a page you already have. The page will need to have sufficient space in it so that the form has room to be displayed properly.
Then you should be done
.

The next easiest way is to use the Web Form Designer to use the Non-iFrame Method. Once there, you insert your header and footer code into their fields. Then you are done.

But the most difficult way is as follows: The below few paragraphs explain the very difficult way to make changes without using the Web Form Designer and without using the iFrame Code Snippet Method.

Make the form look like the other pages on your website by using the header.html and footer.html files in /inc directory.

If you do not wish to (or cannot) use the Web Form Designer, then you can follow the steps below.

Create your header and footer pages. There are samples you can use at:
/inc/header-sample.html
and
/inc/footer-sample.html

Currently, the script calls the server for the files "header.html" and "footer.html".
Your header and footer must be named this.
 
There are 2 examples of the header and footer. One is blank and one has a sample menu.
If you wish, you can just rename "header-sample.html" to "header.html" (switch them). This will drop the form code right into the center of the sample header template provided.

You can do the same thing with the "footer.html".

But if you prefer to (or have to) do it "manually", all you need to do is use an existing page from your website, delete a center area AND BOTTOM of the page. Then save it as "header.html" in the directory: /inc/. You will need to change the relative paths to your header images. This all depends on your directory structure. Sometimes just adding a  /  to beginning of your image path is all you need. Other times, a  ../  before the image path. Or, if you really want to be sure, you can just insert the full url of your images. So here are some of the options:

/your-images/my-nice-graphic.jpg

../your-images/my-nice-graphic.jpg

http://www.insert-your-website.com/your-images/my-nice-graphic.jpg

You can also copy your entire image directory and css files over the the /inc directory.

There are many ways to have your images appear properly on your new header.html file.

Now this is very important: Remove the ending/closing code tags from your newly created header.html file. Make sure to name it header.html, and place it in the inc/ directory.

Study the end of the file: header-sample.html in the /inc directory. Make yours like that.
 
Usually, the code of an html page ends with something like:

<p>&nbsp;</p>

</body>

</html>


Do not have your new header.html file end like the above. Instead, using the included /inc/header-sample.html as an example, the new header should not "end".
Our example header ends with:

<tr>
<td valign="bottom">&nbsp;</td>
<td valign="bottom">


Do not end your new header.html file with code like:

</body>

</html>


If you do, then the form will load "outside" or "next to" the page.
If you make this mistake, you will see what I mean. End it similar to header-sample.html.

Lastly, the way you link to your form will be different using this "non-iFrame" method.
Instead of the link to your form being something like:
 
http://www.insert-your-website.com/contact_me.html,

it will instead being something like:
 
http://www.insert-your-website.com/your-directory-name/formbwf.php?f=1
or:
http://insert-your-website.com/directory/formbwf.php?f=contactus-classic.html
 
In the above url "f=1", the "1" is for the web form file named "contactus-classic.html". If your form is a different one, like "Contact Form - Complete" (which is contactus-complete.html), then the end of this link would be "f=2".

**********************************************************************

Note: Make sure your images and external JavaScript files (and CSS tables) have absolute URLs,
like for instance:

  Code:
 
<img src="http://www.insert-your-website.com/images/image1.gif">
<script language="JavaScript" src="http://www.insert-your-website.com/script.js/"></script>
<link href="http://www.insert-your-website.com/styles.css" rel="stylesheet" type="text/css">


To make your life easier, try adding:

  Code:
 
<base href="http://www.insert-your-website.com/">


right after the opening <HEAD> tag in header.html. The slash after .com is important,
so do not leave it out.
That may save you editing all your image's URLs.

Also, if you do not use the Web Form Designer at all, then you will need to set your preferences for text styles, borders, colors, email addresses, and such directly into the configbwf.php file. Open it up in a text editor and insert your choices. Then upload that file.

Yes, the above is complex. That is why we suggest using the iFrame Code Snippet method.
Also, please feel free to let us know how we can make these instructions better.
Thank you.

 
BestWebForms.com © 2009