Results 1 to 2 of 2

Thread: Form won't work when embedded in page

  1. #1
    Join Date
    Jan 2010
    Posts
    2

    Form won't work when embedded in page

    I created a form for my website using FormSite.com. The submit button for my form won't work when embedded into my page. It will work when I make the form pop up in a separate window. I think it must have something to do with the css for the page interfering with the form's css. The css for the page and the form is below. I can post the html too, it was just too many characters. Here is the live page as it is: http://www.ncrising.info/register.html

    css for page:


    Code:
    <style type="text/css" media="all">
    
    body {
    	background: #fdd4bd; }
    
    #content img {
    	position: absolute;
    	z-index: 1;
    	border: none; }
    
    #nav li {
    	position: absolute;
    	z-index: 5;
    	margin-top: 382px;
    	display: inline;
    	list-style: none; }
    
    #nav a {
    	z-index: 5;
    	text-decoration: none; }
    
    #nav li.tab1 {
    	position: absolute;
    	margin-left: 70px; }
    
    #nav li.tab2 {
    	position: absolute;
    	margin-left: 270px; }
    
    #nav li.tab3 {
    	position: absolute;
    	margin-left: 545px; }
    
    #nav li.tab4 {
    	position: absolute;
    	margin-left: 760px; } 
    
    #splatter {
    	margin-top: -70px;
    	margin-left: 515px;
    	position: absolute;
    	z-index: 4; }
    
    #form {
    	position: absolute;
    	margin-top: 510px; }
    
    #form.rollover a:hover {
    	background: url('images/formheadinghover.png') no-repeat; }
    
    
    #footer {
    	position: absolute;
    	z-index: 5;
    	margin-top: 700px; }
    
    </style>
    
    </head>
    
    
    <body>
    
    
    <!--Start Registration Form-->
    
    <div id="form" class="rollover">
    
    <a href="#" onclick="window.open('http://fs9.formsite.com/behvin/form722026319/index.html','Form', 'toolbar=no,width=600,height=400,left=20,top=20,screenX=20,screenY=20,status=no,scrollbars=yes,resizable=yes');return false"><img src="images/formheading.png" width="430" height="131" alt="NC Rising Registration Form" /></a>
    
    </div>
    
    <!--End Registration Form-->
    
    
    </body>
    
    </html>





    Form full html & css:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <base href="http://fs9.formsite.com/behvin/" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <title>NC Rising Registration Form</title>
    <link rel="stylesheet" type="text/css" media="all" href="/include/form/screen5.css" />
    <link rel="stylesheet" type="text/css" media="print" href="/include/form/print5.css" />
    <style type="text/css" media="all">
    body{
    	background: #FDD4BD;
    }
    
    .form_table{
    	width: auto;
    	margin-left: 0;
    	margin-right: auto;
    	border: 2px solid #000000;
    	background: #FDD4BD;
    	font-family: Memphis Light, Lucida Grande,Tahoma,Arial,sans-serif;
    	font-size: 12px;
    	color: #000000;
    	overflow: hidden;
    }
    
    .form_table a{
    	color: #0000FF;
    }
    
    .outside a{
    	color: #0000FF;
    }
    
    .form_table a:visited{
    	color: #0000FF;
    }
    
    .outside a:visited{
    	color: #0000FF;
    }
    
    .form_shadow_top{
    	display: block;
    }
    
    .form_shadow_bottom{
    	display: block;
    }
    
    .segment_header{
    	margin: 1px;
    	padding: 22px 0 18px 0;
    	color: #000000;
    	background: #FDD4BD;
    	width: auto;
    	background-repeat: repeat;
    }
    
    .q{
    	padding: 5px;
    	margin-bottom: 5px;
    	margin-left: 5px;
    	float: left;
    	display: block;
    }
    
    .q .question{
    	font-weight: bold;
    }
    
    .q .left_question_first{
    	width: 15em;
    }
    
    .required .icon{
    	background-image: none;
    	background-position: left;
    	background-repeat: no-repeat;
    	font-size: 13px;
    	padding-left: 14px;
    }
    
    .q .text_field{
    	border: 1px solid #FDD4BD;
    	color: #333333;
    	margin: 1px 0;
    	padding: 2px 1px;
    	background: #FFFFFF url(/images/forms/field_bg.png) top left;
    }
    
    .q .file_upload{
    	background: #F4F4F4;
    	border: 1px solid #FDD4BD;
    	color: #333333;
    	margin-top: 1px;
    }
    
    .q .file_upload_button{
    	margin-top: 2px;
    	border-color: #FDD4BD;
    	clear: left;
    }
    
    .q .file_upload_button:hover{
    	border-color: #444444;
    }
    
    .q .inline_grid td{
    	padding: 5px;
    	vertical-align: baseline;
    }
    
    .q .drop_down{
    	background: #F4F4F4;
    	border: 1px solid #FDD4BD;
    	color: #333333;
    	margin: 1px 0;
    	padding: 1px;
    }
    
    .q .matrix th{
    	color: #FFFFFF;
    	background: #FDD4BD;
    	padding: 5px;
    	font-weight: bold;
    	text-align: center;
    	vertical-align: bottom;
    }
    
    .q .matrix td{
    	padding: 5px;
    	text-align: center;
    	white-space: nowrap;
    	height: 26px;
    	border-bottom: 1px solid #FFC6AC;
    	border-top: 1px solid #FFC6AC;
    }
    
    .q .matrix td.question{
    	border-right: 1px solid #FFC6AC;
    	font-weight: normal;
    }
    
    .q .matrix .multi_scale_sub th{
    	font-weight: normal;
    	border-top: 1px solid #FFC6AC !important;
    	background: #FDD4BD;
    }
    
    .q .matrix .multi_scale_break{
    	border-right: 1px solid #FFC6AC;
    }
    
    .q .matrix_row_dark td{
    	color: #000000;
    	background: #FDD4BD;
    }
    
    .q .matrix_row_dark td.question{
    	color: #000000;
    	background: #FDD4BD;
    }
    
    .q .matrix_row_light td{
    	color: #000000;
    	background: #FDD4BD;
    }
    
    .q .matrix_row_light td.question{
    	color: #000000;
    	background: #FDD4BD;
    }
    
    .q .rating_ranking td{
    	padding: 5px;
    }
    
    .q .scroller{
    	border: 1px solid #000000;
    }
    
    .highlight{
    	background: #aaaaaa;
    }
    
    tr.highlight td{
    	background: #aaaaaa !important;
    }
    
    .outside{
    	color: #000000;
    	font-family: Memphis Light, Lucida Grande,Tahoma,Arial,sans-serif;
    	font-size: 12px;
    }
    
    .outside_container{
    	width: auto;
    	padding: 1em 0;
    	margin-left: 0;
    	margin-right: auto;
    	text-align: center;
    	color: #000000;
    	font-family: Memphis Light, Lucida Grande,Tahoma,Arial,sans-serif;
    	font-size: 12px;
    }
    
    .outside_container .submit_button{
    	color: #000000;
    	background: url(/images/forms/gradients/white_short.png);
    	border-style: solid;
    	border-width: 1px;
    	border-color: #000000;
    }
    
    .outside_container .submit_button:hover{
    	border-color: #444444;
    }
    
    .outside_container .progress_bar{
    	background: #000000;
    	margin: 0;
    }
    
    </style>
    
    </body>
    
    </html>

  2. #2
    Join Date
    Apr 2009
    Location
    Bristol, U.K.
    Posts
    1,120
    I don't think the CSS should have any bearing on your form working in a page. You need to check the scripting is correct.


    "Reliable and affordable web design - Bristol, UK"

    Website Links: Bristol Web Design | Bristol IT Support | Corrosive Online
    Social Media for Yoto Creative: Follow Us | Like Us

Similar Threads

  1. Embedded direction form into google map
    By sparrow in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 02 Jan 2009, 01:39 PM
  2. Replies: 1
    Last Post: 25 Mar 2008, 07:31 PM
  3. Help for my church designing a form page for volunteer signup
    By sharinglife in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 1
    Last Post: 06 Jun 2006, 02:28 PM
  4. create page from a form
    By shdwmnk in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 17 Dec 2005, 04:42 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •