[javascript] integration d'un formulaire

Bonjour,

je voudrais intégrer un formulaire dans une page dèjas crée.

pour information:
Toutes mes pages ont été faite avec le logiciel Lauyan ToWeb,
Je suis héberger chez 1&1.fr

mon site www.assistance-micro77.fr

Mon problême: lorsque je fais un lien sur la page (indiqué par mon hébergeur)

lien: http://assistance-micro77.fr/tinc?key=3V89txXX&formname=Devis

j'ai une nouvelle fenetre qui s'ouvre et je n'ai plus ma mise en page
seulement la demande de devis.

mon hébergeur me donne aussi la possibilité d'intégrer par iframe:

---------------------------------------------------

<iframe id="tincAppDoc" src="/tinc?key=3V89txXX&formname=Devis" width="640" height="200" style="border:none" frameborder="0" allowtransparency="true" background-color="transparent"></iframe>
<script src="/spicons/tinc/common/script/tincapp.js"></script>

-------------------------------------------
lorsque l'on regarde les proprités de la page devis.

j'ai deux fichiers css externe et un fichier js externe.

j'aimerais que le formulaire s'affiche dans une page de mon serveur en gardant la mise en page (bouton menu etc...)

---------------------------------------------------------
code du fichier bluishfaded.css

max24{width:24px;} * { scrollbar-3dlight-color: #929BAB; scrollbar-shadow-color: #929BAB; scrollbar-arrow-color: #929BAB; scrollbar-base-color: #929BAB; scrollbar-face-color: #F1F2F6; scrollbar-highlight-color: #F1F2F6; scrollbar-darkshadow-color: #E3E4EA; scrollbar-track-color: #F1F2F6; } body { margin: 20px 10px 10px 10px; padding: 0; background-color: #E6F2FE; color: #000000; } tr { vertical-align: top; } .scroll { margin: 0; padding: 0; overflow: auto; height: auto; } .searchbar span.urina { font-weight: bold; margin-right: 6px; margin-left: 6px; color: #FFFFFF; } .searchbar a { text-decoration: underline; margin-right: 4px; margin-left: 4px; } .searchbar, .searchbar * { vertical-align: middle; margin-left: 4px; } .right { text-align: right; } .center { text-align: center; } .left { text-align: left; } h1 { color: #002276; } h2 { color: #002276; } table.errorbox, form.body, div.body { margin: 0; padding: 0; } table.errorbox tr td { padding: 2px 4px 2px 4px; } table.errorbox { background-color: #F1F2F6; color: #000000; border: 1px solid #023872; margin-bottom: 25px; } .fieldframe { background-color: #C2DFFE; color: #000000; border: 1px solid #023872; padding: 5px; } .buttonframe { background-color: #82BDFC; color: #FFFFFF; margin-top: 10px; border: 1px solid #023872; padding: 5px; } .field { background-color: #82BDFC; color: #ffffff; border: 1px solid #929BAB; } .header { background-color: #82BDFC; color: #ffffff; font-weight: bold; } tr.header td { padding: 2px 4px 2px 4px; } .high { background-color: #CCE4FE; } .low { background-color: #D6E9FE; } .active { background-color: #E8F2FE; font-weight: bold; } .active td, .low td, .high td { padding: 1px 2px 1px 2px; } .label { background-color: #82BDFC; color: #FFFFFF; font-weight: bold; vertical-align: top; } .input { background-color: #F1F2F6; color: #5D636E; vertical-align: top; } input.inputform, textarea.inputform { background-color: #E8F2FE; color: #000000; border: 1px solid #023872; } .button { background-color: #D6E9FE; color: #000000; border: 1px solid #023872; margin: 1px; } .button:hover { background-color: #CCE4FE; color: #000000; border: 1px solid #023872; margin: 1px; } a.button { padding: 0px 8px 0px 8px; text-decoration: none; cursor: default; } a.link { background-color: inherit; color: #002276; text-decoration: underline; } a.link:hover { background-color: inherit; color: #000000; text-decoration: none; }


-------------------------------------------------

code du fichier corelib.js

// By Sebastian Werner sebastian-werner.net
// Licensed under GPLv2
function removeFocusBorders() {
var tags = [ "img", "input", "a" ];
for (var i=0; i<tags.length; i++) {
var nodes = document.getElementsByTagName(tags[i]);
for (var j=0; j<nodes.length; j++) {
if (tags[i] != "input" || (nodes[j].getAttribute("type") != "text" && nodes[j].getAttribute("type") != "password" && nodes[j].getAttribute("type") != "file")) {
nodes[j].onfocus = function() { if(this.blur) this.blur(); }
}
}
}
}

// Cookie function by alistapart.com
function readCookie(name) {
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0){
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}

function writeCookie(name, value) {
var expire = "";
expire = new Date((new Date()).getTime() + 18748800);
expire = "; expires=" + expire.toGMTString();
path = "; path=/";
document.cookie = name + "=" + escape(value) + expire + path;
}

function xBox(obj, content, id)
{
this.toggle = function(lobj, iobj, name)
{
var status, newtarget, newimg;

status = lobj.style.display;

if (status == "" || status == "block" || status == "table-row")
{
newtarget = "none"
newimg = iobj.getAttribute("asrc")
}
else
{
// Mozilla nimmt CSS2 konform "table-row" als Default... alle anderen sollten mit "block" zufrieden sein...
if((navigator.product && navigator.product.toLowerCase() == "gecko") || window.opera) newtarget = "table-row"
else newtarget="block"

newimg = iobj.getAttribute("osrc")
}

// hack to support 2 cookies
if (iobj.src.indexOf("help") != -1) name="help"
else if (iobj.src.indexOf("mize") != -1) name="content"

writeCookie(("box_" + this.boxname + "_" + this.id + "_" + name), newtarget)

lobj.style.display = newtarget;
iobj.src = newimg;
}


this.index = function()
{
// Bereiche Hilfe & Inhalt finden
var trs = this.content.getElementsByTagName("tr");
for (var j=0; j<trs.length; j++)
{
if (trs[j].className == "boxHelp") this.lhelp = trs[j]
else if (trs[j].className == "boxContent") this.lcontent = trs[j];
}


// Schalter finden
var tds = this.obj.getElementsByTagName("td");
for (var j=0; j<tds.length; j++)
{
if (tds[j].className == "boxTopRight") this.lbuttons = tds[j];
}

var bts = this.lbuttons.getElementsByTagName("img");
for (var j=0; j<bts.length; j++)
{
if (bts[j].getAttribute("job") == "help") this.bhelp = bts[j];
else if (bts[j].getAttribute("job") == "content") this.bcontent = bts[j];
}
}

this.addEvents = function()
{
// Initialisierung
var inithelp = readCookie("box_" + this.boxname + "_" + this.id + "_" + "help")
var initcontent = readCookie("box_" + this.boxname + "_" + this.id + "_" + "content")

// Events zuweisen
if (typeof(this.bhelp) != "undefined" && this.bhelp != null)
{
this.bhelp.setAttribute("osrc", this.bhelp.getAttribute("src"));
this.bhelp.onclick = function(event) { copy.toggle(copy.lhelp, copy.bhelp); };


if (inithelp == "" || inithelp == "none")
this.toggle(this.lhelp, this.bhelp)
}

if (typeof(this.bcontent) != "undefined" && this.bcontent != null)
{
this.bcontent.setAttribute("osrc", this.bcontent.getAttribute("src"));
this.bcontent.onclick = function(event) { copy.toggle(copy.lcontent, copy.bcontent) };

if (initcontent == "none")
this.toggle(this.lcontent, this.bcontent)
}

}


this.id = id;
this.obj = obj;
this.content = content;

this.boxname = this.obj.getAttribute("name");

var copy = this;

this.index();
this.addEvents();
}

function traceBoxes()
{
if (!document.getElementById) return 1;

var tables = document.getElementsByTagName("table");
var boxCache = new Array();
var boxId = 0;

for (var i=0; i<tables.length; i++)
{
// Nur Boxen
if (tables[i].className != "box") continue;

var pos = boxCache.length
boxCache[pos] = new xBox(tables[i], tables[i].nextSibling, boxId);
boxId++;

i++;
}
}


function xWindow() {
this.__getValue = function(value)
{
var e1,e2,e3;

e1 = eval("window.inner" + value)
e2 = eval("document.documentElement.client" + value)
e3 = eval("document.body.client" + value)

return e1 ? e1 : e2 ? e2 : e3 ? e3 : none;
}

this.getWidth = function() {
return this.__getValue("Width")
}

this.getHeight = function() {
return this.__getValue("Height")
}
}

_window = new xWindow();

function init()
{
if(document.layers) return;

setwin();
//traceBoxes();
removeFocusBorders();

/*
document.getElementById("content").style.marginRight="0px"

boxes=document.getElementsByTagName("table")

for(var i=0; i<boxes.length; i++)
{
if (boxes[i].className != "box") continue;
boxes[i].style.width=boxes[i].offsetWidth-20
}



var f=document.getElementById("scrollcontainer")
if (f)
{
f.style.width="300px"
__fixscrollcontainer()
}
*/


window.onresize = function() { setwin(); }
}

function setwin()
{
var value, con;

con = document.getElementById("box")
value = _window.getHeight() - 87 - 22;

// fix ie
if (document.all && !window.opera) value -= 30;

con.style.height = value + "px";
}


function previewfix(main, sel)
{
sel.style.display = "inline";
sel.style["float"] = "left";
main.style.display = "inline";
main.style["float"] = "right";

sel.style.verticalAlign = "middle";
main.style.verticalAlign = "middle";

main.style.border = "1px solid #000000";
main.style.padding = "1px";
main.style.backgroundColor = "#FFFFFF";
}

function findsel(name)
{
var sels = document.getElementsByTagName("select");
var sel;

for (var i=0; i<sels.length; i++)
{
if (sels[i].name == name)
{
sel = sels[i];
break;
}
}

return sel;
}

function fontpreview()
{
var sel = findsel("td_font_family")
var main = document.getElementById("fontpreview_frame");

main.innerHTML="ABCDEFGabcdefg123456"

previewfix(main, sel);

var newfont;
if (sel.value=="times") newfont="'Times New Roman', Times, serif"
else if (sel.value=="tresbuchet") newfont="'Trebuchet MS', Geneva, Arial, Helvetica, sans-serif"
else if (sel.value=="tahoma") newfont="Tahoma, Arial, Helvetica, sans-serif"
else if (sel.value=="verdana") newfont="Verdana, Geneva, Arial, Helvetica, sans-serif"
else if (sel.value=="palatino") newfont="'Palatino Linotype', 'Times New Roman', Times, serif"
else newfont="Arial, Helvetica, sans-serif"

main.style.fontFamily = newfont;

return;
}

function colorpreview(array)
{
if (array) _cp_array = array;

var el = new Array();
var sel = findsel("td_style");

var main = document.getElementById("colorthemepreview_frame");
previewfix(main, sel);
main.innerHTML = "";
main.style.fontSize = "15px";
// because the last div creates a one pixel right border so the sum is otherwise 2 pixel
main.style.paddingRight = "0px";

for (var i=0; i<_cp_array.length; i+=2)
{
if (typeof(_cp_array[i]) == "undefined") break;

var id=_cp_array[i];

if (id == sel.value)
{
var ar = _cp_array[i+1]

for (var j=0; j<ar.length; j++)
{
el[j] = document.createElement("div");
el[j].style.backgroundColor = "#" + ar[j];
el[j].appendChild(document.createTextNode(String.fromCharCode(160)));

el[j].style.borderRight = "1px solid #FFFFFF";

el[j].style.display = "inline";
el[j].style["float"] = "left";

main.appendChild(el[j]);
}

break;
}
}
}


<!-- UGLY HARDCODED -->
function handlefieldtype()
{
var obj=document.getElementById("select_fieldtype")

var i1 = document.getElementById("tr_confcheck1");
var i2 = document.getElementById("tr_confcheck2");
var m1 = document.getElementById("tr_confmltext");
var s1 = document.getElementById("tr_confselect");

if (obj.value == "text")
{
if (i1 != null) i1.style.display = "";
if (i2 != null) i2.style.display = "";
if (m1 != null) m1.style.display = "none";
if (s1 != null) s1.style.display = "none";

if (!i1) return;

var f1 = document.getElementById("check_searchfor");
var f2 = document.getElementById("check_emailreceiver");
var f3 = document.getElementById("check_emailsender");
var f4 = document.getElementById("check_number");
var f5 = document.getElementById("check_email");
var f6 = document.getElementById("check_url");
var f7 = document.getElementById("check_text");

var checked = false;
for (var i=1; i<8; i++)
{
obj = eval("f" + i)
if (obj != null)
if (obj.checked) { checked = true; break }
}

if (!checked) f7.checked = true;
}
else if (obj.value == "mltext")
{
if (i1 != null) i1.style.display = "none";
if (i2 != null) i2.style.display = "none";
if (m1 != null) m1.style.display = "";
if (s1 != null) s1.style.display = "none";

if (!m1) return;

var f1 = document.getElementById("ml_mltext");
var f2 = document.getElementById("ml_emailcontent");

var checked = false;
for (var i=1; i<3; i++)
{
obj = eval("f" + i)
if (obj != null)
if (obj.checked) { checked = true; break }
}

if (!checked) f1.checked = true;
}
else if (obj.value == "radio")
{
if (i1 != null) i1.style.display = "none";
if (i2 != null) i2.style.display = "none";
if (m1 != null) m1.style.display = "none";
if (s1 != null) s1.style.display = "";

if (!s1) return;

var f1 = document.getElementById("select_checkbox");
var f2 = document.getElementById("select_radio");
var f3 = document.getElementById("select_list");

var checked = false;
for (var i=1; i<4; i++)
{
obj = eval("f" + i)
if (obj != null)
if (obj.checked) { checked = true; break }
}

if (!checked) f1.checked = true;
}
else
{
if (i1 != null) i1.style.display = "none";
if (i2 != null) i2.style.display = "none";
if (m1 != null) m1.style.display = "none";
if (s1 != null) s1.style.display = "none";
}
}


// Fix scroll container
function __fixscrollcontainer()
{
// Nur im Internet Explorer
if (document.all && navigator.userAgent.toLowerCase().indexOf("opera") == -1 && navigator.userAgent.toLowerCase().indexOf("konqueror") == -1)
{
lw=290
tw=18

var f=document.getElementById("scrollcontainer")
if (f)
{
f.style.width=(document.body.offsetWidth - lw) + "px";

// Tabellenbreite = Frame-Breite - Scrollbarbreite
if (f.firstChild.nodeName.toLowerCase()=="table")
f.firstChild.style.width=(document.body.offsetWidth - lw - tw) + "px";

window.onresize = __fixscrollcontainer;
}
}
}



tcount=0;
window.setInterval(function(){if(tcount>0)tcount--;if(tcount>3)window.status=Math.round(tcount/25*100)+"%"; else window.status=""},700);

function track()
{
tcount++;
if (tcount==25) document.getElementById("track").submit();

--------------------------------------

code du fichier new_guest.css


/*
@import url(guest-styles/export/0/style.css);
@import url(guest-styles/export/0/style2.css);
*/
/* Recordlist table (used by dyn:data) */
table.records {
width:100%;
}

table.records thead th {
font-size:11px;
font-weight:bold;
text-align:left;
}

/* Recordlist table number column header */
table.records th.itemNo {}

/* Recordlist table record number column */
table.records td.itemNo {
width:20px;
}

/* Recordlist table action column header */
table.records th.action {
width:50px;
}

/* Recordlist table action column */
table.records td.action {
width:50px;
}

/* Recordlist table field cell header */
/* [TBD: collides with existing style. Renamed to TBD_field until conflict is resolved] */
table.records th.TBD_field {

}

/* Recordlist table field cell */
/* [TBD: collides with existing style. Renamed to TBD_field until conflict is resolved ] */
table.records td.TBD_field {
}

.fieldframe, .buttonframe, .outerframe {
}

--------------------------------------------

code source de la page index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr" >
<head>
<title>ASSISTANCE MICRO77</title>
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="Lauyan TOWeb">


<link rel="stylesheet" href="../_frame/site.css" type="text/css">
<style type="text/css" media="print">
.wg-maxheight {}
</style>
<style type="text/css" media="screen">
.wg-maxheight { height:100%; }
</style>
</head>
<body>
<table bgcolor="#FFFFFF" class="wg-maxheight" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr><td><table cellspacing="0" cellpadding="0" border="0" width="100%" background="../_frame/bnr-middle.png" style="font-size:1px;"><tr>
<td width="577"><a href="../accueil/index.html"><img src="../_frame/bnr-left.png" border="0" alt=""></a></td>
<td width="100%"></td>
<td width="14"><a href="../accueil/index.html"><img src="../_frame/bnr-right.png" border="0" alt=""></a></td>
</tr></table></td></tr>
<tr><td valign="top" style="height:1px"><table cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size:1px"><tr>
<td bgcolor="#CCCC99"><img align="top" src="../_frame/blank.gif" height="19" width="140" alt=""></td>
<td><img align="top" src="../_frame/border-corner.png" width="23" alt=""></td>
<td width="100%" style="background-image:url(../_frame/border-top.png);height:19px"></td>
</tr></table></td></tr>
<tr>
<td valign="top" class="wg-maxheight">
<table class="wg-maxheight" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td valign="top" style="height:1px" width="140" bgcolor="#CCCC99">
<table align="center" style="font-family:Times New Roman;font-size:14px;" border="0" cellspacing="0" cellpadding="0">
<tr style="height:6px"><td></td><td></td><td></td><td></td></tr>
<tr>
<td width="6"></td>
<td><div class="wg-button">
<a style="position:relative" href="../accueil/index.html" title="Bienvenue sur le site de la SARL ASSISTANCE MICRO 77">
<img src="../_frame/button.png" alt="">
<span style="position:absolute;left:15px;top:15px; cursor:hand; width:97px;">Accueil</span>
</a></div></td>
<td width="6"></td>
<td width="6"></td>
</tr>
<tr style="height:6px"><td></td><td></td><td></td><td></td></tr>
<tr>
<td width="6"></td>
<td><div class="wg-button">
<a style="position:relative" href="../prestations/index.html" title="Nos Prestations">
<img src="../_frame/button.png" alt="">
<span style="position:absolute;left:15px;top:15px; cursor:hand; width:97px;">Prestations</span>
</a></div></td>
<td width="6"></td>
<td width="6"></td>
</tr>
<tr style="height:6px"><td></td><td></td><td></td><td></td></tr>
<tr>
<td width="6"></td>
<td><div class="wg-button">
<a style="position:relative" href="../tarifs/index.html" title="Tarifs au 01 01 2007">
<img src="../_frame/button.png" alt="">
<span style="position:absolute;left:15px;top:15px; cursor:hand; width:97px;">Tarifs</span>
</a></div></td>
<td width="6"></td>
<td width="6"></td>
</tr>
<tr style="height:6px"><td></td><td></td><td></td><td></td></tr>
<tr>
<td width="6"></td>
<td><div class="wg-button">
<a style="position:relative" href="../logiciels/index.html" title="Logiciels">
<img src="../_frame/button.png" alt="">
<span style="position:absolute;left:15px;top:15px; cursor:hand; width:97px;">Logiciels</span>
</a></div></td>
<td width="6"></td>
<td width="6"></td>
</tr>
<tr style="height:6px"><td></td><td></td><td></td><td></td></tr>
<tr>
<td width="6"></td>
<td><div class="wg-button">
<a style="position:relative" href="../trucs_astuces/index.html" title="Trucs et Astuces">
<img src="../_frame/button.png" alt="">
<span style="position:absolute;left:15px;top:15px; cursor:hand; width:97px;">Trucs et Astuces</span>
</a></div></td>
<td width="6"></td>
<td width="6"></td>
</tr>
<tr style="height:6px"><td></td><td></td><td></td><td></td></tr>
<tr>
<td width="6"></td>
<td><div class="wg-button">
<a style="position:relative" href="../cgdv/index.html" title="Conditions Générales De Ventes">
<img src="../_frame/button.png" alt="">
<span style="position:absolute;left:15px;top:15px; cursor:hand; width:97px;">CGDV</span>
</a></div></td>
<td width="6"></td>
<td width="6"></td>
</tr>
<tr style="height:6px"><td></td><td></td><td></td><td></td></tr>
<tr>
<td width="6"></td>
<td><div class="wg-button">
<a style="position:relative" href="../liens/index.html" title="Liens">
<img src="../_frame/button.png" alt="">
<span style="position:absolute;left:15px;top:15px; cursor:hand; width:97px;">Liens</span>
</a></div></td>
<td width="6"></td>
<td width="6"></td>
</tr>
<tr style="height:6px"><td></td><td></td><td></td><td></td></tr>
<tr>
<td width="6"></td>
<td><div class="wg-button">
<a style="position:relative" href="../contact/index.html" title="Nous Contacter">
<img src="../_frame/button.png" alt="">
<span style="position:absolute;left:15px;top:15px; cursor:hand; width:97px;">Contact</span>
</a></div></td>
<td width="6"></td>
<td width="6"></td>
</tr>
<tr style="height:6px"><td></td><td></td><td></td><td></td></tr>
<tr>
<td width="6"></td>
<td><div class="wg-button">
<a style="position:relative" href="../devis/index.html" title="Devis">
<img src="../_frame/button.png" alt="">
<span style="position:absolute;left:15px;top:15px; cursor:hand; width:97px;">DEVIS</span>
</a></div></td>
<td width="6"></td>
<td width="6"></td>
</tr>
<tr style="height:6px"><td></td><td></td><td></td><td></td></tr>
<tr style="height:6px"><td></td><td></td><td></td><td></td></tr>
</table>

</td>
<td valign="top" style="background-image:url(../_frame/border-left.png);height:100%" width="23">
<img src="../_frame/blank.gif" width="23" alt="">
</td>
<td valign="top">
<table width="100%" class="wg-maxheight" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" class="wg-maxheight" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" bgcolor="#FFFFFF">
<h1>Devis</h1><table class="wg-paragraph" cellspacing="2" width="100%"><tr><td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><a name="1"></a><table class="wg-paragraph" width="100%"><tr><td style="text-align:justify"><br> </td></tr></table></td></tr></table></td></tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
---------------------------------------------------------

tout ces fichiers sont sur mon site dands l arubrique devis.

Merci pour vos réponses