{"id":3992,"date":"2024-09-11T09:40:01","date_gmt":"2024-09-11T01:40:01","guid":{"rendered":"https:\/\/five.co\/?p=3992"},"modified":"2026-04-03T14:29:02","modified_gmt":"2026-04-03T06:29:02","slug":"buttons","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/buttons\/","title":{"rendered":"Advanced Forms: Adding Buttons to Your Form"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Advanced Forms &#8211; Part 8: Adding Buttons to Your Form<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hi and welcome to Five&#8217;s <em><strong>Advanced Forms<\/strong><\/em> series. This series of blog posts teaches you how to design the perfect form in Five. From changing the layout of your form to adding calculated fields &#8211; we cover everything you need to know to give your users access to a custom-designed form that does exactly as needed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog post, we explain how to add <strong>Buttons <\/strong>to your form. Buttons are just another display type in Five, just like <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/form-labels\/\">labels<\/a> or other out-of-the-box <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/display-types\/\">display types<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">About Five: More Than Just Forms<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Five is a rapid application development environment with advanced form-building features.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With Five, you can easily launch sophisticated forms to the web in minutes. For an example of a form developed in Five, <a href=\"https:\/\/default-bookingform-tryfive.5au.dev\/url\/booking\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">check out this hypothetical booking form, which combines several of Five&#8217;s features.<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike traditional form builders, which only store submitted data, Five allows you to <strong>directly connect your form to a database<\/strong>. This connection enables you to <strong>query your database and generate visual representations of your data<\/strong>. Most traditional form builders require exporting data to third-party tools for analysis, adding extra steps and potential for errors.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While traditional form builders may suffice for very basic data collection tasks, they often struggle with large datasets or high data volumes. <strong>Five\u2019s database-connected solution, on the other hand, is designed to handle substantial amounts of data efficiently<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One of the standout features of Five is the ability to <strong>create login-protected forms.<\/strong> This ensures that only authorized users can access and process data. Traditional form builders often lack these advanced security features, leaving your data vulnerable to unauthorized access.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In addition to its advanced data management and security features, <strong>Five allows you to build dashboards and generate detailed reports directly from your data<\/strong>. You can create visual data representations such as charts and graphs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To see your form submissions, Five gives you a full-fledged, login-protected submissions admin interface.<\/p>\n\n\n\n<div style=\"background-color: #001524;\"><hr style=\"height: 5px;\" \/>\n<pre style=\"text-align: center; overflow: hidden; white-space: pre-line;\"><span style=\"color: #f1ebda; background-color: #4588d8; font-size: calc(18px + 0.390625vw);\"><strong>Build and Launch Database-Connected Forms<\/strong><br \/><span style=\"font-size: 14pt;\">Rapidly build and deploy your system today<\/span><\/span><\/pre>\n<p style=\"text-align: center;\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\" target=\"_blank\" rel=\"noopener\"><button style=\"background-color: #f8b92b; border: none; color: black; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; cursor: pointer; margin: 4px 2px; border-radius: 5px;\"><strong>Get Instant Access<\/strong><\/button><br \/><\/a><\/p>\n<hr style=\"height: 5px;\" \/><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Five&#8217;s Form Design Tools: Buttons<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Buttons are a helpful feature in forms for providing additional information or for triggering a function. Buttons can be placed anywhere inside of forms and can be associated with <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/calculated-fields\/\">functions through events<\/a>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To see a button in a form in action, visit our <a href=\"https:\/\/default-bookingform-tryfive.5au.dev\/url\/booking\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">sample form<\/a>. <strong>Build Your Own Form <\/strong>is a button in our form and it opens up an external website. Of course, we could decide to let this button do something entirely different. For example, you could let the button generate a PDF document, or send an email.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"351\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-52-1024x351.png\" alt=\"\" class=\"wp-image-3993\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-52-1024x351.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-52-300x103.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-52-768x263.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-52-1536x527.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-52.png 1895w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em><strong>Build Your Own Form <\/strong>at the end of our form is a button<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Adding a Button to Your Form<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s first understand how to add a button to a form. If you have read our article on display types, the steps will be very familiar, as a button is just another display type in Five. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To add a button to a form, follow these steps:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Prerequisites:<\/strong><br>Have at least one application with one database table and one form ready in Five.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. In Five, go to <strong>Visual &gt; Forms<\/strong>, and select the form you would like to change display types for from the list.<br>2. Next, click <strong>Pages<\/strong> and select the page with your form. By default, your form&#8217;s first page is always the <strong>General <\/strong>page, as shown here:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"294\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-27-1024x294.png\" alt=\"\" class=\"wp-image-3929\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-27-1024x294.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-27-300x86.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-27-768x221.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-27-1536x441.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-27-2048x588.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">3. Select the <strong>General <\/strong>page (or any other page that is a <strong>Page Type Form)<\/strong>. <br>4. Next, click on <strong>Fields<\/strong> to see an overview of all fields inside your form.<br>5. Click the&nbsp;<strong>Plus&nbsp;<\/strong>button on the right side of the screen to add a new field to your form.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"363\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-53-1024x363.png\" alt=\"\" class=\"wp-image-3994\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-53-1024x363.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-53-300x106.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-53-768x272.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-53.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>To add a label into your form, select the&nbsp;<strong>Form<\/strong>, then the relevant&nbsp;<strong>Page<\/strong>, and its&nbsp;<strong>Fields<\/strong>, and click&nbsp;<strong>Plus<\/strong><\/em>&nbsp;<em>on the right side of the screen.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">6. To create a button, first select the&nbsp;<strong>Display Type&nbsp;<\/strong>as&nbsp;<strong>_Button<\/strong>. Second, provide a&nbsp;<strong>Caption<\/strong>. The&nbsp;<strong>Caption&nbsp;<\/strong>contains the text that will be visible on the button. Last, give the button an ID by filling in the&nbsp;<strong>Field ID&nbsp;<\/strong>field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is an example of the <strong>Build Your Own Form<\/strong> button shown in our <a href=\"https:\/\/default-bookingform-tryfive.5au.dev\/url\/booking\" rel=\"nofollow noopener\" target=\"_blank\">sample form<\/a>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"462\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-54-1024x462.png\" alt=\"\" class=\"wp-image-3996\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-54-1024x462.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-54-300x135.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-54-768x347.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-54-1536x694.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-54-2048x925.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Only three fields are required to add a label:&nbsp;<strong>Display Type, Caption, and Field ID<\/strong><\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">7. When you are done creating your button, it will appear in your list of form fields. You can now drag it to the right position, or you can use Five\u2019s Form Designer to do so.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8. Last, make sure to hit the&nbsp;<strong>Save<\/strong>&nbsp;button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have now added a button to our form. However, we have not defined what this button is supposed to do. To give the button a purpose, we must write a function. Read our <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/calculated-fields\/\">blog post on calculated fields<\/a> to learn how to write a function. As a quick recap, go to <strong>Logic &gt; Functions, <\/strong>and add a new function.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Build Your Own Form<\/strong> button in our <a href=\"https:\/\/default-bookingform-tryfive.5au.dev\/url\/booking\" rel=\"nofollow noopener\" target=\"_blank\">sample form<\/a> directs users to our website. Here is what our function looks like:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#abb2bf;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function SignUp(five, context, result)  {\n    five.open(&quot;https:\/\/preview-php85.dzine.org\/five\/get-started&quot;)\n    return five.success(result);\n}\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C678DD\">function<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">SignUp<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75; font-style: italic\">five<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">context<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">result<\/span><span style=\"color: #ABB2BF\">)  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">open<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&quot;https:\/\/preview-php85.dzine.org\/five\/get-started&quot;<\/span><span style=\"color: #ABB2BF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">return<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">success<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75\">result<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Once we have created and saved our function, let&#8217;s attach this function to our button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">9. Go back to <strong>Visual &gt; Forms &gt; Pages &gt; General<\/strong> &gt; <strong>Fields<\/strong> and select the <strong>Button <\/strong>you have added to your fields.<br>10. Click on <strong>Events.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"464\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-55-1024x464.png\" alt=\"\" class=\"wp-image-3997\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-55-1024x464.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-55-300x136.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-55-768x348.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-55-1536x695.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-55-2048x927.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Find the On Click event to make a button trigger a function<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">11. Find the <strong>On Click <\/strong>event, which (as the name suggests) will trigger your function when the button is clicked. <br>12. Select your function from the <strong>On Click <\/strong>dropdown.<br>13. Click the <strong>Save<\/strong> button to change your changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have now successfully added a button to a form and given the button a task. We did so by adding the button as a form field, writing a function, and associating the function with the on-click event for our button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note how these steps follow exactly the same principles we have previously explained in our blog posts on <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/display-types\/\">display types<\/a> and <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/calculated-fields\/\">calculated fields<\/a>. We did not have to learn anything new to accomplish this &#8211; we just applied the concept we were already familiar with to add a button.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Buttons: Practical Tips<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Buttons are a great way to add more functionality to your form. Whether you would like to add a call-to-action (CTA), a PDF report, a pop-up or anything else to your form, buttons paired with functions, give you full flexibility to create complex forms.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Finding Help<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Have more questions? <a href=\"https:\/\/five.org\" rel=\"nofollow noopener\" target=\"_blank\">Join our user community<\/a> to connect with others and get answers.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Continue Reading About Advanced Forms<\/h2>\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<p class=\"wp-block-paragraph\">Discover all articles of our <em>Advanced Forms<\/em> series here. <\/p>\n\n\n<div class=\"root-eb-post-grid-angoz wp-block-essential-blocks-post-grid\">\n    <div class=\"eb-parent-wrapper eb-parent-eb-post-grid-angoz \">\n        <div class=\"eb-post-grid-angoz style-1  eb-post-grid-wrapper\"\n            data-id=\"eb-post-grid-angoz\"\n            data-querydata=\"{&quot;source&quot;:&quot;post&quot;,&quot;sourceIndex&quot;:0,&quot;rest_base&quot;:&quot;posts&quot;,&quot;rest_namespace&quot;:&quot;wp\\\/v2&quot;,&quot;author&quot;:&quot;&quot;,&quot;taxonomies&quot;:[],&quot;per_page&quot;:&quot;3&quot;,&quot;offset&quot;:&quot;0&quot;,&quot;orderby&quot;:&quot;date&quot;,&quot;order&quot;:&quot;desc&quot;,&quot;include&quot;:&quot;[{\\&quot;value\\&quot;:3999,\\&quot;label\\&quot;:\\&quot;Advanced Forms: Dropdown Lists and Combo Boxes\\&quot;},{\\&quot;value\\&quot;:3978,\\&quot;label\\&quot;:\\&quot;Advanced Forms: Calculated Fields\\&quot;},{\\&quot;value\\&quot;:3992,\\&quot;label\\&quot;:\\&quot;Advanced Forms: Adding Buttons to Your Form\\&quot;},{\\&quot;value\\&quot;:3969,\\&quot;label\\&quot;:\\&quot;Advanced Forms: Conditional Logic and Branching in Forms\\&quot;},{\\&quot;value\\&quot;:3951,\\&quot;label\\&quot;:\\&quot;Advanced Forms: Custom Display Types\\&quot;},{\\&quot;value\\&quot;:3947,\\&quot;label\\&quot;:\\&quot;Advanced Forms: Display Types\\&quot;},{\\&quot;value\\&quot;:3940,\\&quot;label\\&quot;:\\&quot;Advanced Forms: Adding In-Field Help\\&quot;},{\\&quot;value\\&quot;:3934,\\&quot;label\\&quot;:\\&quot;Advanced Forms: Using Labels to Structure Your Form\\&quot;},{\\&quot;value\\&quot;:3924,\\&quot;label\\&quot;:\\&quot;Advanced Forms: Five&#8217;s Form Designer\\&quot;}]&quot;,&quot;exclude&quot;:&quot;&quot;,&quot;exclude_current&quot;:true,&quot;exclude_password_protected&quot;:false,&quot;ignore_sticky_posts&quot;:true}\"\n            data-attributes=\"{&quot;thumbnailSize&quot;:&quot;&quot;,&quot;loadMoreOptions&quot;:{&quot;enableMorePosts&quot;:true,&quot;loadMoreType&quot;:&quot;1&quot;,&quot;loadMoreButtonTxt&quot;:&quot;Load More&quot;,&quot;alignment&quot;:&quot;center&quot;,&quot;prevTxt&quot;:&quot;&lt;&quot;,&quot;nextTxt&quot;:&quot;&gt;&quot;,&quot;totalPosts&quot;:9},&quot;showSearch&quot;:false,&quot;showTaxonomyFilter&quot;:false,&quot;enableAjaxSearch&quot;:false,&quot;addIcon&quot;:true,&quot;iconPosition&quot;:&quot;left&quot;,&quot;icon&quot;:&quot;fas fa-chevron-right&quot;,&quot;preset&quot;:&quot;style-1&quot;,&quot;defaultFilter&quot;:&quot;all&quot;,&quot;version&quot;:&quot;v2&quot;,&quot;showBlockContent&quot;:true,&quot;showFallbackImg&quot;:false,&quot;fallbackImgUrl&quot;:&quot;&quot;,&quot;showThumbnail&quot;:false,&quot;showTitle&quot;:false,&quot;titleLength&quot;:&quot;&quot;,&quot;titleTag&quot;:&quot;h2&quot;,&quot;showContent&quot;:true,&quot;contentLength&quot;:7,&quot;expansionIndicator&quot;:&quot;...&quot;,&quot;showReadMore&quot;:true,&quot;readmoreText&quot;:&quot;Read More&quot;,&quot;showMeta&quot;:false,&quot;headerMeta&quot;:&quot;[{\\&quot;value\\&quot;:\\&quot;categories\\&quot;,\\&quot;label\\&quot;:\\&quot;Categories\\&quot;}]&quot;,&quot;footerMeta&quot;:&quot;[]&quot;,&quot;authorPrefix&quot;:&quot;by&quot;,&quot;datePrefix&quot;:&quot;on&quot;,&quot;showFeaturedPost&quot;:false,&quot;featuredPostId&quot;:&quot;&quot;,&quot;showFeaturedPostTitle&quot;:true,&quot;showFeaturedPostContent&quot;:false,&quot;showFeaturedPostMeta&quot;:true,&quot;showFeaturedHeaderMeta&quot;:true,&quot;showFeaturedFooterMeta&quot;:true,&quot;featuredMetaItems&quot;:&quot;{}&quot;,&quot;featuredExcerptLength&quot;:10}\">\n\n            \n\n            <div class=\"eb-post-grid-posts-wrapper\"><article class=\"ebpg-grid-post ebpg-post-grid-column\" data-id=\"3999\"><div class=\"ebpg-grid-post-holder\"><div class=\"ebpg-entry-wrapper\"><div class=\"ebpg-entry-content\"><div class=\"ebpg-grid-post-excerpt\">\n            <p>Advanced Forms &#8211; Part 9: Display Types\n\n\n\nHi&#8230;<\/p>\n        <\/div><div class=\"ebpg-readmore-btn\">\n            <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/dropdown-lists-combo-box\/\"><i class=\"fas fa-chevron-right eb-button-icon eb-button-icon-left hvr-icon\"><\/i> Read More <\/a>\n        <\/div><\/div><\/div><\/div><\/article><article class=\"ebpg-grid-post ebpg-post-grid-column\" data-id=\"3992\"><div class=\"ebpg-grid-post-holder\"><div class=\"ebpg-entry-wrapper\"><div class=\"ebpg-entry-content\"><div class=\"ebpg-grid-post-excerpt\">\n            <p>Advanced Forms &#8211; Part 8: Adding Buttons&#8230;<\/p>\n        <\/div><div class=\"ebpg-readmore-btn\">\n            <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/buttons\/\"><i class=\"fas fa-chevron-right eb-button-icon eb-button-icon-left hvr-icon\"><\/i> Read More <\/a>\n        <\/div><\/div><\/div><\/div><\/article><article class=\"ebpg-grid-post ebpg-post-grid-column\" data-id=\"3978\"><div class=\"ebpg-grid-post-holder\"><div class=\"ebpg-entry-wrapper\"><div class=\"ebpg-entry-content\"><div class=\"ebpg-grid-post-excerpt\">\n            <p>Advanced Forms &#8211; Part 7: Automatically Calculate&#8230;<\/p>\n        <\/div><div class=\"ebpg-readmore-btn\">\n            <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/calculated-fields\/\"><i class=\"fas fa-chevron-right eb-button-icon eb-button-icon-left hvr-icon\"><\/i> Read More <\/a>\n        <\/div><\/div><\/div><\/div><\/article><\/div><p class=\"eb-no-posts eb-loadmore-no-post\" style=\"display: none;\">No more posts<\/p><div class=\"ebpostgrid-pagination ebpg-pagination \"><button class=\"btn ebpg-pagination-button\" data-pagenumber=\"1\">Load More<\/button><\/div>        <\/div>\n    <\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Advanced Forms &#8211; Part 8: Adding Buttons to Your Form Hi and welcome to Five&#8217;s Advanced Forms series. This series of blog posts teaches you how to design the perfect form in Five. From changing the layout of your form to adding calculated fields &#8211; we cover everything you need to know to give your [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3998,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[21,49],"tags":[],"class_list":["post-3992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-how-to"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Buttons.jpg",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Buttons-150x150.jpg",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Buttons-300x169.jpg",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Buttons-768x432.jpg",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Buttons-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Buttons.jpg",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Buttons.jpg",1280,720,false]},"uagb_author_info":{"display_name":"Dominik Keller","author_link":"https:\/\/preview-php85.dzine.org\/five\/author\/f1v5_ed3_my\/"},"uagb_comment_info":0,"uagb_excerpt":"Advanced Forms &#8211; Part 8: Adding Buttons to Your Form Hi and welcome to Five&#8217;s Advanced Forms series. This series of blog posts teaches you how to design the perfect form in Five. From changing the layout of your form to adding calculated fields &#8211; we cover everything you need to know to give your&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/3992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/comments?post=3992"}],"version-history":[{"count":1,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/3992\/revisions"}],"predecessor-version":[{"id":17486,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/3992\/revisions\/17486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/3998"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=3992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=3992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=3992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}