{"id":111,"date":"2017-01-31T16:28:21","date_gmt":"2017-01-31T16:28:21","guid":{"rendered":"http:\/\/tommustester.wpengine.com\/?page_id=111"},"modified":"2017-01-31T16:28:21","modified_gmt":"2017-01-31T16:28:21","slug":"form-elements","status":"publish","type":"page","link":"https:\/\/rossk.uk\/?page_id=111","title":{"rendered":"Elements &#8211; Form Elements"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221;][vc_column]\n\t\t\t<section class=\"imagebg image--light cover cover-blocks bg--secondary \" >\n\t\t\t\t<div class=\"background-image-holder\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1253\" src=\"https:\/\/rossk.uk\/wp-content\/uploads\/2017\/01\/promo-1-scaled.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/rossk.uk\/wp-content\/uploads\/2017\/01\/promo-1-scaled.jpg 2560w, https:\/\/rossk.uk\/wp-content\/uploads\/2017\/01\/promo-1-300x147.jpg 300w, https:\/\/rossk.uk\/wp-content\/uploads\/2017\/01\/promo-1-1024x501.jpg 1024w, https:\/\/rossk.uk\/wp-content\/uploads\/2017\/01\/promo-1-768x376.jpg 768w, https:\/\/rossk.uk\/wp-content\/uploads\/2017\/01\/promo-1-1536x752.jpg 1536w, https:\/\/rossk.uk\/wp-content\/uploads\/2017\/01\/promo-1-2048x1002.jpg 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/div>\n\t\t\t\t<div class=\"container\">\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<div class=\"col-sm-6 col-md-5\">\n\t\t\t\t\t\t\t<div>[vc_column_text]<\/p>\n<h1>Form Elements<\/h1>\n<p class=\"lead\">These modular elements can be readily used and customized across pages and in different blocks.<\/p>\n<hr class=\"short\" \/>\n<p>Explore all of Stack&#8217;s modular elements<br \/>\nat the\u00a0<a href=\"\/elements\/\">Element Index Page \u2192<\/a>[\/vc_column_text]<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div><!--end of row-->\n\t\t\t\t<\/div><!--end of container-->\n\t\t\t\t\n\t\t\t<\/section>\n\t\t[\/vc_column][\/vc_row][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\" boxed--lg bg--secondary  boxed boxed--border\" ><div class=\"container\">[vc_column_text]<\/p>\n<h4>Standard Inputs<\/h4>\n<p>Common inputs such as text, email, telephone, password, address etc. Add the class <strong>.validate-required<\/strong> if the input is required in the form.<\/p>\n<p>Alternatively use the <strong><label><\/strong> tag before an input for greater user assistance.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;]<div role=\"form\" class=\"wpcf7\" id=\"wpcf7-f20-o1\" lang=\"en-US\" dir=\"ltr\">\n<div class=\"screen-reader-response\" aria-live=\"polite\"><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F111#wpcf7-f20-o1\" method=\"post\" class=\"wpcf7-form\" novalidate=\"novalidate\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"20\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.1.9\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f20-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<\/div>\n<div class=\"col-sm-12\">\n\t<label>Your Name:<\/label><br \/>\n\t<span class=\"wpcf7-form-control-wrap your-name\"><input type=\"text\" name=\"your-name\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"First \/ Last Name\" \/><\/span>\n<\/div>\n<div class=\"col-sm-12\">\n\t<label>Email Address:<\/label><br \/>\n\t<span class=\"wpcf7-form-control-wrap your-email\"><input type=\"email\" name=\"your-email\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"you@example.com\" \/><\/span>\n<\/div>\n<div class=\"col-sm-12\">\n\t<label>Message:<\/label><br \/>\n\t<span class=\"wpcf7-form-control-wrap your-message\"><textarea name=\"your-message\" cols=\"40\" rows=\"6\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Message\"><\/textarea><\/span>\n<\/div>\n<div class=\"col-sm-12\">\n\t<button type=\"submit\" value=\"Send\" class=\"wpcf7-form-control wpcf7-submit btn btn--primary\" \/>\n<\/div>\n<div class=\"wpcf7-response-output wpcf7-display-none\" aria-hidden=\"true\"><\/div><\/form><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\" boxed--lg bg--secondary  boxed boxed--border\" ><div class=\"container\">[vc_column_text]<\/p>\n<h4>Checkbox Inputs<\/h4>\n<p>Wrap checkbox inputs in the input-checkbox element for a more stylish option. Alternatively, place a span directly after to group the two for visual usability[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;]<div role=\"form\" class=\"wpcf7\" id=\"wpcf7-f117-o2\" lang=\"en-US\" dir=\"ltr\">\n<div class=\"screen-reader-response\" aria-live=\"polite\"><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F111#wpcf7-f117-o2\" method=\"post\" class=\"wpcf7-form\" novalidate=\"novalidate\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"117\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.1.9\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f117-o2\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<\/div>\n<p><span class=\"wpcf7-form-control-wrap checkbox-833\"><span class=\"wpcf7-form-control wpcf7-checkbox\"><span class=\"wpcf7-list-item first last input-checkbox\"><label><\/label><input type=\"checkbox\" name=\"checkbox-833[]\" value=\"I have read and agree to the terms and conditions\" \/><span class=\"wpcf7-list-item-label\">I have read and agree to the terms and conditions<\/span><\/span><\/span><\/span><\/p>\n<div class=\"wpcf7-response-output wpcf7-display-none\" aria-hidden=\"true\"><\/div><\/form><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\" boxed--lg bg--secondary  boxed boxed--border\" ><div class=\"container\">[vc_column_text]<\/p>\n<h4>Radio Inputs<\/h4>\n<p>Wrap radio inputs in the input-radio element for a more stylish option. Use in conjunction with the <label> tag.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;]<div role=\"form\" class=\"wpcf7\" id=\"wpcf7-f120-o3\" lang=\"en-US\" dir=\"ltr\">\n<div class=\"screen-reader-response\" aria-live=\"polite\"><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F111#wpcf7-f120-o3\" method=\"post\" class=\"wpcf7-form\" novalidate=\"novalidate\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"120\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.1.9\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f120-o3\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<\/div>\n<p><span class=\"wpcf7-form-control-wrap radio-972\"><span class=\"wpcf7-form-control wpcf7-radio\"><span class=\"wpcf7-list-item first input-radio\"><label><\/label><input type=\"radio\" name=\"radio-972\" value=\"Option 1\" checked=\"checked\" \/><span class=\"wpcf7-list-item-label\">Option 1<\/span><\/span><span class=\"wpcf7-list-item input-radio\"><label><\/label><input type=\"radio\" name=\"radio-972\" value=\"Option 2\" \/><span class=\"wpcf7-list-item-label\">Option 2<\/span><\/span><span class=\"wpcf7-list-item last input-radio\"><label><\/label><input type=\"radio\" name=\"radio-972\" value=\"Option 3\" \/><span class=\"wpcf7-list-item-label\">Option 3<\/span><\/span><\/span><\/span><\/p>\n<div class=\"wpcf7-response-output wpcf7-display-none\" aria-hidden=\"true\"><\/div><\/form><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\" boxed--lg bg--secondary  boxed boxed--border\" ><div class=\"container\">[vc_column_text]<\/p>\n<h4>Select Inputs<\/h4>\n<p>Wrap radio inputs in the input-select element for a more theme-consistent stylish option.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;]<div role=\"form\" class=\"wpcf7\" id=\"wpcf7-f123-o4\" lang=\"en-US\" dir=\"ltr\">\n<div class=\"screen-reader-response\" aria-live=\"polite\"><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F111#wpcf7-f123-o4\" method=\"post\" class=\"wpcf7-form\" novalidate=\"novalidate\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"123\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.1.9\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f123-o4\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<\/div>\n<p><span class=\"wpcf7-form-control-wrap menu-207\"><div class=\"input-select\"><select name=\"menu-207\" class=\"wpcf7-form-control wpcf7-select\" aria-invalid=\"false\"><option value=\"Select An Option\">Select An Option<\/option><option value=\"Small\">Small<\/option><option value=\"Medium\">Medium<\/option><option value=\"Large\">Large<\/option><\/select><\/div><\/span><\/p>\n<div class=\"wpcf7-response-output wpcf7-display-none\" aria-hidden=\"true\"><\/div><\/form><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\" boxed--lg bg--secondary  boxed boxed--border\" ><div class=\"container\">[vc_column_text]<\/p>\n<h4>Formatting Forms<\/h4>\n<p>Using the <a href=\"http:\/\/getbootstrap.com\/css\/#grid\" target=\"_blank\" rel=\"noopener noreferrer\">Bootstrap column classes<\/a>, you can easily control the widths of the inputs in your form.<\/p>\n<p>The below code would render a form with two equally sized (six columns) inputs in two adjacent columns.[\/vc_column_text]<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;]<div role=\"form\" class=\"wpcf7\" id=\"wpcf7-f126-o5\" lang=\"en-US\" dir=\"ltr\">\n<div class=\"screen-reader-response\" aria-live=\"polite\"><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F111#wpcf7-f126-o5\" method=\"post\" class=\"wpcf7-form\" novalidate=\"novalidate\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"126\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.1.9\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f126-o5\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<\/div>\n<div class=\"col-sm-6\">\n\t<label>Your Name:<\/label><br \/>\n\t<span class=\"wpcf7-form-control-wrap your-name\"><input type=\"text\" name=\"your-name\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"First \/ Last Name\" \/><\/span>\n<\/div>\n<div class=\"col-sm-6\">\n\t<label>Email Address:<\/label><br \/>\n\t<span class=\"wpcf7-form-control-wrap your-email\"><input type=\"email\" name=\"your-email\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"you@example.com\" \/><\/span>\n<\/div>\n<div class=\"col-sm-12\">\n\t<label>Street Address:<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap your-address\"><input type=\"text\" name=\"your-address\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Street Address\" \/><\/span><span class=\"wpcf7-form-control-wrap your-suburb\"><input type=\"text\" name=\"your-suburb\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Suburb\" \/><\/span><span class=\"wpcf7-form-control-wrap your-state\"><input type=\"text\" name=\"your-state\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"State\" \/><\/span>\n<\/div>\n<div class=\"col-sm-12\">\n\t<label>Message:<\/label><br \/>\n\t<span class=\"wpcf7-form-control-wrap your-message\"><textarea name=\"your-message\" cols=\"40\" rows=\"10\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Message\"><\/textarea><\/span>\n<\/div>\n<div class=\"col-sm-12\">\n\t<span class=\"wpcf7-form-control-wrap checkbox-477\"><span class=\"wpcf7-form-control wpcf7-checkbox\"><span class=\"wpcf7-list-item first last input-checkbox\"><label><\/label><input type=\"checkbox\" name=\"checkbox-477[]\" value=\"I have read and agree to the terms and conditions\" \/><span class=\"wpcf7-list-item-label\">I have read and agree to the terms and conditions<\/span><\/span><\/span><\/span>\n<\/div>\n<div class=\"col-sm-12\">\n\t<span class=\"wpcf7-form-control-wrap radio-908\"><span class=\"wpcf7-form-control wpcf7-radio\"><span class=\"wpcf7-list-item first input-radio\"><label><\/label><input type=\"radio\" name=\"radio-908\" value=\"Goji Berries\" checked=\"checked\" \/><span class=\"wpcf7-list-item-label\">Goji Berries<\/span><\/span><span class=\"wpcf7-list-item input-radio\"><label><\/label><input type=\"radio\" name=\"radio-908\" value=\"Flaxseed\" \/><span class=\"wpcf7-list-item-label\">Flaxseed<\/span><\/span><span class=\"wpcf7-list-item last input-radio\"><label><\/label><input type=\"radio\" name=\"radio-908\" value=\"Fennel\" \/><span class=\"wpcf7-list-item-label\">Fennel<\/span><\/span><\/span><\/span>\n<\/div>\n<div class=\"col-sm-12\">\n\t<span class=\"wpcf7-form-control-wrap menu-953\"><div class=\"input-select\"><select name=\"menu-953\" class=\"wpcf7-form-control wpcf7-select\" aria-invalid=\"false\"><option value=\"Select An Option\">Select An Option<\/option><option value=\"Small\">Small<\/option><option value=\"Medium\">Medium<\/option><option value=\"Large\">Large<\/option><\/select><\/div><\/span>\n<\/div>\n<div class=\"col-sm-12\">\n\t<button type=\"submit\" value=\"Send Form\" class=\"wpcf7-form-control wpcf7-submit btn btn--primary\" \/>\n<\/div>\n<div class=\"wpcf7-response-output wpcf7-display-none\" aria-hidden=\"true\"><\/div><\/form><\/div>[\/vc_column][\/vc_row][\/vc_section][vc_row][vc_column][vc_column_text el_class=&#8221;text-center&#8221;]<\/p>\n<h2 style=\"text-align: center;\">Looking for styled form sections?<\/h2>\n<div class=\"btn btn-group text-center\" style=\"text-align: center;\"><a class=\"btn btn--primary type--uppercase\" href=\"\/sections\/contact-forms\/\"><span class=\"btn__text\">Contacts<\/span><\/a><a class=\"btn btn--primary-1 type--uppercase\" href=\"\/sections\/forms-subscribe\/\"><span class=\"btn__text\">Subscribes<\/span><\/a><a class=\"btn btn--primary-2 type--uppercase\" href=\"\/sections\/signup-forms\/\"><span class=\"btn__text\">Signup<\/span><\/a><\/div>\n<p class=\"type--fine-print\" style=\"text-align: center;\">or try the\u00a0<a href=\"http:\/\/tommusrhodus.theme-demo.net\/stackwordpresstheme\" target=\"_blank\" rel=\"noopener noreferrer\">admin demo &#x2197;<\/a><\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221;][vc_column][\/vc_column][\/vc_row][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":33,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-111","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rossk.uk\/index.php?rest_route=\/wp\/v2\/pages\/111"}],"collection":[{"href":"https:\/\/rossk.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rossk.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rossk.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rossk.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=111"}],"version-history":[{"count":0,"href":"https:\/\/rossk.uk\/index.php?rest_route=\/wp\/v2\/pages\/111\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/rossk.uk\/index.php?rest_route=\/wp\/v2\/pages\/33"}],"wp:attachment":[{"href":"https:\/\/rossk.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}