Ein anderes Kontaktformular mit RW (Teil 3)

In dem ersten Teil wurde ein Formular erstellt und in dem zweiten Teil mit Forms To Go Lite validiert.
Es bleibt jetzt nur das Formular in einer mit RW erstellten Homepage einzubinden.

Dafür erstellt man zwei HTML Seiten. Eine für das Formular und eine für die Seite die beim Versenden-Erfolg erscheinen soll.
BEIDE SEITEN BEKOMMEN DEN GLEICHEN ORDNERNAMEN. Es heisst dass beide Seiten in dem gleichen Ordner publiziert werden. Als Beispiel könnte man den Ordnernamen ftglite wählen (also bei beiden Seiten).
Die Seite die das Formular beinhalten soll wird ftglite.php und die die andere Seite erfolg.html – siehe das Landing Pages Teil des zweiten Teils. Wie ich schon vorschlug, für die Seite erfolg.html könnte man den Code nehmen:

<p>Ihre Anfrage wurde erfolgreich versandt.<br />
Wir werden uns so schnell wie möglich bei Ihnen melden.</p>

und damit ist diese Seite fertig.

Für die Seite des Formulars braucht man das Formular selber kopiert (aus der Datei formular.html) und als Inhalt in die RW-Seite eingefügt zu werden.

In PageInspector in der Kopfzeile/CSS den Code in benutzerdefiniertes CSS-Feld einfügen:

fieldset
{
	float: left;
	clear: left;
	width: 100%;
	margin: 0 0 1.5em 0;
	padding: 0;
	border: 1px solid #BFBAB0;
	background-color: #F2EFE9;
}

legend
{
	margin-left: 1em;
	padding: 0;
	color: #000000;
	font-weight: bold;
}

fieldset ol
{
	padding: 1em 1em 0 1em;
	list-style: none;
	zoom: 1;
}

fieldset li
{
	float: left;
	list-style: none;
	clear: left;
	width: 100%;
	padding-bottom: 1em;
}

label
{
	position: relative;
	float: left;
	width: 10em;
	margin-right: 1em;
}

.fm-req label
{
	font-weight: bold;
}

label strong
{
	position: absolute;
	left: 27em;
	top: 0.2em;
	width: 22em;
	color: #CC0000;
	font-size: 85%;
	font-weight: normal;
	text-transform: uppercase;
}

.fm-req strong
{
	color: #CC0000;
	font-size: 85%;
	font-weight: normal;
	text-transform: uppercase;
}

fieldset.submit
{
	float: none;
	width: auto;
	border-style: none;
	padding-left: 12em;
	background-color: transparent;
	background-image: none;
}

Auch in dem PageInspector, diesmal bei Kopfzeile/Kopfzeile in benutzerdefiniertes Kopfzeile-Feld das Skript einfügen:

<script type="text/javascript">
window.onload=function()
{if(document.getElementById)
{var linkContainer=document.getElementById('fm-intro');var linebreak=linkContainer.appendChild(document.createElement('br'));var toggle=linkContainer.appendChild(document.createElement('a'));toggle.href='#';toggle.appendChild(document.createTextNode(' Optionale Felder verbergen?'));toggle.onclick=function()
{var linkText=this.firstChild.nodeValue;this.firstChild.nodeValue=(linkText==' Optionale Felder verbergen?')?' Optionale Felder anzeigen?':' Optionale Felder verbergen?';var tmp=document.getElementsByTagName('li');for(var i=0;i<tmp.length;i++)
{if(tmp[i].className=='fm-opt')
{tmp[i].style.display=(tmp[i].style.display=='none')?'block':'none';}}
return false;}}} 
</script>

In diesem Skript sind die alternativen Links “Optionale Felder verbergen?” und “Optionale Felder anzeigen?” aus dem oberen Teil des Formulars zu finden.
In dem ersten Teil schrieb ich dass das Formular mit geordneten Listen erzeugt wurde. Die Elementen diesen Listen

<li class="fm-req"> und <li class="fm-opt">

werden in dem oberen Code so angesprochen

var tmp=document.getElementsByTagName('li');

Möchte man dem reCaptcha-Formular ein bißchen die Farben “verblassen” könnte man in dem PageInspector, weiterhin bei Kopfzeile/Kopfzeile in benutzerdefiniertes Kopfzeile-Feld das Skript einfügen

</script>
<script type= "text/javascript">
var RecaptchaOptions = {
theme: 'clean'
};
</script>

Das RW-Projekt kann man jetzt speichern und veröffentlichen. Nach dem Veröffentlichen MÜSSEN jetzt beide Dateien ftglite.php und erfolg.html in dem Ordner ftglite sich befinden! In diesem Ordner MUSS MAN jetzt die Datei submit.php (von Forms To Go erzeugt) UND recaptchalib.php HOCHLADEN. Dafür kann man Cyberduck benutzen.

“Das” ist aber alles!
Viel Erfolg!

Kommentieren ist momentan nicht möglich.