This Wufoo form, created online, is added to an HTML snippet with the following code:


<input type="image"  width=100,  src="http://web.me.com/MMeAccount/Forum/feedback.png" onclick="open_win()"> </body></html>


<script type="text/javascript"> function open_win() { window.open("http://oldtoad.wufoo.com/forms/r7x2z1/","_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=660, height=795") } </script>



The first part of the code is a link to the image used for the button image.  The image must be on a server so it can be linked to.  The image’s size can be set to fit the page’s design with the width setting.  The second part of the code links to the Wufoo form page and sets the size of the new window.

 

Adding Wufoo Form Via HTML Snippet

This script, provided by Cyclosaurus, will produce an email address link (above) that email bots will not be able to harvest.  If you use an email other than MobileMe be sure to change the appropriate parts of the code.  You can change the "Email Me" to any text you'd like and it's color and size also.  The items in red below are those you can change to customize the link to your specifications.


<a id='contactMe'><font color="#0033FF" size="4" face="Georgia">Email Me</font></a>

<script type='text/javascript'>

/*

Assemble Obfuscated email address and set div id='contactMe' href

*/

ObsArray = new Array();

ObsArray.push('mai');

ObsArray.push('lto');

ObsArray.push(':');

ObsArray.push('my'); // your break up email address starts here

ObsArray.push('name');

ObsArray.push('@');

ObsArray.push('me');

ObsArray.push('.');

ObsArray.push('com'); // your break up email address ends here

function setContactMe() {

    var ObfuscatedHref = '';

    for (ii=0; ii<ObsArray.length; ii++) {

        ObfuscatedHref += ObsArray[ii];

    }

    document.getElementById('contactMe').href=ObfuscatedHref;

}

chkEmail = setInterval('checkEmail()', 100);

function checkEmail() {

    if (document.getElementById('contactMe') != null) {

        setContactMe();

        clearInterval(chkEmail);

    }

}

</script>




This form was created by making the form at one of them any free sites on the internet that will let you create one or two forms for free.  In this case it was Wufoo.  After creating the form online, I selected the HTML Snippet from the Web Widgets menu and entered the following iFrame code:


<iframe height="515" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://oldtoad.wufoo.com/embed/z7x3p3/"><a href="http://oldtoad.wufoo.com/forms/z7x3p3/" title="Site Feedback">Fill out my Wufoo form!</a></iframe>


When adding the code as created by Wufoo the graphic at the top of the form would not display. Therefore, I used the basic iFrame code and entered the URL of the feedback page as generated by Wufoo, adjusting the width and height to make sure all of the form was included. 


The results are show below:

HTML Snippet using code generated by Enkoder to add an email link that cannot be sniffed by  bots. You get this link on the right.

Protected Email Address Added via HTML Snippet - 1

Protected Email Address Added via HTML Snippet - 2

HMML Snippet With Javascript to Print Page

The button to the right will print the contents of this page.  The code was provided by Cyclosaurus in this Apple Discussions topic: Print Button


The code in the snippet is:


<form><input type="button" value=" Print this page " onclick="javascript:parent.window.print();return false;" /></form>

Adding Email Comments Form Via HTML Snippet

This is the code to enter into the HTML Snippet window:


<FORM ACTION="mailto:YOUREMAILADDRESS?subject=SUBJECT TITLE FOR EMAIL" ENCTYPE="text/plain" method="post"> Enter your comments in the space provided below:<br>

<textarea name="Comments" rows="5" cols="42"></textarea><br><br>

Tell us how to get in touch with you:<br><br>

First Name<input type="text" size="20" maxlength="20" name="realname"><br><br>

Last Name<input type="text" size="20" maxlength="20" name="realname"><br><br>

E-mail<input type="text" size="35" maxlength="35" name="UserEmail"><br><br>

Telephone<input type="text" size="20" maxlength="20" name="UserTel"><br><br>

FAX<input type="text" size="20" maxlength="20" name="UserFAX"><br><br>

<input type="checkbox" name="ContactRequested" value="ContactRequested">

Please contact me as soon as possible regarding this matter.<br><br>

<input type="submit" value="Submit Comments">

<input type="reset" value="Clear Form"><br><br><br><br><br><br><br><br>

</form>

NOTE:  The Form Action Comments method above only produces black text so it will work best with light colored backgrounds where black text is more visible.

