You're browsing: Lino Claudio Home » My Blog » Quick Contact Forms
pic
14. Aug
2008

Quick Contact Forms

Written by: admin - Posted in: Developer Blog, Category: Developer Blog -

I’ve added a new function to my site will enable to view a contact form easily at my home page. It is a sliding content that uses a hidden div’s and only appear by clicking on a javascript link.
This script lets you display content in tight areas on your page, by dropping it down into view when the mouse rolls over the anchor element. The content temporarily overlaps anything beneath it. Think of it as adding another dimension to your webpage to create more space. It’s extremely handy for displaying search boxes, additional links etc in a tight area, such as the sidebar column of a page. The content to reveal/ overlap in each case is simply contained inside an arbitrary DIV on the page for easy customizing. A quick overview:

  • Drop Down Content can be revealed either via onclick of the anchor link, or onmouseover instead. Independent setting for each anchor link.
  • Set whether Drop Down Content itself should automatically hide after the user rolls his mouse out of it. Global setting inside .js file.
  • For the content within Drop Down Content, it can either be inline, or fetched from an external file on your server via Ajax instead.
  • Drop Down Content supports four different position orientations- “left-bottom”, right-bottom”, “left-top”, and “right-top”. The speed of the drop down reveal can also be customized.

See code here:

Step 1: Insert the following script into the <head> section of your page:

<script type=”text/javascript” src=”dropdowncontent.js”>
</script>

Javascript file: dropdowncontent.js

Step 2: Insert the below sample HTML code into the <body> section of your page, which demonstrates how to set up two drop down contents, activated by two arbitrary links:

<DIV id=”subcontent” style=”position:absolute; visibility: hidden; border: 3px solid #3c8ca3; background:#fff; width: 400px; padding: 8px; text-align:left;”>
<div style=”padding:5px; border:1px solid #c0c0c0; background:#f2f2f2; margin-bottom:15px;”>
Hi there!, Please fill up the form below. After sending your message. you will receive a feedback as soon as posible. Thanks!
</div>
<form method=”post” action=”http://www.emailmeform.com/fid.php?formid=112038″ enctype=”multipart/form-data” accept-charset=”UTF-8″>

<label for=”user” class=”contactlabel”>Name:</label>
<input type=”text” name=”FieldData0″ value=”" maxlength=”100″ class=”contactbox” onkeypress=”return handleEnter(this, event)”><br />

<label for=”email” class=”contactlabel”>Email Address:</label>
<input type=”text” name=”FieldData1″ value=”" maxlength=”100″ class=”contactbox” onkeypress=”return handleEnter(this, event)”><br />

<label for=”Subject” class=”contactlabel”>Subject:</label>
<input type=”text” name=”FieldData2″ value=”" maxlength=”100″ class=”contactbox” onkeypress=”return handleEnter(this, event)”/><br />

<label for=”comments” class=”contactlabel”>Message:</label>
<textarea name=”FieldData3″ rows=”30″ id=”limiter”></textarea>
<span style=”text-align:right;”>
<br />
<center>
<input type=”submit” name=”Submit” id=”submitbutton” class=”contactbutton” value=”Submit” onClick=”return checkmail(this.form.FieldData1)”/>
<input type=”reset” value=” Clear ” name=”Clear” id=”searchbutton”>
</center>
</form>
<br/>
<a href=”javascript:dropdowncontent.hidediv(’subcontent’)”>Close [X]</a>
</DIV>

<script type=”text/javascript”>
//Call dropdowncontent.init(”anchorID”, “positionString”, glideduration, “revealBehavior”) at the end of the page:

dropdowncontent.init(”searchlink”, “right-top”, 500, “click”)
</script>

Source: http://dynamicdrive.com/dynamicindex5/overlapcontent.htm

[BlogMarks] [del.icio.us] [Digg] [Facebook] [Furl] [Google] [Ma.gnolia] [MySpace] [Netvouz] [Newsvine] [Propeller] [Reddit] [Sphere] [Spurl] [Squidoo] [StumbleUpon] [Technorati] [Windows Live] [Yahoo!] [Email]
More »

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

Name (required)

Mail (will not be published) (required)

Website




Google News : U.S. : All

  • The Associated Press
    Pakistani group under fire after India attacks
    The Associated Press - 52 minutes ago
    MURIDIKE, Pakistan (AP) - Pakistan's vow to crack down on militants behind the Mumbai attacks may meet an early test with the Islamist charity accused by the US of being the front group for the prime suspects.
  • New York Times
    A New Home, a Bit Smaller, for the Bushes
    New York Times - 7 hours ago
    A house that is believed to have been bought as the next residence of George and Laura Bush, in Dallas. By MICHAEL FALCONE As hard as it may be to leave 1600 Pennsylvania Avenue, the president and first lady, Laura Bush, have settled on a new home in ...
  • The Associated Press
    Rice trip to South Asia nets promises, little else
    The Associated Press - 1 hour ago
    ISLAMABAD, Pakistan (AP) - Secretary of State Condoleezza Rice came looking for a public pledge from Pakistan to go after terrorists using the country as a hideout, and an unsteady US-backed government told her what she wanted to hear.
  • Reuters
    Politics on hold as Thais pray for ailing king
    Reuters - 1 hour ago
    By David Fox BANGKOK (Reuters) - Thais marked their revered king's birthday on Friday in a solemn mood, concerned for the health of the aging monarch and worried as well over their country's debilitating political deadlock.

Google News : U.S. : Sci/Tech

Google News : U.S. : Sports

Google News : U.S. : Entertainment

Google News : U.S. : Entertainment

Google News : U.S. : Sci/Tech

Google News : U.S. : Sci/Tech

pic

About

The Official Website of Lino Claudio, SEO and Web Designer. You can read news from, Sports, Tecnology, Music, Movies and more...
Read more info...

Recent entries

Read latest news from different categories.
Read more news...

Developer Blog

Read our latest uodates and bug fixes on my site. Find the latest of my services and recent projects.
Read Blog...

Home|News|Services|Portfolio|Resources|Contact us|About us|Admin
© 2008 Lino Claudio, Personal Freelance website.