{"id":21,"date":"2026-09-10T01:57:29","date_gmt":"2026-09-10T01:57:29","guid":{"rendered":"https:\/\/peter898.soisweb.uwm.edu\/?page_id=21"},"modified":"2026-10-17T02:19:27","modified_gmt":"2026-10-17T02:19:27","slug":"css-form","status":"publish","type":"page","link":"https:\/\/peter898.soisweb.uwm.edu\/?page_id=21","title":{"rendered":"CSS form"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\nbody {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100vh;\n    background-color: #f4f4f9;\n    margin: 0;\n    font-family: Arial, sans-serif;\n}\n\n.form-container {\n    border: 2px solid #ccc;\n    padding: 30px;\n    border-radius: 8px;\n    background-color: #ffffff;\n    width: 350px;\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n}\n\nh2 {\n    margin-top: 0;\n    margin-bottom: 20px;\n    text-align: center;\n    color: #333;\n}\n\n.form-group {\n    margin-bottom: 20px;\n}\n\nlabel {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: bold;\n    color: #444;\n}\n\ninput[type=\"text\"], select, textarea {\n    width: 100%;\n    padding: 10px;\n    border: 1px solid #aaa;\n    border-radius: 4px;\n    box-sizing: border-box;\n    font-size: 14px;\n}\n\ninput[type=\"text\"]:focus, select:focus, textarea:focus {\n    border-color: #0066cc;\n    outline: none;\n    background-color: #f0f8ff;\n    box-shadow: 0 0 5px rgba(0, 102, 204, 0.3);\n}\n\n.no-left-border {\n    border-left: none;\n}\n\n.radio-group {\n    display: flex;\n    gap: 20px;\n}\n\n.radio-group label {\n    font-weight: normal;\n    display: flex;\n    align-items: center;\n    gap: 5px;\n}\n\nselect {\n    color: #ffffff;\n    background-color: #2c3e50;\n}\n\nselect option {\n    color: #000000;\n    background-color: #ffffff;\n}\n\nbutton[type=\"submit\"] {\n    width: 100%;\n    background-color: #0066cc;\n    color: white;\n    padding: 12px;\n    font-size: 18px;\n    font-weight: bold;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n    margin-top: 10px;\n}\n\nbutton[type=\"submit\"]:hover {\n    background-color: #004d99;\n}\n\n<\/style>\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Centered CSS Form<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n    <div class=\"form-container\">\n        <form>\n            <h2>Contact Us<\/h2>\n            \n            <div class=\"form-group\">\n                <label for=\"name\">Full Name:<\/label>\n                <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Enter your name\">\n            <\/div>\n\n            <div class=\"form-group\">\n                <label for=\"email\">Email Address:<\/label>\n                <input type=\"text\" id=\"email\" name=\"email\" class=\"no-left-border\" placeholder=\"Enter your email\">\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Preferred Contact Method:<\/label>\n                <div class=\"radio-group\">\n                    <label><input type=\"radio\" name=\"contact\" value=\"email\"> Email<\/label>\n                    <label><input type=\"radio\" name=\"contact\" value=\"phone\"> Phone<\/label>\n                <\/div>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label for=\"country\">Country:<\/label>\n                <select id=\"country\" name=\"country\">\n                    <option value=\"usa\">United States<\/option>\n                    <option value=\"can\">Canada<\/option>\n                    <option value=\"uk\">United Kingdom<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label for=\"message\">Your Message:<\/label>\n                <textarea id=\"message\" name=\"message\" rows=\"4\" placeholder=\"Type your message here...\"><\/textarea>\n            <\/div>\n\n            <button type=\"submit\">Enter<\/button>\n        <\/form>\n    <\/div>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Centered CSS Form Contact Us Full Name: Email Address: Preferred Contact Method: Email Phone Country: United StatesCanadaUnited Kingdom Your Message: Enter<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21"}],"version-history":[{"count":2,"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/peter898.soisweb.uwm.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}