{"id":2259,"date":"2021-05-20T17:42:33","date_gmt":"2021-05-20T14:42:33","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=2259"},"modified":"2024-01-09T16:59:39","modified_gmt":"2024-01-09T14:59:39","slug":"form-elements","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/general-options\/form-elements\/","title":{"rendered":"Form Elements"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Quick Look<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/Screen-Recording-2021-09-09-at-23.00.09.mov\"><\/video><figcaption class=\"wp-element-caption\">Form Controls in action<\/figcaption><\/figure>\n\n\n\n<p>The <strong>Form Controls<\/strong> pane will let you change up the look of the forms throughout your website. Contact forms, WooCommerce Checkout forms and other forms are affected by these changes.<\/p>\n\n\n\n<p>You can configure the general look of these forms, with two beautiful design choices &#8212; <strong>Classic<\/strong> &amp; <strong>Modern<\/strong>. There are also granular controls, that go in depth below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Granular Controls<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/blocksy-form-type.png\" alt=\"\" class=\"wp-image-5170\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading has-text-align-left\">Form type<\/h5>\n\n\n\n<p>Lets you adjust the overall look of your form. <em>Classic<\/em> offers a simple boxed look, while <em>Modern<\/em> is a flatter design for the minimalist in you.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/blocksy-form-font-controls.png\" alt=\"\" class=\"wp-image-5176\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading has-text-align-left\">Font controls<\/h5>\n\n\n\n<p>These controls will give you the opportunity to adjust the font colours, for both the default and active modifiers, as well as the general font size of the forms.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/blocksy-form-input-controls.png\" alt=\"\" class=\"wp-image-5179\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading has-text-align-left\">Input controls<\/h5>\n\n\n\n<p>There are three sections here. Each will let you control a set of input controls, such as text areas, radios &amp; checkboxes and even selects.<\/p>\n\n\n\n<p>You can choose the border and background colours of the inputs. Border options are also available, as well as radius settings.<\/p>\n\n\n\n<p>For the radio and checkbox buttons, you can select the colours.<\/p>\n\n\n\n<p>And for the select dropdown menus, font and background colours can be chosen.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Integrating with third party plugins<\/h3>\n\n\n\n<p>Because Blocksy wants to be a citizen, it has to play nicely with others. So we offer full integration with WPForms. There&#8217;s only one little thing you have to do, and that is to go to the plugin&#8217;s settings and choose <em>Base styling only<\/em> in the &#8220;<em>Include Form Styling<\/em>&#8221; setting. This will make sure that forms generated by the plugin will inherit Blocksy&#8217;s customisations.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d19ba4b6fd5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d19ba4b6fd5\" class=\"wp-block-image size-large has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/Screenshot-2021-09-09-at-23.04.32-1024x604-1.png\" alt=\"\" class=\"wp-image-3267\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Video Resources<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Customising Forms | Blocksy #shorts\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/cHg5d8nnmpM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Quick Look The Form Controls pane will let you change up the look of the forms throughout your website. Contact forms, WooCommerce Checkout forms and other forms are affected by these changes. You can configure the general look of these forms, with two beautiful design choices &#8212; Classic &amp; Modern. There are also granular controls, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[113],"class_list":["post-2259","documentation","type-documentation","status-publish","hentry","doc_categories-general-options"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=2259"}],"version-history":[{"count":3,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2259\/revisions"}],"predecessor-version":[{"id":9111,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2259\/revisions\/9111"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=2259"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=2259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}