Page 1 of 6 123 ... LastLast
Results 1 to 10 of 60

Thread: Form not responsive to page

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,085
    Thanks
    157
    Thanked 3 Times in 3 Posts

    Default Form not responsive to page

    Good Morning,
    I have a responsive site which works very well.

    I have created a new contact form and placed into an existing test page which can be seen here http://www.theremotedoctor.co.uk/tes...rollto=content
    When i view the page on a mobile or tablet the form is off the screen where the rest of the page seems fine.
    I thought that as media query or responsive code was in place already it would have taken care of it like wrapping the form so the input fields would be shown in a vertical column.

    Please could you advise what i am required to add so the page is view correctly.

    See my attached photo please.

    Many Thanks.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	2367.jpg 
Views:	51 
Size:	50.4 KB 
ID:	6107  
    Last edited by theremotedr; 02-15-2017 at 01:31 PM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I thought that as media query or responsive code was in place already it would have taken care of it like wrapping the form so the input fields would be shown in a vertical column.
    Nope - the markup for the form is contained in a table, so you can either take away the table, or you can try to make it responsive by forcing it to NOT behave like a table https://css-tricks.com/responsive-data-tables/
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,300
    Thanks
    1
    Thanked 240 Times in 235 Posts

    Default

    Hi there theremotedr,

    why did you not use the form code that "deathshadow" provided in this post...


    He gave you a fully responsive example here...


    ...plus all the relevant files here...


    coothead
    ~ the original bald headed old fart ~

  4. #4
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,085
    Thanks
    157
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    I have now gone with "deathshadows" code.
    And like all other items it isnt like his example.
    You can confirm that here http://www.theremotedoctor.co.uk/test-form.html

    Some redundant code is messing things up i assume.

  5. #5
    Join Date
    Jan 2009
    Location
    NH
    Posts
    670
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    you have <form id="contact" and yet in none of the css do you have #contact

  6. #6
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,085
    Thanks
    157
    Thanked 3 Times in 3 Posts

    Default

    I have just copied & paste from elsewhere ???

    I get conflicting info & cant sort it out.

  7. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,085
    Thanks
    157
    Thanked 3 Times in 3 Posts

    Default

    Here is the css and i see plenty of contct mentioned.
    Can you advise why you dont see it ?
    Code:
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,dl,dt,dd,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img, fieldset {
    	border:none;
    }
    
    hr {
    	display:none;
    	/*
    		HR in my code are for semantic breaks in topic/section, NOT
    		style/presenation, so hide them from screen.css users
    	*/
    }
    
    @media (max-width:480px) {
    	/*
    		Some older small screen devices will try to force a text-size
    		adjustment regardless of our viewport meta, this overrides that
    		so it obeys what we tell it. This is in a max-width query so that
    		we don't send this to desktop safari, as it breaks zooming there...
    		Even though it does NOT break zooming in mobile Safari?
    		
    		Way to herpa that derp there Apple!
    	*/
    	* {
    		-webkit-text-size-adjust:none;
    		-ms-text-size-adjust:none;
    	}
    }
    
    body {
    	min-width:48em; /* for legacy desktops */
    	padding:0 1em 1em;
    	font:normal 85%/150% arial,helvetica,sans-serif;
    }
    
    h1 {
    	text-align:center;
    	padding:0.5em 0;
    }
    
    #contact {
    	max-width:66em;
    	margin:0 auto;
    }
    
    #contact b {
    	color:#F00;
    }
    
    @media (min-width:1px) {
    	/* sneaky trick to target just modern browsers */
    	
    	#contact fieldset br {
    		display:none;
    	}
    
    	#contact fieldset div {
    		float:left;
    		width:50%;
    		padding:0 0.5em 0.75em 11.5em;
    		-webkit-box-sizing:border-box;
    		box-sizing:border-box;
    	}
    	
    	#contact fieldset div:nth-child(even) {
    		padding:0 0 0.75em 12em;
    	}
    	
    	#contact fieldset .hasTextArea {
    		width:100%;
    		padding-right:0;
    	}
    	
    	#contact label {
    		float:left;
    		width:11em;
    		padding-right:0.5em;
    		margin-left:-11.5em;
    		text-align:right;
    	}
    	
    	#contact fieldset input,
    	#contact fieldset textarea {
    		width:100%;
    		-webkit-box-sizing:border-box;
    		box-sizing:border-box;
    	}
    	
    	#contact .submitsAndHiddens {
    		clear:both;
    		padding-left:11.5em;
    		text-align:right;
    	}
    	
    	#contact .submitsAndHiddens p {
    		float:left;
    	}
    	
    }
    
    @media (max-width:48em) {
    	body {
    		min-width:192px;
    	}
    	#contact {
    		max-width:33em;
    		margin:0 auto;
    	}
    	#contact fieldset div,
    	#contact fieldset div:nth-child(even) {
    		float:none;
    		width:auto;
    		padding:0 0 0.75em 11.5em;
    	}
    }
    
    @media (max-width:25em) {
    	#contact label {
    		float:none;
    		display:block;
    		width:auto;
    		margin:0;
    		text-align:left;
    	}
    	#contact fieldset div,
    	#contact fieldset div:nth-child(even) {
    		padding:0 0 0.75em;
    	}
    	#contact .submitsAndHiddens {
    		padding-left:0;
    		text-align:center;
    	}
    	
    	#contact .submitsAndHiddens p {
    		float:none;
    	}
    	
    }

  8. #8
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,085
    Thanks
    157
    Thanked 3 Times in 3 Posts

    Default

    Well the demo found here http://www.cutcodedown.com/for_other.../template.html works perfect on my phone.
    I did not doubt that one minute.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	2368.jpg 
Views:	21 
Size:	27.9 KB 
ID:	6109  

  9. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,300
    Thanks
    1
    Thanked 240 Times in 235 Posts

    Default

    Hi there theremotedr,

    try replacing your "send_form_email.php" and "test-form.html" files
    with those that may be found in the attachment.

    You should then be able to receive your emails.

    coothead
    Attached Files Attached Files
    ~ the original bald headed old fart ~

  10. #10
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,085
    Thanks
    157
    Thanked 3 Times in 3 Posts

    Default

    Coothead.
    That is the old form ?

    I thought i was now using the form from Deathshadow.

Similar Threads

  1. Responsive 2 Column Form
    By toroundfile in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-31-2013, 06:44 PM
  2. Replies: 6
    Last Post: 03-05-2009, 07:18 AM
  3. Date and time stamp in form field box on a form field page
    By Embryo in forum Looking for such a script or service
    Replies: 1
    Last Post: 05-10-2008, 04:37 PM
  4. Replies: 5
    Last Post: 12-15-2007, 02:53 PM
  5. Form Input, Confirmation Page and Thank you Page
    By tonywanders in forum JavaScript
    Replies: 6
    Last Post: 03-26-2007, 02:39 AM

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
  •