Wed, 2018-05-09 15:31
Does anyone have any ideas about how to centre a form in CSS wordpress. I've tried every code on the planet and nothing works. This form at http://nicoscleaningservice.co.uk/work-with-us/ is so far to the right, it's falling off the page. Most CSS code online doesn't seem to do anything. Does anyone have a real, working CSS code to centre and to change height and size, not only of forms, but individuals items and boxes? Google captcha now also falling off the page too. I recon I've got the only drunk forms on the net.
Fri, 2018-05-11 20:36
#1
Seriously??
Five megabytes to deliver a simple form?
Size Uncompressed Size 4 Documents 276 KB 318 KB http://nicoscleaningservice.co.uk/work-with-us/# 110 KB 127 KB http://nicoscleaningservice.co.uk/work-with-us/ 110 KB 127 KB http://files.fm/upload_iframe.php?\ uid=15936292&uid_hash=e0048bdd78ade24b189b01912404aebe 57 KB 64 KB about:blank 10 Images 40 KB 40 KB 0 Objects 91 Scripts 2401 KB 2401 KB 97 Style Sheets 2444 KB 2444 KB 202 Files 5161 KB 5203 KB
It appears as if you've looked at every offering in the way of themes and plugins, and said, "Ooh, shiny." Then threw them at the wall. Any given page should call only those files it actually needs. You are using Bootstrap, one of the silliest ideas to come along. It adds a layer of abstraction on top of simple declarative languages. I could live with that, except that it depends on multiple classes on damned near everything and those elements have no relation to semantic markup. Both issues the height of stupid. Don't drink the Kool-Ade
Having your form buried in an iframe means the form itself is not yours to jack with. You need to modify its css on its (the form's) server. I had no desire to dig into that mess.
My default browser width is 1080px, which Bootstrap sets as an unnecessary default breakpoint for responsive rendering.
If your visitor has javascript disabled (it's a battery killer), or is using most non-graphical browsers, e.g. screen readers, Braille pads, or plain text browsers, like would be used by sys-admins on non-graphic OSes, they won't even see the form. It is stupidly written by the javascript. your hamburger menu avatar is also js powered, so no menu on phones etc..
I've written a version of your form that is fully functional and totally semantic for anyone using assistive technology. All you need to do is have the javascript set a hook or two to add bells and whistles.
Remember, the page should be fully functional before you add css or js.
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style media="screen"> /*<![CDATA[*/ body, html { font: 100%/1.5 sans-serif; margin:0; padding: 0; } p { font-size: 1em; } h1, h2, h3 { font-family: serif; } h1 { text-align: center; } form { display: table; margin: auto; } label, fieldset { display: block; margin-bottom: 1em; } /*]]>*/ </style> </head> <body> <h1>Form centering demo</h1> <form action="*" method="post" enctype="multipart/form-data"> <fieldset> <legend> Contact info </legend> <label for="name">Name <input type="text" id="name" name="name"> </label> <label for="email">Email <input type="text" id="email" name="email"> <!--text covers older browsers, but w/o the verification --> </label> </fieldset> <fieldset> <legend> File info </legend> <label for="subject">Subject <input type="text" id="subject" name="subject"> </label> <label for="description"> File description <textarea id="description" name="description"> </textarea> </label> <label for="files">Upload file(s) <input type="file" id="files" name="files"> </label> </fieldset> <label for="submit"> <input type="submit" id="submit" name="submit"> </label> </form> </body> </html>
gary