{"id":961,"date":"2023-06-22T09:05:50","date_gmt":"2023-06-22T09:05:50","guid":{"rendered":"https:\/\/bitapps.pro\/docs\/bit-form\/form-fields-811\/button-field\/"},"modified":"2024-04-28T16:16:58","modified_gmt":"2024-04-28T10:16:58","slug":"button-field","status":"publish","type":"docs","link":"https:\/\/bitapps.pro\/docs\/bit-form\/form-fields\/button-field\/","title":{"rendered":"Button field"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Bit Form &#8211; Button field<\/h1>\n\n\n\n<p><strong>Button Field<\/strong> is a significant &amp; integral part of any website especially when it comes to web forms and customizing them is quite a bit of work to make the button look good and stand out. In our Bit Form, users will get a default submit button.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/button-field-1.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u2699 General Settings<a href=\"https:\/\/docs.form.bitapps.pro\/wpbitform-buttonfield#-general-settings\">\u200b<\/a><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Field Key<a href=\"https:\/\/docs.form.bitapps.pro\/wpbitform-buttonfield#1-field-key\">\u200b<\/a><\/h3>\n\n\n\n<p>In Bit Form, every field has a special identifier known as a Field Key. This field key uniquely identifies a field, it also helps to send data via email, PDF, store database, and PHP action hook. These keys are important in Success\/Error Messages, WebHooks, Redirect Pages, Email Templates, Workflows, and Integrations.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/field-key.1619de0.1698.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"267\" src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/field-key.1619de0.1698-1024x267.png\" alt=\"\" class=\"wp-image-7581\" srcset=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/field-key.1619de0.1698-1024x267.png 1024w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/field-key.1619de0.1698-300x78.png 300w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/field-key.1619de0.1698-768x200.png 768w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/field-key.1619de0.1698-1536x400.png 1536w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/field-key.1619de0.1698.png 1698w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Name<\/h3>\n\n\n\n<p>The Name is an HTML equivalent input field\u2019s name, you can customize it easily according to your preferences. You can easily modify it to suit your needs.<a href=\"javascript:void(0);\"><\/a><\/p>\n\n\n\n<p>A field\u2019s name is like a special label used when you submit a form. For example, let\u2019s say the field name is \u201ctext-1-5\u201d. In this case, \u2018text\u2019 tells us the type of field it is, \u20181\u2019 refers to the form ID, and \u20185\u2019 means it\u2019s the fifth-number field on the form.&nbsp;This field name can be used for various purposes such as&nbsp;<a href=\"https:\/\/docs.form.bitapps.pro\/wpbitform-get-url-parameter\">Fetch data from url parameter<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/name-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"269\" src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/name-5-1024x269.png\" alt=\"\" class=\"wp-image-1239\" srcset=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/name-5-1024x269.png 1024w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/name-5-300x79.png 300w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/name-5-768x202.png 768w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/name-5-1536x404.png 1536w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/name-5.png 1689w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">3. Size &amp; Position<\/h3>\n\n\n\n<p>It typically refers to the dimensions and placement of an input or output field within a user interface. It specifies the width and position, x-position, and w-width of the field on the screen or page.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/size-and-position-3.mp4\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">4. Button Text<a href=\"https:\/\/docs.form.bitapps.pro\/wpbitform-buttonfield#4-button-text\">\u200b<\/a><\/h3>\n\n\n\n<p>The Button Text is a configurable option in Bit Form that allows the administrator to set the text that appears on the button within the form. This text serves as a call-to-action for users to submit or perform an action in the form.<\/p>\n\n\n\n<p><strong>Adding Leading and Trailing Icons:<\/strong>&nbsp;The leading and trailing icon options allow administrators to add a symbol or image at the beginning (leading) or end (trailing) of the Button Text. With Bit Form, you can access over 10,000 icons from various open-source libraries and upload a custom icon to suit your specific needs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/button-text.26ccdf4.1707.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/button-text.26ccdf4.1707-1024x371.png\" alt=\"\" class=\"wp-image-7584\" srcset=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/button-text.26ccdf4.1707-1024x371.png 1024w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/button-text.26ccdf4.1707-300x109.png 300w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/button-text.26ccdf4.1707-768x278.png 768w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/button-text.26ccdf4.1707-1536x556.png 1536w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/07\/button-text.26ccdf4.1707.png 1707w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column note_col is-layout-flow wp-block-column-is-layout-flow\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4353\" src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/info-icon.png\" alt=\"note-icon-bit-apps\" width=\"24\" height=\"24\" srcset=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/info-icon.png 24w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/info-icon-16x16.png 16w\" sizes=\"(max-width: 24px) 100vw, 24px\" \/>\u00a0 <strong>Note<\/strong><\/p>\n\n\n\n<p>At Bit Form, we\u2019re thrilled to provide you with a huge selection of over 10,000 icons from various open-source libraries.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">5. Helper Text<\/h3>\n\n\n\n<p>It offers further clarification or context to help visitors understand the purpose of the field. This option allows you to guide your user on what kind of information should be entered, any restrictions on the input, and any formatting requirements.<\/p>\n\n\n\n<ol>\n<li><strong>Adding Leading and Trailing Icons:&nbsp;<\/strong>The leading and trailing icon option allows you to add a symbol or image at the beginning (leading) or end (trailing) of the helper text. It serves as a visual cue to help users understand the context of the text. With Bit Form, you can access over 10,000 icons from various open-source libraries and upload a custom icon to suit your specific needs.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/helper-text-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"349\" src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/helper-text-5-1024x349.png\" alt=\"\" class=\"wp-image-1246\" srcset=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/helper-text-5-1024x349.png 1024w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/helper-text-5-300x102.png 300w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/helper-text-5-768x262.png 768w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/helper-text-5-1536x524.png 1536w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/helper-text-5.png 1694w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">6. Disabled<\/h3>\n\n\n\n<p>The disables field option disables user input and interaction, ensuring the accuracy and integrity of form data by preventing the visitor from entering or changing any information in the form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/disabled.acef_.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"337\" src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/disabled.acef_-1024x337.png\" alt=\"\" class=\"wp-image-1247\" srcset=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/disabled.acef_-1024x337.png 1024w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/disabled.acef_-300x99.png 300w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/disabled.acef_-768x252.png 768w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/disabled.acef_-1536x505.png 1536w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/disabled.acef_.png 1695w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">7. Button Align<a href=\"https:\/\/docs.form.bitapps.pro\/wpbitform-buttonfield#7-button-align\">\u200b<\/a><\/h3>\n\n\n\n<p>This option allows the administrator to specify the alignment of the button within the form. This determines the horizontal positioning of the button relative to the form&#8217;s layout. There are three options for button alignment in Bit Form&nbsp;<code>Left<\/code>,&nbsp;<code>Right<\/code>, and&nbsp;<code>Center<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-align.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"408\" src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-align-1024x408.png\" alt=\"\" class=\"wp-image-1248\" srcset=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-align-1024x408.png 1024w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-align-300x119.png 300w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-align-768x306.png 768w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-align-1536x612.png 1536w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-align.png 1710w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">8. Text Align<a href=\"https:\/\/docs.form.bitapps.pro\/wpbitform-buttonfield#8-text-align\">\u200b<\/a><\/h3>\n\n\n\n<p>This option allows the administrator to specify the alignment of the&nbsp;<code>Button Text<\/code>&nbsp;within the form. This determines the horizontal positioning of the&nbsp;<code>Button Text<\/code>&nbsp;relative to the form&#8217;s layout. There are three options for button text alignment in Bit Form&nbsp;<code>Left<\/code>,&nbsp;<code>Right<\/code>, and&nbsp;<code>Center<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-text-align.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"401\" src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-text-align-1024x401.png\" alt=\"\" class=\"wp-image-1249\" style=\"width:840px;height:auto\" srcset=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-text-align-1024x401.png 1024w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-text-align-300x118.png 300w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-text-align-768x301.png 768w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-text-align-1536x602.png 1536w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-text-align.png 1709w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">9. Button Types<a href=\"https:\/\/docs.form.bitapps.pro\/wpbitform-buttonfield#9-button-types\">\u200b<\/a><\/h3>\n\n\n\n<p>Types of buttons &#8211;&nbsp;<code>Submit<\/code>,&nbsp;<code>Reset<\/code>&nbsp;&amp;&nbsp;<code>button<\/code>.<\/p>\n\n\n\n<p>\u2714Submit button: It is a standard submit button that helps to submit information by user.<\/p>\n\n\n\n<p>\u2714Reset button: It clears all the previous information &amp; allows the user to start over again.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-type.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"401\" src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-type-1024x401.png\" alt=\"\" class=\"wp-image-1250\" srcset=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-type-1024x401.png 1024w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-type-300x117.png 300w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-type-768x301.png 768w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-type-1536x601.png 1536w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/button-type.png 1701w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">10. Full Width<a href=\"https:\/\/docs.form.bitapps.pro\/wpbitform-buttonfield#10-full-width\">\u200b<\/a><\/h3>\n\n\n\n<p>Enabling this option you can make a full-width button<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/full-width.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"425\" src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/full-width-1024x425.png\" alt=\"\" class=\"wp-image-1251\" srcset=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/full-width-1024x425.png 1024w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/full-width-300x124.png 300w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/full-width-768x318.png 768w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/full-width-1536x637.png 1536w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/full-width.png 1698w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">11. Hidden<\/h3>\n\n\n\n<p>This option allows you to make the field hidden when the form is displayed on the front end.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/hidden-field-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"391\" src=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/hidden-field-2-1024x391.png\" alt=\"\" class=\"wp-image-1252\" srcset=\"https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/hidden-field-2-1024x391.png 1024w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/hidden-field-2-300x114.png 300w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/hidden-field-2-768x293.png 768w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/hidden-field-2-1536x586.png 1536w, https:\/\/bitapps.pro\/wp-content\/uploads\/2023\/06\/hidden-field-2.png 1714w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Bit Form &#8211; Button field Button Field is a significant &amp; integral part of any website especially when it comes to web forms and customizing them is quite a bit of work to make the button look good and stand out. In our Bit Form, users will get a default submit button. \u2699 General Settings\u200b [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":88699,"parent":811,"menu_order":34,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[15],"doc_badge":[],"acf":[],"_links":{"self":[{"href":"https:\/\/bitapps.pro\/wp-json\/wp\/v2\/docs\/961"}],"collection":[{"href":"https:\/\/bitapps.pro\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/bitapps.pro\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/bitapps.pro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitapps.pro\/wp-json\/wp\/v2\/comments?post=961"}],"version-history":[{"count":0,"href":"https:\/\/bitapps.pro\/wp-json\/wp\/v2\/docs\/961\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/bitapps.pro\/wp-json\/wp\/v2\/docs\/811"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bitapps.pro\/wp-json\/wp\/v2\/media\/88699"}],"wp:attachment":[{"href":"https:\/\/bitapps.pro\/wp-json\/wp\/v2\/media?parent=961"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/bitapps.pro\/wp-json\/wp\/v2\/doc_tag?post=961"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/bitapps.pro\/wp-json\/wp\/v2\/doc_badge?post=961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}