Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Contact Form HTML Issue, any web coders seen this before?
New Posts  All Forums:Forum Nav:

Contact Form HTML Issue, any web coders seen this before?

post #1 of 9
Thread Starter 
I have an HTML page with a contact form. It works great on desktop (both in full and mobile sizes) but on mobile it has a weird issue. There are four fields, Name, Email, Subject, and Message

When you click in the email field, it automatically bumps you back up to name. All the rest of the fields work just fine. But if you touch in the Email field, the form just pushes you back Name as the active field. If you've already typed your name, the cursor goes to the end of what you have already typed.

Has anyone seen an issue like this before? Even the live demo of the template has the same issue: http://www.zerotheme.com/demo/r531/zGrayPhoto/contact.html

Thanks!
Gunmetal Tower
(23 items)
 
  
CPUMotherboardGraphicsRAM
Intel 2600K ASUS P8Z68-V GEN3 Asus GTX 580 CORSAIR Vengeance 16GB 1600 
Hard DriveHard DriveOptical DriveCooling
Samsung 830 256GB Western Digital Caviar Black 640GB LG DVD Corsair H80 
OSMonitorMonitorKeyboard
Microsoft Windows 8.1 Professional 64 Bit Asus PB278Q Dell 1907FPc  Ducky 9008-G2 Browns and Reds 
PowerCaseMouseMouse Pad
ABS SL1050 1050W Antec P280 Logitech G700 Mionix Propus 380 
AudioAudioAudioAudio
HT | OMEGA Claro Halo Audio Technica ATH-A900X Audio Technica ATH-AD900 M-Audio AV 40 
OtherOtherOther
Logitech USB Desktop Microphone APC Back-UPS XS 1500 Wacom Intuos4 
  hide details  
Reply
Gunmetal Tower
(23 items)
 
  
CPUMotherboardGraphicsRAM
Intel 2600K ASUS P8Z68-V GEN3 Asus GTX 580 CORSAIR Vengeance 16GB 1600 
Hard DriveHard DriveOptical DriveCooling
Samsung 830 256GB Western Digital Caviar Black 640GB LG DVD Corsair H80 
OSMonitorMonitorKeyboard
Microsoft Windows 8.1 Professional 64 Bit Asus PB278Q Dell 1907FPc  Ducky 9008-G2 Browns and Reds 
PowerCaseMouseMouse Pad
ABS SL1050 1050W Antec P280 Logitech G700 Mionix Propus 380 
AudioAudioAudioAudio
HT | OMEGA Claro Halo Audio Technica ATH-A900X Audio Technica ATH-AD900 M-Audio AV 40 
OtherOtherOther
Logitech USB Desktop Microphone APC Back-UPS XS 1500 Wacom Intuos4 
  hide details  
