Kontaktformular mal anders...

[rockford]

Hallo zusammen,


klickt mal hier Trigger:

http://www.dtelepathy.com/

Dann öffnet sich ein verdammt raffiniertes Kontaktformular. Ich komme nicht dahinter wie das funktioniert... Hat jemand eine Idee, wie man das selbst umsetzen kann?

Gruß
Rockford

[Emanuelle_1982]

das ist ein Mix aus JScript und Flash

allerdings sehr unübersichtlich
ein paar Scripts sind direkt auf der Seite
einige sind ausgelagert, so wie zum Beispiel:
<script type="text/javascript" src="http://www.dtelepathy.com/xajax_js/xajax.js"></script>

[Stefane]

moin,

ich hab mich mal durch die dateien durchgearbeitet und hab folgendes herausbekommen:

Das Div, dass den Trigger beschreibt, hat die id="pullTheTrigger_form"

in HTML sieht dieses Ding so aus:

Code: Alles auswählen

<div id="pullTheTrigger_form">

	<form method="post" id="ptt_form" action="#">
		<div id="ptt_formContainer">
			<h2>Contact <em><strong>dt</strong></em></h2>
			<ol>
				<li><label for="email">* Email:</label><input type="text" name="email" id="email" class="textField" maxlength="255" /></li>
				<li><label for="company_name">* Company Name:</label><input type="text" name="company_name" id="company_name" class="textField" /></li>
				<li><label for="contact_name">* Contact Name:</label><input type="text" name="contact_name" id="contact_name" class="textField" /></li>

				<li><label for="contact_phone">* Contact Phone:</label><input type="text" name="contact_phone" id="contact_phone" class="textField" maxlength="25" value="000-000-0000" onfocus="clearField(this,'off');" onblur="clearField(this,'on');" style="color:#AAAAAA;" /></li>
				<li><label for="website">Website:</label><input type="text" name="website" id="website" class="textField" /></li>
				<li><label for="comments" style="width: 100%">* Please describe your project:</label><textarea name="comments" id="comments" cols="20" rows="5" class="textField"></textarea></li>
				<li><span class="textField">
					<a href="javascript:void(null);" onclick="submitContact();" id="ptt_submit">Submit</a>
				</span></li>

				<li class="footNote">* Indicates required field</li>
			</ol>
		</div>
	</form>
	<img src="http://www.dtelepathy.com/images/dialog_back.png" width="400" height="429" alt="" id="ptt_back" />
	<a href="javascript:void(null);" onclick="closePTT();" id="ptt_close">Close</a>
</div>

Dann hab ich mich durch die JS-Dateien gearbeitet und bin auf diese gestoßen: http://www.dtelepathy.com/scripts/ptt_moo.js
Inhalt dieser ist die Initialisierung dieses Triggers.
Über die function openPTT () wird der Trigger geöffnet, ersichtlich daran:

Code: Alles auswählen

var pttForm = document.getElementById('pullTheTrigger_form');
							pttForm.style.visibility = 'hidden';
							pttForm.style.left = '50%';
							new Fx.Style('pullTheTrigger_form','opacity',{
										 duration:500,
										 onComplete:function(){
											 pttForm.style.visibility = 'visible';
											 pttForm.style.display = 'block';
										 }}).custom(0,1);

Dort wird nämlich das Div aufgrund der ID gelholt und im Style auf visible gestellt.

Soviel erst einmal dazu. Das ist sicher nicht die ganze Wahrheit, aber schon einmal ein Anhaltspunkt, worauf man aufbauen kann.

[rockford]

Aber irgendwas muß noch fehlen, denn so bringe ich das nicht zum laufen.


Dieses Script konnte ich bislang nicht ausfindig machen, da es wie gesagt alles sehr durcheinander ist. Aber das allein war's nicht, was fehlt.


Einen Flash-Effekt kann ich nicht finden. Dieses "Abblenden" entsteht durch ein eingeblendetes .png.



Aber irgendwas fehlt...

[larsneo]

wirf doch mal einen blick auf z.b. highslide (oder google nach den diversen anderen lightbox derivaten)

[Ambience]

du könntest auch einfach ein div container machen, und dort dein Formular reinschreiben... anschließend setzt du den visibility auf none oder hide und auf klick auf das kontakt formular button machst du das ding sichtbar... natürlich musst du halt noch den z-index und die position per css festlegen... Dürfte aber aufs gleiche rauskommen, oder?