Form not responsive to page

[theremotedr]

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/test-form.html?scrollto=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.

[Beverleyh]

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/

[coothead]

Hi there theremotedr,


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


Table inside div issue (http://www.codingforums.com/html-and-css/383154-table-inside-div-issue.html#post1525380)

He gave you a fully responsive example here...


Form Demo (http://www.cutcodedown.com/for_others/ipbr21054/template.html)

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


ipbr21054/ (http://www.cutcodedown.com/for_others/ipbr21054/)



coothead

[theremotedr]

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.

[mlegg]

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

[theremotedr]

I have just copied & paste from elsewhere ???

I get conflicting info & cant sort it out.

[theremotedr]

Here is the css and i see plenty of contct mentioned.
Can you advise why you dont see it ?

/* 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;
}

}

[theremotedr]

Well the demo found here http://www.cutcodedown.com/for_others/ipbr21054/template.html works perfect on my phone.
I did not doubt that one minute.

[coothead]

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. :D


coothead

[theremotedr]

Coothead.
That is the old form ?

I thought i was now using the form from Deathshadow.

[theremotedr]

Coothead.
That is the old form ?

I thought i was now using the form from Deathshadow.
This is the page the form is on http://www.theremotedoctor.co.uk/test-form.html

I am trying to use DS code on this page.

At this rate im going to be bald also.....

[theremotedr]

Use this page please as a template http://www.theremotedoctor.co.uk/connectvan.html?scrollto=content

Where you currently see the white van that is where i need to put DS code.

But on this page please http://www.theremotedoctor.co.uk/test-form.html

[mlegg]

you would have been done with this last week if you followed my directions with the Bootstrap contact form

[theremotedr]

The form you advised did not send emails.
There was 61 errors on the page before i even touched it.

I didnt have time to sort them out.
I am learning to do this but cant take on extra work ontop of what i have so far.

[coothead]

Hi there theremotedr,


the files in the attachment are "deathshadow's html" and your php file that I corrected for errors.

You can see a working example, which should send you an email on submission, here...


http://www.coothead.co.uk/theremotedr-form-files/test-form.html


coothead

[theremotedr]

Coothead please send zip with files here please.

[styxlawyer]

There are too many threads about this contact form. I have just spent some time fixing the original PHP file so that it works (see here (http://www.dynamicdrive.com/forums/showthread.php?80940-php-file-will-not-send-form&p=320791#post320791)) and now you have gone off in a totally different direction.

[theremotedr]

Please can you advise why do i see the page like this then ?

http://www.theremotedoctor.co.uk/test-form.html

See attached image

[coothead]

you would have been done with this last week if you followed my directions with the Bootstrap contact form

Luckily for "theremotedr", he has probably read and inwardly digested this article...


HTML, CSS and JavaScript Frameworks - Incompetent Nonsense (http://www.cutcodedown.com/article/HTML_CSS_and_JS_frameworks)



coothead

[coothead]

Please can you advise why do i see the page like this then ?



Probably because your page does not validate.


https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.theremotedoctor.co.uk%2Ftest-form.html

Have you tested the form on my site and did you receive an email on submission?


coothead

[theremotedr]

Getting there but not quite.
I have copied you code from you example http://www.coothead.co.uk/theremotedr-form-files/test-form.html
Pasted it into my page and i now see the same as your page,good.

When i validate the page i also see the code you mention.

From line 207, column 1; to line 207, column 22
a --> ↩<section id="content">↩<form

If i then delete the line 207 being,

<section id="content">

My page is then seen like this http://www.theremotedoctor.co.uk/test-form.html

I will not touch it again until you reply back.

[coothead]

coothead please send zip with files here please.

To be sure, I can. :D



coothead

[theremotedr]

Am i correct that all these files in the zip go in the main folder where all my i have the html files ?
I ask as even though the page looks nearly done there are differences with text etc when looking at my other web pages ?

[theremotedr]

Probably because your page does not validate.


https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.theremotedoctor.co.uk%2Ftest-form.html

Have you tested the form on my site and did you receive an email on submission?


coothead

I can confirm that on your page i am able to complete the form & receive the email.

[coothead]

Am i correct that all these files in the zip go in the main folder where all my i have the html files ?

Yes, you are correct, they go in the root.

As for the validation....


Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

From line 207, column 1; to line 207, column 22

a --> ↩<section id="content">↩<form


....it is a warning rather than an error.

You certainly don't need to remove any code

If you felt, for some reason beyond my comprehension, that your code required the "section element"
then you really should have studied the implications of using the stupid thing.

Your use of it serves no real purpose whatsoever because its first child is not an "h element".

Hence the warning.



coothead

[theremotedr]

Thanks,
It was something that was advised when i started and went with it,obviously nothing i could put my hand up to.
I am now starting to style the form so it looks & blends in with the page.

Questions / advice please.
Can you go here http://www.theremotedoctor.co.uk/connectvan.html?scrollto=content
Look at the text style for HOME, SITE HELP, CONTACT etc etc then compare it to here http://www.theremotedoctor.co.uk/test-form.html

Also using the same 2 pages look at the text style for CONTACT DETAILS, MONDAY-FRIDAY etc etc,i need to get that also looking the same on my form page.

Please could you advise.

I could of done with you much earlier.

Thanks

[coothead]

Hi there theremotedr,


start by removing this...



body {
min-width:48em; /* for legacy desktops */
padding:0 1em 1em;
font:normal 85%/150% arial,helvetica,sans-serif;
}

...from the "screen.css" file.



coothead

[theremotedr]

I have now done that,thanks.

I think it would be best as opposed to this,
First Name "input field here"

Have it like this,

First Name
"input field here"

If so please advise the edit.

Also submit button,im trying this but has no affect,

submit {
color: #66C2F1;

Can you advise correct code please.

[coothead]

Hi there theremotedr,


the attachment has three amended files, replace yours with these
and your will then, on submission be redirected to your thank you
page and also get an email notification.

Using these files 'as is' should address the problems raised in your
recent emails


coothead

[theremotedr]

I'm thinking of adding a drop down list to the form.
This would be called Select Vehicle Make.
In this list would be a variety of car vehicle makes.
If HONDA is selected then the form would show an additional field named CHASSIS NUMBER.
CHASSIS NUMBER will also be a required field where it will be requirement to have exactly 17 characters entered, numbers & letters.
Anything less than 17 pop up a message & same for more than than 17 pop up a message.
"I am aware we currently have a field called this"
Any other vehicle Make selected then user just completes the form like normal.

Is this something possible or a big ask ?

Many Thanks.
I will also check out the last post above tomorrow.

[theremotedr]

Morning,
Thanks for the files above,looking great know i think.
Some questions & edits if i may ask.

I have now added the 3 files supplied above,i see i have contact.php & also send_form_email.php, is contact.php now redundant & should i delete it ?

Can we please add a gap/space between the bottom of the submit button & top of the "CONTACT DETAILS" text as when looking on the phone they are very close together.

When i receive the completed form in my email currently its just a text layout etc, can it be styled slightly so there are borders if you know what i mean.

A few received emails go straight into the spam/junk folder, can you advise how this is stopped ?

I have added some placeholder text, i had an issue with it to start so can you advise if i need to add extra code for other browsers etc, screen.css line 15

The @media code in screen.css line 138 i have changed text-align-left to center, please can you add code so placeholder text is also centered for phone etc.

Thanks very much for continued the help.
I am pleased with the way this is currently looking.

[styxlawyer]

.
A few received emails go straight into the spam/junk folder, can you advise how this is stopped ?
.
.

You need to whitelist the messages in your gmail account. As you don't know who is going to send one you can't do it on the sender's address so you'll probably have to whitelist the subject line. In Yahoo mail it's Settings->Filters->Add New Filter, but I don't use gmail so don't have any direct experience of how this is achieved. However there will be something similar to the Yahoo settings menu.

[theremotedr]

Subject line being DR CONTACT FORM i suppose.

[coothead]

Hi there theremotedr,


1. yes, you can delete the "contact.php" file.


I presume that it is related to your original form.

2. To increase the space amend the CSS here...

screen.css



/* submit button */
#contact button {
padding: 0.25em 0.4em;
margin-bottom: 1em;
border: 2px solid #000;
border-radius: 10px;
box-shadow: 4px 4px 8px #000;
background-color: #66c2f1;
color: #009;
cursor: pointer;
}


3. Personally, I would not even attempt to style the email.


It is the content that is important.

4. You are right, "DR CONTACT FORM" is the subject.


As "styxlawyer" pointed out in his post white list "DR CONTACT FORM"
with Gmail here Settings->Filters->Add New Filter.


coothead

[theremotedr]

I have done the above,thanks

Did you see the post before regarding a hidden field which only becomes shown when HONDA is selected from a drop down option ?
Also the placeholder question.

I will wait for your reply before i touch anything.

Thanks very much.

[coothead]

Hi there theremotedr,


I missed your "placeholder" problem, which I now
see is only coded for Chrome type browsers.

Use this CSS to include Firefox and IE...



::-webkit-input-placeholder { /* Chrome */
color: #808080 ;
text-align: center;
}
::-moz-placeholder{ /* Firefox */
color: #808080;
text-align: center;
}
:-ms-input-placeholder { /* IE */
color: #808080;
text-align: center;
}


Did you see the post before regarding a hidden
field which only becomes shown when HONDA
is selected from a drop down option ?

Yes I did, but have waited for you to show me
the contents of both. :D


coothead

[styxlawyer]

Subject line being DR CONTACT FORM i suppose.

Yes indeed.

[theremotedr]

Ok
We need to have a label called Vehicle Make.
This will be a drop down option.
Is the list will be the following makes.
BMW
FIAT
FORD
HONDA
JAGUAR
I can add to the list from here as maybe about 10.

If HONDA is selected the show CHASSIS number field.
Any other selection made then just carry on as normal.

Once CHASSIS number field is shown the input MUST be 17 characters, letters & number will be included here.
Characters less than 17 or more than 17 needs a message to be shown advising customer if the incorrect character count etc.

I'm out at present in my phone so will check when back in 1 hour.

[theremotedr]

OK
I am now home

I will await your reply on the next step thanks.

[coothead]

Hi there theremotedr,


I am now working on it. :D


coothead

[theremotedr]

Ok

I am here if you need any help ;)

[theremotedr]

Hi,
This is the vehicle make list.
AUDI
BMW
FIAT
FORD
GOLD WING
HONDA
JAGUAR
LAND ROVER
LEXUS
MAZDA
MERCEDES
MITSUBISHI
NISSAN
PORSCHE
RANGE ROVER
SMART CAR
SPARKRITE
SUZUKI
TOYOTA
VOLKSWAGEN
VOLVO

But i might need to add to this list in the future.

[coothead]

Hi there theremotedr,


you see and test your draft form here...


http://www.coothead.co.uk/coothead-form-test/test-form.htmll


coothead

[theremotedr]

Hi,
That link does nothing for me ?

[coothead]

Ooooooops, sorry about that, I must have had an old
man's brain fart and C&P'd my p.c. link by mistake. :eek:

Go back and try it again. :D



coothead

[theremotedr]

Ok
Working now,
Will reply back in 10 minutes

[theremotedr]

Ok
Looking good.
Can we edit as follows please.

Please swap these 2 fields around, Vehicle Make & Uk / Overseas
Please centralise the text "PLEASE SELECT" in the Vehicle Make input field.
6116

When the error box pops up can we make it center to the form.
Also please delete the word "only" in the error message as it reads the same if you type say 20 characters.
6117

I first completed the form & selected BMW & received it no problem but i noticed BMW not on the received form "not important anyway"

I then completed the form & selected HONDA, i then added 17 characters & sent the form.
I received the form BUT i do not see HONDA on the received form.
When HONDA is selected & CHASSIS NUMBER is entered "both this data i need on the form"

Thanks very much.

[coothead]

Hi there theremotedr,


try the link in post #43 again to check your amendments,
the F5 function key may be needed to clear cache. :D


coothead

[theremotedr]

OK
Doing it as we speak

[theremotedr]

Hi,
You can select HONDA but the Chassis Number field must have a * required action on it.
Currently i can leave it blank and send the form

[theremotedr]

Also the word ONLY needs removing from the error box.
It reads "You have ONLY entered 19" just have it read "You have entered 19"

Also i see a problem.

I entered 19 characters.
Typed a message then sent the form

No form should be sent unless the character count is 17

[theremotedr]

I need to get some sleep now as up early in the morning.

Currently here is a list of items.

Chassis Number field MUST be a required field.
You are able to enter say 20 characters into the chassis number field,you then see the error message,BUT you can still continue to send the form,form only to be sent when character count is only 17.
PHP output text,the form that i receive needs its text a little larger so i can see it a bit better.
On a mobile the submit form button is off center & to the left.

I did take a look with the F12 key but only managed a screen shot as opposed to fixing it,sorry.
6118


Thanks very much for the help today.
I will be back again in the morning.


Cheers.

[coothead]

Hi there theremotedr,


try the link again.


PHP output text, the form that I receive needs its
text a little larger so I can see it a bit better.

I am not sure what you mean?

If you are referring to your received emails, then
you can increase font size by just using Ctrl and +.



coothead

[theremotedr]

Morning,
Thats looking 99% done now.
The little bits advised above have been taken care of and spot on.

Pc looking great so now Looking at the mobile side of things
Vehicle make text "PLEASE SELECT" can we make it center to its input field.

I have noticed that i can type any amount of characters less than 17 into the chassis number field.
I start to type my message BUT unknown to a new mobile user the error message is off the top of the screen & out of sight.

Because i am a new mobile user and i dont know that the message is actually being shown to alert me i continue to press the submit button.
Now at this point i should see the same message as on the pc when i press the submit button "PLEASE MATCH THE REQUESTED FORMAT" and also bearing in mind that the error message is still displayed out of site at this point.
I do not see this message and as a result you can still send the form even though only say 10 characters was typed into the chassis number input field.

Can the error message pop up within the screens view.

[coothead]

try it now. :D


coothead

[theremotedr]

Great,

Please center the "PLEASE SELECT" within its input field and i think this is then complete.

If you send me the file please.

I have another request.
Using say 90% etc of the same form can we add an edit so it poulates a part number ?
If possible let me know and i will advise in a new post.

Thanks very much.

[coothead]

Hi there theremotedr,


the CSS centers the text on a p.c.

What type of mobile are you using that does not center it?

Form elements are notoriously difficult to style anyway, but
I do some googling for mobiles.



coothead

[theremotedr]

It must be my phone having a lay in.
On the phone iphone6 plus its to the left BUT when i use f12 and select iphone6 plus it shows correct

Lets leave it at present.

Please send over the file so i can sort it.

I am also working on another request & will post it once sorted.

Thanks for your time.

[coothead]

Hi there theremote,


the attachment contains all the files for this page of yours...


http://www.theremotedoctor.co.uk/form-web.html

This is how it now looks on my site..


http://www.coothead.co.uk/coothead-form-test/test-form.html



coothead

[theremotedr]

Thanks now installed.

I will close this post and pop over to the other 2 posts.

Thanks once again