Welcome to TalkGraphics.com
Results 1 to 5 of 5
  1. 15 April 2009, 08:02 AM #1
    johne53
    johne53 is offline Member
    Join Date
    Apr 2009
    Location
    Manchester, UK.
    Posts
    56

    Default Simplifying a Form (corrected)

    This web page contains a form, embedded in a placeholder. The form was designed for me some time ago by someone I'm no longer in contact with. In Internet Explorer, the web page looks exactly like it does in Xara - but in FireFox it looks awful. The form width is much too wide and some of the boxes come out in the wrong position. Maybe the size problem could be solved by using a font that both browsers support, although the font family is defined as Arial / Helvetica / MS Sans Serif which I thought would be common to everything.

    I showed the problem to a friend of mine who's a web designer. All he could tell me about the form was that "it's too complicated". Can anyone give me some tips on simplifying the code? I've attached the full html code inside a zip file (and the main form element is shown below). The actual functionality has been removed, just to keep the code as simple as possible (obviously, this'll be replaced later, once I get the layout right).

    OTOH, I don't mind switching to a proper form designer app if it will help to solve this problem. Is this kind of problem common with forms?
    Attached Files Attached Files
    Last edited by johne53; 15 April 2009 at 10:49 AM. Reason: Heading was wrong
    Reply With Quote Reply With Quote IP
  2. 15 April 2009, 08:48 AM #2
    johne53
    johne53 is offline Member
    Join Date
    Apr 2009
    Location
    Manchester, UK.
    Posts
    56

    Default Re: Simplifying a table

    The main form after removing some clutter:-
    Code:
    <TABLE class='main'>
	<TR>
	<TD align="center">
      		<SPAN class='largeredinstruction'>1) First, some information about yourself<BR>
	</TD>
	</TR>
	<TR>
	<TD align='center' bgcolor = "#FFFFFF">
		<FORM name = "form1" method = "POST" action = "http://www.avtoolkit.co.uk/cgi-bin/formmail.pl">

			<INPUT type="hidden" name = "recipient" value="enquiries@avtoolkit.co.uk">
			<INPUT type="hidden" name = "redirect" value="http://www.avtoolkit.co.uk/regreply.html">
			<INPUT type="hidden" name = "subject" value="PRODUCT REGISTRATION">
			<TABLE class='form'>
				<TR>
				<TD width='50%' valign="baseline">
					<TABLE border='0' cellpadding='0' cellspacing='0'>
						<TR>
							<TD><SPAN class='formitemlabel'>Title:</SPAN>
								<BR><SELECT name="title">
									<OPTION value="None" selected>- -</OPTION>
									<OPTION value="Mr">Mr</OPTION>
									<OPTION value="Mrs">Mrs</OPTION>
									<OPTION value="Miss">Miss</OPTION>
									<OPTION value="Ms">Ms</OPTION>
								</SELECT><BR>
							</TD>
							<TD>&nbsp;</TD>
							<TD><SPAN class='formitemlabel'>Your name: <SPAN class='asterix'>*</SPAN></SPAN>
								<BR><INPUT type="text" name="Your Name" size="26">
							</TD>
							<TD>&nbsp;</TD>
						</TR>
					</TABLE>
				<TD width='50%' valign="baseline"><SPAN class='formitemlabel'>Your email address: <SPAN class='asterix'>*</SPAN></SPAN>
					<BR><INPUT type="text" name="Your E-mail" size="36" value=""></FONT>
				</TD>
				</TR>
			</TR>
				<TR>
					<TD width="100%" class='instruction'><SPAN class='largeinstruction'><BR></TD>
				</TR>
				<TR>
					<TD width="100%" colspan='2'><HR></TD>
				</TR>
				<TR>
					<TD width="100%" colspan="2" class='instruction'><SPAN class='largeredinstruction'>2) Where & when did you purchase ArdourXchange?<BR></TD>
				</TR>
				<TR>
					<TD><SPAN class='formitemlabel'>Vendor's name: <SPAN class='asterix'>*</SPAN></SPAN>
						<BR><INPUT type="text" name="Vendor Name" size="36" maxlength="50">
					</TD>
					<TD>&nbsp;</TD>
				</TR>
				<TR>
					<TD><SPAN class='formitemlabel'>Vendor's ref: (e.g. invoice number) <SPAN class='asterix'>*</SPAN></SPAN>
						<BR><INPUT type="text" name="Vendor Ref" size="36">
					</TD>
					<TD valign="baseline"><SPAN class='formitemlabel'>Invoice (or purchase) date: <SPAN class='asterix'>*</SPAN></SPAN>
						<BR><INPUT type="text" name="Purchase Date" size="36">
					</TD>
				</TR>
				<TR>
					<TD class='instruction'><SPAN class='largeinstruction'><BR></TD>
				</TR>
				<TR>
				<TR>
					<TD colspan='2'><HR></TD>
				<TR>
					<TD width="100%" colspan="2"class='instruction'><SPAN class='largeredinstruction'>3) Finally, enter the numbers from your registration dialog<BR></TD>
				</TR>
				</TR>
					<TD align='center'>
						<TABLE>
							<TR>
								<TD valign="baseline" colspan="5" align="left"><SPAN class='formitemlabel'>Installation No. ( 4-XX-XXX ): <SPAN class='asterix'>*</SPAN></SPAN></TD>
							</TR>
							<TR>
								<TD><INPUT type="text" name="Installation ID" size="26">
								</TD>
							</TR>
						</TABLE>
					</TD>
					<TD align='left'>
						<TABLE>
							<TR>
								<TD valign="baseline" colspan="5" align="left"><SPAN class='formitemlabel'>Site Code: <SPAN class='asterix'>*</SPAN></SPAN>
							</TR>
							<TR>
								<TD><INPUT type="text" name="Site Code (1)" size="5">
									<INPUT type="text" name="Site Code (2)" size="5">
								</TD>
							</TR>
						</TABLE>
						<TABLE>
							<TR>
								<TD valign="baseline" colspan="5" align="left"><SPAN class='formitemlabel'>Registration Code: <SPAN class='asterix'>*</SPAN></SPAN>
							</TR>
							<TR>
								<TD><INPUT type="text" name="Reg Code (1)" size="5">
									<INPUT type="text" name="Reg Code (2)" size="5">
								</TD>
							</TR>
						</TABLE>
					</TD>
				</TR>
				<TR>
					<TD class="smallmessage_red" colspan="2"><SPAN class='smallmessage_red'> <BR>* Mandatory - do not leave blank</SPAN>
					<TD>&nbsp;</TD>
				</TR>
				<TR class='buttons'>
					<TD class='buttons' colspan='2'>
						<INPUT type="submit" name="Submit" value="Submit" onClick="MM_validateForm('Your Name','','R', 'Your E-mail','','RisEmail', 'Vendor Name','','R', 'Vendor Ref','', 'R', 'Purchase Date','', 'R', 'Installation ID','', 'R', 'Site Code (1)','', 'R', 'Site Code (2)','', 'R', 'Reg Code (1)','', 'R', 'Reg Code (2)','', 'R' );return document.MM_returnValue">
						<INPUT type="reset" name="Reset" value="Reset Form">
					</TD>
				</TR>
			</TABLE>
		</FORM>
	</TD>
	</TR>