Reply
post #2 of 9
In the live demo, if you use your browser's inspection tool to create a new row for the email field, and remove the email from the previous one, then it's fixed. However, I can't see the code in charge of that, but it certainly looks like it's assuming there's only one element per row.
Old rig
(17 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5 3570K Asus Maximus V Gene MSI Radeon R9 280X Gaming G.Skill Trident 2400 C10 
Hard DriveHard DriveCoolingCooling
Crucial M500 240 Hitach HDT721010 EK Supremacy Clear CSQ Alphacool XT45 360+240 
CoolingCoolingMonitorPower
EK-VGA Supreme HF Swiftech MCP655 Asus MX239H Antec TP 550 New 
CaseAudio
NZXT Switch 810 Black M Creative X-Fi Extreme 
  hide details  
Reply
Old rig
(17 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5 3570K Asus Maximus V Gene MSI Radeon R9 280X Gaming G.Skill Trident 2400 C10 
Hard DriveHard DriveCoolingCooling
Crucial M500 240 Hitach HDT721010 EK Supremacy Clear CSQ Alphacool XT45 360+240 
CoolingCoolingMonitorPower
EK-VGA Supreme HF Swiftech MCP655 Asus MX239H Antec TP 550 New 
CaseAudio
NZXT Switch 810 Black M Creative X-Fi Extreme 
  hide details  
Reply
post #3 of 9
OK - I'm no coder, I dabble in the fringes. I had a look at the page source, and just to put the idea out there, could it be to do with the fact its set up like a "nested" table? You have 3 rows, but then the first row is split into two columns. Have you tried it with the email entry field on it's own row? I'm thinking that mobile devices might not handle the split row too well.

I may be way off, but just wanted to throw the idea into the ring. smile.gif

EDIT : ninja'd by cloppy007 smile.gif
post #4 of 9
Mmm not seeing the behavior you're describing, I'm on Android Nougat (Chrome) on a Nexus 6P.
Gaming Rig
(20 items)
 
  
CPUMotherboardGraphicsRAM
Intel 2500k, 4.6GHz, 1.304v ASRock P67 Extreme4 Gen3 2x Sapphire HD7970 OC with Boost, 1150 MHz/1550... 2x4GB DDR3 1600 Corsair Vengeance 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro Samsung 750GB HD753LJ Samsung F3 ASUS 24X DVD Combo Drive 
CoolingOSMonitorKeyboard
Noctua DH14 Windows 8 Professional x64 Crossover 27Q 27" IPS LED, 2560x1440 Logitech G11 
PowerCaseMouseMouse Pad
Corsair TX750 Cooler Master HAF932 Logitech G500 Custom 
AudioAudioAudioAudio
Creative X-Fi Titanium Fatal1ty 2x Dayton B652 Bookshelf Dayton DTA-100A Amplifier Dayton 12" SUB-1200 Subwoofer 
  hide details  
Reply
Gaming Rig
(20 items)
 
  
CPUMotherboardGraphicsRAM
Intel 2500k, 4.6GHz, 1.304v ASRock P67 Extreme4 Gen3 2x Sapphire HD7970 OC with Boost, 1150 MHz/1550... 2x4GB DDR3 1600 Corsair Vengeance 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro Samsung 750GB HD753LJ Samsung F3 ASUS 24X DVD Combo Drive 
CoolingOSMonitorKeyboard
Noctua DH14 Windows 8 Professional x64 Crossover 27Q 27" IPS LED, 2560x1440 Logitech G11 
PowerCaseMouseMouse Pad
Corsair TX750 Cooler Master HAF932 Logitech G500 Custom 
AudioAudioAudioAudio
Creative X-Fi Titanium Fatal1ty 2x Dayton B652 Bookshelf Dayton DTA-100A Amplifier Dayton 12" SUB-1200 Subwoofer 
  hide details  
Reply
post #5 of 9
Quote:
Originally Posted by Stealth Pyros View Post

Mmm not seeing the behavior you're describing, I'm on Android Nougat (Chrome) on a Nexus 6P.

It does it on my Android (4.0.4) with the system browser, but not with adblock browser which is my daily browsing app. Looks like its a browser issue, and nowt to do with the form. The Android bundled browser isn't great.
post #6 of 9
Thread Starter 
Thanks guys. Looks like it's easiest to just change the layout and be done with it.
Gunmetal Tower
(23 items)
 
  
CPUMotherboardGraphicsRAM
Intel 2600K ASUS P8Z68-V GEN3 Asus GTX 580 CORSAIR Vengeance 16GB 1600 
Hard DriveHard DriveOptical DriveCooling
Samsung 830 256GB Western Digital Caviar Black 640GB LG DVD Corsair H80 
OSMonitorMonitorKeyboard
Microsoft Windows 8.1 Professional 64 Bit Asus PB278Q Dell 1907FPc  Ducky 9008-G2 Browns and Reds 
PowerCaseMouseMouse Pad
ABS SL1050 1050W Antec P280 Logitech G700 Mionix Propus 380 
AudioAudioAudioAudio
HT | OMEGA Claro Halo Audio Technica ATH-A900X Audio Technica ATH-AD900 M-Audio AV 40 
OtherOtherOther
Logitech USB Desktop Microphone APC Back-UPS XS 1500 Wacom Intuos4 
  hide details  
Reply
Gunmetal Tower
(23 items)
 
  
CPUMotherboardGraphicsRAM
Intel 2600K ASUS P8Z68-V GEN3 Asus GTX 580 CORSAIR Vengeance 16GB 1600 
Hard DriveHard DriveOptical DriveCooling
Samsung 830 256GB Western Digital Caviar Black 640GB LG DVD Corsair H80 
OSMonitorMonitorKeyboard
Microsoft Windows 8.1 Professional 64 Bit Asus PB278Q Dell 1907FPc  Ducky 9008-G2 Browns and Reds 
PowerCaseMouseMouse Pad
ABS SL1050 1050W Antec P280 Logitech G700 Mionix Propus 380 
AudioAudioAudioAudio
HT | OMEGA Claro Halo Audio Technica ATH-A900X Audio Technica ATH-AD900 M-Audio AV 40 
OtherOtherOther
Logitech USB Desktop Microphone APC Back-UPS XS 1500 Wacom Intuos4 
  hide details  
Reply
post #7 of 9
By the way, the issue can be reproduced in desktop browsers, just click slightly below the input fields and the cursor will change to the finger icon. So it's not mobile-specific.
Old rig
(17 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5 3570K Asus Maximus V Gene MSI Radeon R9 280X Gaming G.Skill Trident 2400 C10 
Hard DriveHard DriveCoolingCooling
Crucial M500 240 Hitach HDT721010 EK Supremacy Clear CSQ Alphacool XT45 360+240 
CoolingCoolingMonitorPower
EK-VGA Supreme HF Swiftech MCP655 Asus MX239H Antec TP 550 New 
CaseAudio
NZXT Switch 810 Black M Creative X-Fi Extreme 
  hide details  
Reply
Old rig
(17 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5 3570K Asus Maximus V Gene MSI Radeon R9 280X Gaming G.Skill Trident 2400 C10 
Hard DriveHard DriveCoolingCooling
Crucial M500 240 Hitach HDT721010 EK Supremacy Clear CSQ Alphacool XT45 360+240 
CoolingCoolingMonitorPower
EK-VGA Supreme HF Swiftech MCP655 Asus MX239H Antec TP 550 New 
CaseAudio
NZXT Switch 810 Black M Creative X-Fi Extreme 
  hide details  
Reply
post #8 of 9
Quote:
Originally Posted by cloppy007 View Post

By the way, the issue can be reproduced in desktop browsers, just click slightly below the input fields and the cursor will change to the finger icon. So it's not mobile-specific.

Good you mentioned that, because I think I see what is happening now. It's because you have a label element with class row... it is holding two child inputs.

What label elements do (in modern browsers anyways), is that when you click on it, it will focus on the input element inside of it. In your case you have two of them inside, so I think it keeps focusing on the first one, the name field.

Solution
Remove that parent label element, and just make it a div instead. Then put the label elements inside of the "col-1-2" divs.

Give that a shot and see if it fixes the behavior.

I would make a jsfiddle example for you right now, but I'm at work smile.gif
FX8320
(15 items)
 
   
CPUMotherboardGraphicsRAM
FX-8320 ASUS M5A97 LE R2.0 HD7790 2x4GB HyperX Beast 
Hard DriveHard DriveHard DriveCooling
SSD Kingston V300 HDD WD Blue HDD WD Black CM 212 EVO 
OSMonitorKeyboardPower
Win10 1200p HP + 1080P Gateway AUKEY KM-G5 CX430 v2.3 
CaseMouseAudio
Antec One Logitech G203 Onboard 
CPUMotherboardGraphicsRAM
Intel Core i7 6700HQ @ 2.6 N501VW Nvidia GTX 960M 16GB DDR4 
Hard DriveOSMonitorMonitor
Samsung NVMe 512GB Windows 10 Laptop 4K Dual HP 24" 1200P 
CPUMotherboardGraphicsRAM
X2 4200+ @ 2.5 FIC Sapphire HD5670 512 gddr5 Corsair XMS2 4GB 6400 
Hard DriveOptical DriveOSMonitor
250GB + 500GB 16X DVDRW Win7 64 Ultimate 47" LG 1080p 
PowerCase
300W Mid 
  hide details  
Reply
FX8320
(15 items)
 
   
CPUMotherboardGraphicsRAM
FX-8320 ASUS M5A97 LE R2.0 HD7790 2x4GB HyperX Beast 
Hard DriveHard DriveHard DriveCooling
SSD Kingston V300 HDD WD Blue HDD WD Black CM 212 EVO 
OSMonitorKeyboardPower
Win10 1200p HP + 1080P Gateway AUKEY KM-G5 CX430 v2.3 
CaseMouseAudio
Antec One Logitech G203 Onboard 
CPUMotherboardGraphicsRAM
Intel Core i7 6700HQ @ 2.6 N501VW Nvidia GTX 960M 16GB DDR4 
Hard DriveOSMonitorMonitor
Samsung NVMe 512GB Windows 10 Laptop 4K Dual HP 24" 1200P 
CPUMotherboardGraphicsRAM
X2 4200+ @ 2.5 FIC Sapphire HD5670 512 gddr5 Corsair XMS2 4GB 6400 
Hard DriveOptical DriveOSMonitor
250GB + 500GB 16X DVDRW Win7 64 Ultimate 47" LG 1080p 
PowerCase
300W Mid 
  hide details  
Reply
post #9 of 9
Thread Starter 
Quote:
Originally Posted by edwardm View Post

Good you mentioned that, because I think I see what is happening now. It's because you have a label element with class row... it is holding two child inputs.

What label elements do (in modern browsers anyways), is that when you click on it, it will focus on the input element inside of it. In your case you have two of them inside, so I think it keeps focusing on the first one, the name field.

Solution
Remove that parent label element, and just make it a div instead. Then put the label elements inside of the "col-1-2" divs.

Give that a shot and see if it fixes the behavior.

I would make a jsfiddle example for you right now, but I'm at work smile.gif

That looks to have done the trick. Thanks! Do you have any idea why they would have made that a label instead of div in the first place?
Gunmetal Tower
(23 items)
 
  
CPUMotherboardGraphicsRAM
Intel 2600K ASUS P8Z68-V GEN3 Asus GTX 580 CORSAIR Vengeance 16GB 1600 
Hard DriveHard DriveOptical DriveCooling
Samsung 830 256GB Western Digital Caviar Black 640GB LG DVD Corsair H80 
OSMonitorMonitorKeyboard
Microsoft Windows 8.1 Professional 64 Bit Asus PB278Q Dell 1907FPc  Ducky 9008-G2 Browns and Reds 
PowerCaseMouseMouse Pad
ABS SL1050 1050W Antec P280 Logitech G700 Mionix Propus 380 
AudioAudioAudioAudio
HT | OMEGA Claro Halo Audio Technica ATH-A900X Audio Technica ATH-AD900 M-Audio AV 40 
OtherOtherOther
Logitech USB Desktop Microphone APC Back-UPS XS 1500 Wacom Intuos4 
  hide details  
Reply
Gunmetal Tower
(23 items)
 
  
CPUMotherboardGraphicsRAM
Intel 2600K ASUS P8Z68-V GEN3 Asus GTX 580 CORSAIR Vengeance 16GB 1600 
Hard DriveHard DriveOptical DriveCooling
Samsung 830 256GB Western Digital Caviar Black 640GB LG DVD Corsair H80 
OSMonitorMonitorKeyboard
Microsoft Windows 8.1 Professional 64 Bit Asus PB278Q Dell 1907FPc  Ducky 9008-G2 Browns and Reds 
PowerCaseMouseMouse Pad
ABS SL1050 1050W Antec P280 Logitech G700 Mionix Propus 380 
AudioAudioAudioAudio
HT | OMEGA Claro Halo Audio Technica ATH-A900X Audio Technica ATH-AD900 M-Audio AV 40 
OtherOtherOther
Logitech USB Desktop Microphone APC Back-UPS XS 1500 Wacom Intuos4 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Contact Form HTML Issue, any web coders seen this before?