Return to Tophttp://web.me.com/toad.hall/Demo_1/Add_Form.html
Return to Tophttp://web.me.com/toad.hall/Demo_1/Add_Form.html
Return to Tophttp://web.me.com/toad.hall/Demo_1/Add_Form.html

Adding Radio Buttons

<P>What system are you using?<BR>

<blockquote ><INPUT NAME="System1" VALUE="orange" TYPE="radio">OS X 10.4 Tiger<BR>

<INPUT NAME="System1" VALUE="apple" TYPE="radio">OS X 10.5 Leopard<BR>

<INPUT NAME="System1" VALUE="kiwifruit" TYPE="radio" CHECKED>OS X 10.6 Snow Leopard<BR>

<INPUT NAME="System1" VALUE="orange" TYPE="radio">Windows 7<BR>

<INPUT NAME="System1" VALUE="strawberry" TYPE="radio">Pre Windows 7<BR>

<INPUT NAME="System1" VALUE="watermelon" TYPE="radio">Vista<BR><BR><BR>

</blockquote>

Form Action Comment Form Via HTML Snippet

Adding Drop Down Menu

<P>

What system are you using?<br> <br><SELECT NAME="system">

<OPTION>OS X 10.4 Tiger</OPTION>

<OPTION SELECTED>OS X 10.5 Leopard</OPTION>

<OPTION>OS X 10.6 Snow Leopard</OPTION>

<OPTION>Window 7</OPTION>

<OPTION>Pre Windows 7</OPTION>

<OPTION>Vista</OPTION>

</SELECT><br><br><br><br>

Adding Check Boxes

<P>What system are you using?<br><br>


<INPUT NAME="checkbox" VALUE="badminton" TYPE="checkbox">OS X 10.4 Tiger<BR>

<INPUT NAME="checkbox" VALUE="cricket" TYPE="checkbox">OS X 10.5 Leopard<BR>

<INPUT NAME="checkbox" VALUE="golf" TYPE="checkbox">OS X 10.6 Snow Loepard<BR>

<INPUT NAME="checkbox" VALUE="rugby" TYPE="checkbox">

Windows 7<BR>

<INPUT NAME="checkbox" VALUE="squash" TYPE="checkbox">Pre Windows 7<BR>

<INPUT NAME="checkbox" VALUE="tennis" TYPE="checkbox">Vista<BR><br><br>

Adding Multiple Elements Into One Form

<FORM ACTION="mailto:YOUR EMAIL ADDRESS?subject=Feedback on Adding Forms" ENCTYPE="text/plain" method="post">

<b>What system are you running?</b><br><br>

<INPUT NAME="System" VALUE="OS X 10.4 Tiger" TYPE="radio">OS X 10.4 Tiger<BR>

<INPUT NAME="System" VALUE="OS X 10.5 Leopard" TYPE="radio">OS X 10.5 Leopard<BR>

<INPUT NAME="System" VALUE="OS X 10.6 Snow Leopard" TYPE="radio">OS X 10.6 Snow Leopard<BR>

<INPUT NAME="System" VALUE="Windows 7" TYPE="radio">Windows 7<BR>

<INPUT NAME="System" VALUE="Pre Windows 7" TYPE="radio">Pre Windows 7<BR>

<INPUT NAME="System" VALUE="Vista" TYPE="radio">Vista<BR>

<br><br>


<B>FEEDBACK</B><br>

<br>

Name:<input type="text" size="35" maxlength="35" name="Name"><br><br>

E-mail<input type="text" size="35" maxlength="35" name="Email Address"><br>

<br>Comments:<br><textarea name="Comments" rows="5" cols="42"></textarea><br><br>

<input type="submit" value="Submit Comments">

<input type="reset" value="Clear Form"><br><br><br><br><br><br>

</form>

Your email reply will look like this:

Embedding Forms

Adding JotForm and Wufoo Forms

Via a Button and Popup Window

Adding JotForm Form Via HTML Snippet

The form below was created at JotForm.com and the embed code added to an HTML snippet. JotForm offers secure forms along with Captcha for preventing bots from using the form.


<iframe allowtransparency="true" src="http://form.jotform.uz/form/Account Number" frameborder="0" style="width:100%; height:8000px; border:none;" scrolling="no">

</iframe>

Return to Tophttp://web.me.com/toad.hall/Demo_1/Add_Form.html