</TABLE>
    Last edited by johne53; 15 April 2009 at 09:03 AM. Reason: General tidying up
    Reply With Quote Reply With Quote IP
  3. 15 April 2009, 11:18 AM #3
    johne53
    johne53 is offline Member
    Join Date
    Apr 2009
    Location
    Manchester, UK.
    Posts
    56

    Default Re: Simplifying a Form (corrected)

    This code is for just a very small section of the form (just the first row of entry boxes)
    Code:
    <HTML>
<LINK rel="stylesheet" type="text/css" href="index_htm_files/CPPStyle.css" />
<BODY bgcolor="#FFFFFF" text="#330066" link="#0033FF" vlink="#FF0099" alink="#00CCFF">

<TABLE class='main'>
	<TR>
		<TD align='center' bgcolor = "#FFFFFF">
                        <SPAN class='largeredinstruction'>2) Second, some information about yourself<BR></SPAN>
			<FORM name = "form1" method = "POST" action = "http://www.avtoolkit.co.uk/cgi-bin/formmail.pl">

				<INPUT type="hidden" name = "recipient" value="enquiries@avtoolkit.co.uk">
				<INPUT type="hidden" name = "redirect" value="http://www.avtoolkit.co.uk/regreply.html">
				<INPUT type="hidden" name = "subject" value="PRODUCT REGISTRATION">
				<TABLE class='form'>
					<TR>
						<TD width='50%' valign="baseline">
							<TABLE border='0' cellpadding='0' cellspacing='0'>
								<TR>
									<TD><SPAN class='formitemlabel'>Title:</SPAN>
										<BR><SELECT name="title">
											<OPTION value="None" selected>- -</OPTION>
											<OPTION value="Mr">Mr</OPTION>
											<OPTION value="Mrs">Mrs</OPTION>
											<OPTION value="Miss">Miss</OPTION>
											<OPTION value="Ms">Ms</OPTION>
										</SELECT><BR>
									</TD>
									<TD>&nbsp;</TD>
									<TD><SPAN class='formitemlabel'>Your name: <SPAN class='asterix'>*</SPAN></SPAN>
										<BR><INPUT type="text" name="Your Name" size="26">
									</TD>
									<TD>&nbsp;</TD>
								</TR>
							</TABLE>
						<TD width='50%' valign="baseline"><SPAN class='formitemlabel'>Your email address: <SPAN class='asterix'>*</SPAN></SPAN>
								<BR><INPUT type="text" name="Your E-mail" size="36" value=""></FONT>
						</TD>
					</TR>
					<TR>
						<TD width="100%" class='instruction'><SPAN class='largeinstruction'><BR></TD>
					</TR>
					<TR>
						<TD width="100%" colspan='2'><HR></TD>
					<TR>
						<TD class="smallmessage_red" colspan="2"><SPAN class='smallmessage_red'> <BR>* Mandatory - do not leave blank</SPAN>
						<TD>&nbsp;</TD>
					</TR>
					<TR class='buttons'>
						<TD class='buttons' colspan='2'>
							<INPUT type="submit" name="Submit" value="Submit" onClick="MM_validateForm('Your Name','','R', 'Your E-mail','','RisEmail', 'Vendor Name','','R', 'Vendor Ref','', 'R', 'Purchase Date','', 'R', 'Installation ID','', 'R', 'Site Code (1)','', 'R', 'Site Code (2)','', 'R', 'Reg Code (1)','', 'R', 'Reg Code (2)','', 'R' );return document.MM_returnValue">
							<INPUT type="reset" name="Reset" value="Reset Form">
						</TD>
					</TR>
				</TABLE>
			</FORM>
		</TD>
	</TR>
</TABLE>
</BODY>
</HTML>
    The above code is the smallest I can get whilst still retaining the correct layout in Xara and IE- and yet it already exhibits the problem that I'm seeing in FireFox. So have I done something wrong or is the problem in FireFox
    Reply With Quote Reply With Quote IP
  4. 15 April 2009, 11:58 AM #4
    camelot217
    camelot217 is offline Member
    Join Date
    Dec 2006
    Location
    Park City, Utah
    Posts
    318

    Default Re: Simplifying a Form (corrected)

    Why don't you switch to JotForm (jotform.com)? You can create some very nice forms with it, very easy to set up and it's free.

    Tom
    Reply With Quote Reply With Quote IP
  5. 15 April 2009, 12:33 PM #5
    johne53
    johne53 is offline Member
    Join Date
    Apr 2009
    Location
    Manchester, UK.
    Posts
    56

    Default Re: Simplifying a Form (corrected)

    Yes, I've been thinking about that. I might see if I can replicate my simple cutdown form (using Jotform) just to see if it still suffers from the same problem.
    Reply With Quote Reply With Quote IP
 

 
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

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

Forum Rules

Powered by vBulletin® Version 4.2.2
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.
© 2018 Xara Group Ltd
All times are GMT. The time now is 09:32 PM.