Embedded zoho web form not displaying correctly when published

March 13, 2011

(Apologies if this is posted twice, just couldn't find my post in the PlatformPro forum category.) Link to my screencast: http://www.screencast.com/t/MTeM6esWb Cheers

March 13, 2011

The formatting is strange because of the styling for the table properties that are used to display the form. Can you provide a link to the site?

March 14, 2011

Hi Catrina Here's a link to the contact page: http://ambient-sl.com.au/?page_id=16 Thanks, Pete P.S. I'm not a developer so I don't code and my client is a friend, so any help is greatly appreciated.

March 14, 2011

Hi Guys Here's the code for the page. The form code begins around line 149. Any ideas or thoughts? Btw, do Pagelines employees help on this forum or is it just community driven? Regards, Pete

	<!DOCTYPE html><!-- HTML 5 -->
	<html dir="ltr" lang="en-US">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>  Contact Us</title>
	<link rel="shortcut icon" href="http://ambient-sl.com.au/wp-content/uploads/2011/03/asl-favicon.png" type="image/x-icon" /><link rel="apple-touch-icon" href="http://ambient-sl.com.au/wp-content/uploads/2011/03/asl-appltch.png" />
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	<!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script> <![endif]-->
	<!--[if IE 6]>
	<script src="http://ambient-sl.com.au/wp-content/themes/platformpro/core/js/ie.belatedpng.js"></script>
	<script>DD_belatedPNG.fix('.pngbg, .shadow-bottom, .post-comments a, #fcolumns_container, #footer img, .branding_wrap img, .fboxgraphic img ');</script>
	<![endif]-->
	<meta name='robots' content='noindex,nofollow' />
	<link rel="alternate" type="application/rss+xml" title="Ambient Sustainable Living » Feed" href="http://ambient-sl.com.au/?feed=rss2" />
	<link rel="alternate" type="application/rss+xml" title="Ambient Sustainable Living » Comments Feed" href="http://ambient-sl.com.au/?feed=comments-rss2" />
	<link rel="alternate" type="application/rss+xml" title="Ambient Sustainable Living » Contact Us Comments Feed" href="http://ambient-sl.com.au/?feed=rss2&page_id=16" />
	<link rel='stylesheet' id='admin-bar-css'  href='http://ambient-sl.com.au/wp-includes/css/admin-bar.css?ver=20110122' type='text/css' media='all' />
	<link rel='stylesheet' id='NextGEN-css'  href='http://ambient-sl.com.au/wp-content/plugins/nextgen-gallery/css/ngg_shadow2.css?ver=1.0.0' type='text/css' media='screen' />
	<link rel='stylesheet' id='shutter-css'  href='http://ambient-sl.com.au/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.0' type='text/css' media='screen' />
	<link rel='stylesheet' id='pagelines-pro-css'  href='http://ambient-sl.com.au/wp-content/themes/platformpro/pro/pro.css?ver=03021163253' type='text/css' media='all' />
	<link rel='stylesheet' id='pagelines-stylesheet-css'  href='http://ambient-sl.com.au/wp-content/themes/platformpro/style.css?ver=03021163253' type='text/css' media='all' />
	<!--[if lte IE 6]>
	<link rel='stylesheet' id='ie6-style-css'  href='http://ambient-sl.com.au/wp-content/themes/platformpro/css/ie6.css?ver=1.3.1' type='text/css' media='all' />
	<![endif]-->
	<!--[if IE 7]>
	<link rel='stylesheet' id='ie7-style-css'  href='http://ambient-sl.com.au/wp-content/themes/platformpro/css/ie7.css?ver=1.3.1' type='text/css' media='all' />
	<![endif]-->
	<link rel='stylesheet' id='superfish-css'  href='http://ambient-sl.com.au/wp-content/themes/platformpro/sections/nav/superfish.css?ver=1.3.1' type='text/css' media='screen' />
	<script type='text/javascript' src='http://ambient-sl.com.au/wp-includes/js/l10n.js?ver=20101110'></script>
	<script type='text/javascript'>
	/* <![CDATA[ */
	var shutterSettings = {
		msgLoading: "L O A D I N G",
		msgClose: "Click to Close",
		imageCount: "1"
	};
	/* ]]> */
	</script>
	<script type='text/javascript' src='http://ambient-sl.com.au/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.0'></script>
	<script type='text/javascript' src='http://ambient-sl.com.au/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
	<script type='text/javascript' src='http://ambient-sl.com.au/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.88'></script>
	<script type='text/javascript' src='http://ambient-sl.com.au/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.05'></script>
	<script type='text/javascript' src='http://ambient-sl.com.au/wp-includes/js/comment-reply.js?ver=20090102'></script>
	<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://ambient-sl.com.au/xmlrpc.php?rsd" />
	<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://ambient-sl.com.au/wp-includes/wlwmanifest.xml" />
	<link rel='index' title='Ambient Sustainable Living' href='http://ambient-sl.com.au' />
	<link rel='next' title='Products' href='http://ambient-sl.com.au/?page_id=19' />
	<meta name="generator" content="WordPress 3.1" />
	<link rel='canonical' href='http://ambient-sl.com.au/?page_id=16' />
	
	<meta name='NextGEN' content='1.7.4' />
	
	<script type="text/javascript"> /* <![CDATA[ */ jQuery(document).ready(function() {  jQuery('ul.sf-menu').superfish({ delay: 100, speed: 'fast', autoArrows:  1, dropShadows: 1 });  }); /* ]]> */ </script>
	
	<link rel="stylesheet" id="pagelines-dynamic-css" href="http://ambient-sl.com.au/wp-content/uploads/pagelines/dynamic.css?ver=03141155600" type="text/css" media="all" />
	<style type="text/css" media="print">#wpadminbar { display:none; }</style>
	<style type="text/css">
		html { margin-top: 28px !important; }
		* html body { margin-top: 28px !important; }
	</style>
	</head>
	<body class="page page-id-16 page-template page-template-default logged-in admin-bar full_width ttype-default tmain-default">
	
			<div id="site" class="fullwidth"> <!-- #site // Wraps #header, #page-main, #footer - closed in footer -->
	
					<div id="page"> <!-- #page // Wraps #header, #page-main - closed in footer -->
				<div id="page-canvas">
									<div id="header" class="container-group fix">
						<div class="outline">
										<div id="branding" class="container fix">
					<div class="texture">
						<div class="content">
							<div class="content-pad">
	<div class="branding_wrap">
		
	
		<div class="icons" style="bottom: 0px; right: px;">
	
					
	
												
										
										
										
	
		</div>
	</div>
							<div class="clear"></div>
						</div>
					</div>
				</div>
			</div>
				<div id="primary-nav" class="container fix">
					<div class="texture">
						<div class="content">
							<div class="content-pad">
		<div id="nav_row" class="main_nav fix">
	<ul id="menu-home" class="main-nav sf-menu"><li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">Home
	<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">About Us
	<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">Products
	<ul class="sub-menu">
		<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77">Walls & Ceilings
		<li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">Windows & Doors
		<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92">Shading & Garage Doors
		<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91">Home Automation
		<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94">LED Lighting
	
	<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97">Photo Gallery
	<li id="menu-item-152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-152">Blog
	<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item menu-item-37">Contact Us
	<form method="get" class="searchform" action="http://ambient-sl.com.au/" onsubmit="this.submit();return false;">
		<fieldset>
			<input type="text" value="Search" name="s" class="searchfield" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" />
	
			<input type="image" class="submit btn" name="submit" src="http://ambient-sl.com.au/wp-content/themes/platformpro/images/search-btn.png" alt="Go" />
		</fieldset>
	</form>
		</div>
	
							<div class="clear"></div>
						</div>
					</div>
				</div>
			</div>
						</div>
					</div>
									<div id="page-main" class="container-group fix"> <!-- #page-main // closed in footer -->
						<div id="dynamic-content" class="outline fix">
																<div id="maincontent" class="container fix">
					<div class="texture">
						<div class="content">
							<div class="content-pad">
	<div id="pagelines_content" class="fullwidth fix">
	
			<div id="column-wrap" class="fix">
	
					<div id="column-main" class="mcolumn fix">
				<div class="mcolumn-pad" >
								<div id="theloop" class="copy fix">
					<div class="copy-pad">
	<div class="post-16 page type-page status-publish hentry fpost" id="post-16">
	
							<div class="entry_wrap fix">
	
								<div class="entry_content">
									<div id="crmWebToEntityForm">
	<form action="https://crm.zoho.com/crm/WebToLeadForm" accept-charset="UTF-8" method="POST">
	<table style="border-top: 2px solid #999999; border-bottom: 1px solid #999999; background-color: #ffffff;" border="0" cellspacing="0" cellpadding="5" width="480">
	<input name="xnQsjsdp" type="hidden" value="f9wlffHale0$/" />
	<input name="xmIwtLD" type="hidden" value="dEg8eA7SlbZNIcdiJvow0aGcCJdtoggv/" />
	<input name="actionType" type="hidden" value="TGVhZHM=/" />
	<input name="returnURL" type="hidden" value="http://www.ambient-sl.com.au" />
	<tbody>
	<tr>
	<td style="background-color: #f5f5f5; border-bottom: 2px dotted #dadada; color: #000000; font-family: sans-serif; font-size: 14px;" colspan="2" align="middle">Contact Form</td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Last Name   :</td>
	<td width="75%">
	<input maxlength="80" name="Last Name" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">First Name   :</td>
	<td width="75%">
	<input maxlength="40" name="First Name" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Email   :</td>
	<td width="75%">
	<input maxlength="100" name="Email" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Title   :</td>
	<td width="75%">
	<input maxlength="100" name="Designation" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Fax   :</td>
	<td width="75%">
	<input maxlength="30" name="Fax" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Phone   :</td>
	<td width="75%">
	<input maxlength="30" name="Phone" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Website   :</td>
	<td width="75%">
	<input maxlength="120" name="Website" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Mobile   :</td>
	<td width="75%">
	<input maxlength="30" name="Mobile" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Skype ID   :</td>
	<td width="75%">
	<input maxlength="50" name="Skype ID" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Salutation   :</td>
	<td width="75%">
	<select name="Salutation">
	<option value="-None-">-None-</option>
	<option value="Mr.">Mr.</option>
	<option value="Mrs.">Mrs.</option>
	<option value="Ms.">Ms.</option>
	<option value="Dr.">Dr.</option>
	<option value="Prof.">Prof.</option>
	</select>
	</td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Street   :</td>
	<td width="75%">
	<input maxlength="250" name="Street" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">City   :</td>
	<td width="75%">
	<input maxlength="30" name="City" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">State   :</td>
	<td width="75%">
	<input maxlength="30" name="State" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Zip Code   :</td>
	<td width="75%">
	<input maxlength="30" name="Zip Code" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Country   :</td>
	<td width="75%">
	<input maxlength="30" name="Country" type="text" /></td>
	</tr>
	<tr>
	<td style="font-family: sans-serif; font-size: 12px; font-weight: bold;" width="25%" align="right">Description   :</td>
	<td width="75%"><textarea name="Description"></textarea></td>
	</tr>
	<tr>
	<td style="background-color: #eaeaea;" colspan="2" align="center">
	<input name="save" type="submit" value="Save" />
	<input name="reset" type="reset" value="Reset" /></td>
	</tr>
	</tbody>
	</table>
	</form>
	</div>
										<div class="clear"></div>
										[Edit Page]							</div>
								<div class="tags">
	
								</div>
							</div>
									</div>
	
					<div class="clear"></div>
					</div>
				</div>
				</div>
			</div>
	
		</div>
	
	</div>						<div class="clear"></div>
						</div>
					</div>
				</div>
			</div>
				<div id="boxes" class="container fix">
					<div class="texture">
						<div class="content">
							<div class="content-pad">
			<div class=" dcol_container_5 fix">
				<div id="fbox_110" class="dcol_5 dcol">
					<div class="dcol-pad inline_thumbs">
												<div class="fboxgraphic">
														</div>
												<div class="fboxinfo fix">
								<div class="fboxtitle">
									<h3>
									</h3>
								</div>
								<div class="fboxtext">

<H3>Windows & Doors</H3>[Edit Box]</div> </div> </div> </div> <div id="fbox_106" class="dcol_5 dcol"> <div class="dcol-pad inline_thumbs"> <div class="fboxgraphic">

</div> <div class="fboxinfo fix"> <div class="fboxtitle"> <h3> </h3> </div> <div class="fboxtext"><H3>Shading & Garage</H3>[Edit Box]</div> </div> </div> </div> <div id="fbox_11" class="dcol_5 dcol"> <div class="dcol-pad inline_thumbs"> <div class="fboxgraphic">

</div> <div class="fboxinfo fix"> <div class="fboxtitle"> <h3> </h3> </div> <div class="fboxtext"><H3>Walls & Ceilings</H3>[Edit Box]</div> </div> </div> </div> <div id="fbox_10" class="dcol_5 dcol"> <div class="dcol-pad inline_thumbs"> <div class="fboxgraphic">

</div> <div class="fboxinfo fix"> <div class="fboxtitle"> <h3> </h3> </div> <div class="fboxtext"><H3>Home Automation</H3>[Edit Box]</div> </div> </div> </div> <div id="fbox_9" class="dcol_5 dcol"> <div class="dcol-pad inline_thumbs"> <div class="fboxgraphic">

</div> <div class="fboxinfo fix"> <div class="fboxtitle"> <h3> </h3> </div> <div class="fboxtext"><H3>Lighting</H3>[Edit Box]</div> </div> </div> </div> <div class="clear"></div> </div> <div class="clear"></div> <div class="clear"></div> </div> </div> </div> </div> </div>  <div id="morefoot_area"> <div id="morefoot" class="container fix"> <div class="texture"> <div class="content"> <div class="content-pad"> <div class="morefoot_back fix"> <div id="morefootbg" class=" fix"> <div class="dcol_container_3"> <div class="dcol_3 dcol wcontain fix"> <div class="dcol-pad"> <div class="widget"> </div> </div> </div> <div class="dcol_3 dcol wcontain"> <div class="dcol-pad"> <div class="widget"> </div> </div> </div> <div class="dcol_3 lastcol dcol wcontain"> <div class="dcol-pad"> <div class="widget"> </div> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div> </div> </div> <div id="twitterbar" class="container fix"> <div class="texture"> <div class="content"> <div class="content-pad"> <div class="tbubble"> Set your Twitter account name in your settings to use the TwitterBar Section. </div> <div class="clear"></div> </div> </div> </div> </div> </div> <div class="clear"></div> </div>  </div>  </div>  <div id="footer"> <div class="outline fix"> <div id="footcols" class="container fix"> <div class="texture"> <div class="content"> <div class="content-pad"> <div id="fcolumns_container" class="dcol_container_5 fix"> <div class="dcol_5 dcol"> <div class="dcol-pad">

</div> </div> <div class="dcol_5 dcol"> <div class="dcol-pad"> <h3 class="widget-title">Pages</h3> <div class="menu-home-container"><ul id="menu-home-1" class="footer-links list-links"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">Home <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">About Us <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">Products <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97">Photo Gallery <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-152">Blog <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item menu-item-37">Contact Us </div> </div> </div> <div class="dcol_5 dcol"> <div class="dcol-pad"> <h3 class="widget-title">The Latest</h3> <ul class="latest_posts"> <li class="list-item fix"> <div class="list_item_text"> <h5><span class="list-title">Hello world!</span></h5> <div class="list-excerpt">Welcome to WordPress. This is your first post. Edit or delete it, […]</div> </div> </div> </div> <div class="dcol_5 dcol"> <div class="dcol-pad"> <h3 class="widget-title">More</h3> <div class="findent footer-more"> Thanks for dropping by! Feel free to join the discussion by leaving comments, and stay updated by subscribing to the RSS feed. </div> </div> </div> <div class="dcol_5 dcol"> <div class="dcol-pad"> <div class="findent terms"> ?© 2011 Ambient Sustainable Living </div> </div> </div> </div> <div class="clear"></div> <div class="clear"></div> </div> </div> </div> </div> <div class="clear"></div> <div class="clear"></div> </div> </div> </div> <script type='text/javascript' src='http://ambient-sl.com.au/wp-includes/js/admin-bar.js?ver=20110131'></script> <script type='text/javascript' src='http://ambient-sl.com.au/wp-content/themes/platformpro/sections/nav/superfish.js?ver=1.0'></script> <script type='text/javascript' src='http://ambient-sl.com.au/wp-content/themes/platformpro/sections/nav/jquery.bgiframe.min.js?ver=1.0'></script> <div id="wpadminbar"> <div class="quicklinks">

<li id="wp-admin-bar-my-account-with-avatar" class="menupop">

<span>

admin</span>

<li id="wp-admin-bar-edit-my-profile" class="">

Edit My Profile <li id="wp-admin-bar-dashboard" class=""> Dashboard <li id="wp-admin-bar-log-out" class=""> Log Out <li id="wp-admin-bar-edit" class=""> Edit Page <li id="wp-admin-bar-new-content" class="menupop"> <span>Add New</span>

<li id="wp-admin-bar-new-post" class="">

Post <li id="wp-admin-bar-new-page" class=""> Page <li id="wp-admin-bar-new-feature" class=""> Feature <li id="wp-admin-bar-new-boxes" class=""> Box <li id="wp-admin-bar-new-banners" class=""> Banner <li id="wp-admin-bar-comments" class=""> Comments <li id="wp-admin-bar-appearance" class="menupop"> <span>Appearance</span>

<li id="wp-admin-bar-widgets" class="">

Widgets <li id="wp-admin-bar-menus" class=""> Menus <li id="wp-admin-bar-pagelines_settings_adminbar" class=""> PageLines Settings </div> <div id="adminbarsearch-wrap"> <form action="http://ambient-sl.com.au" method="get" id="adminbarsearch"> <input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /> <input type="submit" class="adminbar-button" value="Search"/> </form> </div> </div> </body> </html>[/code]

March 14, 2011

Hi Peter, I'm not familiar with the Web form... does it come with it's own stylesheet? If not, then you'll have to use custom CSS to style it.

March 15, 2011

Hi Kate Do you have any idea why the form is conflicting with a platform pro default page, given that the form displays correctly in Automattic's Twenty Ten theme, for example?

Embedded zoho web form not displaying correctly when published

Recommended Posts

petergriffyn 0

Share this post

Link to post

Share on other sites

catrina 103

Share this post

Link to post

Share on other sites

petergriffyn 0

Share this post

Link to post

Share on other sites

petergriffyn 0

Share this post

Link to post

Share on other sites

Kate 3

Share this post

Link to post

Share on other sites

petergriffyn 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in