{"id":3951,"date":"2024-09-11T09:20:56","date_gmt":"2024-09-11T01:20:56","guid":{"rendered":"https:\/\/five.co\/?p=3951"},"modified":"2025-04-24T08:56:06","modified_gmt":"2025-04-24T00:56:06","slug":"custom-display-types","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/custom-display-types\/","title":{"rendered":"Advanced Forms: Custom Display Types"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Advanced Forms &#8211; Part 5: Custom Display Types<\/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 introduce <strong>Five&#8217;s Custom Display Types<\/strong>, which let you create display types over and beyond what Five gives you out of the box in its <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/display-types\/\">predefined display types<\/a>. Custom display types can accept Regular Expressions, which are an extremely powerful tool for ensuring your forms only accept certain inputs, which is a prerequisite for further data analysis.  <\/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: Custom Display Types<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Display types are an incredibly easy-to-use, yet powerful feature in Five. A display type defines how a form field is <em>displayed <\/em>to end-users and what kind of input the field accepts. As explained in this article, Five comes with <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/display-types\/\">a comprehensive list of predefined display types<\/a>. Custom display types let you define your own display type, tailored exactly to your needs.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Explainer: Display Types vs Data Types<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s important not to mix up <em>display types <\/em>with <em>data types.<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Display types<\/strong> define how a form field is displayed to your end-users in the application. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Data types<\/strong>, on the other hand, are on the database level and define how the database stores the data. The data type is a guideline for your SQL database to understand what type of data is expected inside of each database column, and it also identifies how SQL will interact with the stored data. In Five, data types are defined on the table level, inside the <a href=\"https:\/\/help.five.org\/2.6\/docs\/data\/table-wizard\/introduction\/\" rel=\"nofollow noopener\" target=\"_blank\">Table Wizard<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure your display and data types are aligned. For example, if your display type is a text field, but your database expects a numeric input (such as a float), your application will throw an error.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Custom Display Types<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A custom display type lets you define how a form field behaves and what kind of input is accepted by the field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are a few simple examples:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Percentages<\/strong>:<br>Percentages are a numeric display type and can be shown to users using Five&#8217;s default display types, such as a float (with decimals) or integer (without decimals). However, if you are certain that the percentage you are expecting is always between 0 and 100, you can define a custom display type that enforces this rule. If user try to enter a number outside the range you have specified, an error message will appear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Email Addresses:<\/strong><br>Collecting email addresses is one of the most common use cases for online forms. However, some users try to get away with providing invalid email addresses, which in turn, creates extra work for those managing the form submissions, as they need to clean up the data. Luckily, we can run validations for valid email addresses by using a custom display type. Using something called a reg<em>ular expression<\/em>, we can define that the only input for a form field is a valid email address.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Postcodes:<\/strong><br>Postcodes are usually stored and displayed as a text field. Even though we expect a numeric input, such as 50120, we know that we won&#8217;t perform a calculation on a postcode. However, if a field is displayed as a text field, it will accept any kind of input without restrictions. By using a custom display type, we can prescribe that a text field only accepts five numbers, and nothing else.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">These examples illustrate the power of custom display types. They are an essential element in good form design and for collecting clean data.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a Custom Display Type in Five<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To define and apply a custom display type to a form field, 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>Setup &gt; Display Types<\/strong>, and click the yellow Plus button to create a new display type.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img width=\"410\" height=\"786\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-39.png\" alt=\"\" class=\"wp-image-3952\" style=\"width:162px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-39.png 410w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-39-156x300.png 156w\" sizes=\"(max-width: 410px) 100vw, 410px\" \/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">2. Next, fill in the required fields, starting with the <strong>Name <\/strong>field. For this example, we are creating a custom display type that checks whether something is a valid email address, so we will name our display type <strong>Email.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. To perform a check for valid email addresses, we next scroll down to select <strong>Regular Expression<\/strong>, as shown here:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"583\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-40-1024x583.png\" alt=\"\" class=\"wp-image-3953\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-40-1024x583.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-40-300x171.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-40-768x437.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-40-1536x875.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-40-2048x1167.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Creating a custom display type with a Regular Expression<\/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\">4. Next, paste this regular expression into the <strong>Mask <\/strong>field:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>^(([^&lt;&gt;()[]\\.,;:\\s@\"]+(.[^&lt;&gt;()[]\\.,;:\\s@\"]+)*)|(\".+\"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Regular expressions look very intimidating. But don&#8217;t worry, you can easily create or interpret regular expressions using ChatGPT. For more on regular expressions, <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/powerful-sql-data-validation-techniques\/\" target=\"_blank\" rel=\"noreferrer noopener\">check out our blog post on data validation techniques here.<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. Next, provide an <strong>Error Message <\/strong>that is shown if someone enters data that does <em>not <\/em>fulfill your regular expression. In our case, this means someone is trying to provide an input that is <em>not<\/em> a valid email address. Hence, our error message says &#8220;Please provide a valid email address&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6. Click the <strong>Save<\/strong> button to save your newly created custom display types.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have now successfully created a custom display type. However, we have not applied it to any of our form fields yet. To do so, <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/display-types\/\" target=\"_blank\" rel=\"noreferrer noopener\">follow the same steps as when applying a normal display type, as shown here<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Custom Display Types in Your Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s test our custom display type. Our <a href=\"https:\/\/default-bookingform-tryfive.5au.dev\/url\/booking\" rel=\"nofollow noopener\" target=\"_blank\">sample form<\/a> uses a custom display type on the email field. Fill in some dummy data until the email field appears. Now type in something that is <em>not <\/em>an email address and see what happens as you try to exit the field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A custom-defined error message appears, reminding users to provide a valid email. The email field has also turned red, indicating why and where the error message is shown. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"837\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-41-1024x837.png\" alt=\"\" class=\"wp-image-3954\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-41-1024x837.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-41-300x245.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-41-768x627.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-41-1536x1255.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/image-41.png 1891w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Custom Display Types: Practical Tips<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As explained in the last blog post of this series, <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/display-types\/\">Five&#8217;s pre-defined display types give developers a comprehensive list of ready-to-use UI features<\/a>, such as date pickers, currency fields, or radio buttons and checkboxes. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Custom display types open up a whole new world of data validation techniques for your form. You can prescribe exactly what a form field is designed to accept, ensuring your form captures clean data.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, use custom display types wisely. Unless you are certain about the data you are expecting, they can be a double-edged sword, as users will not be able to submit a form unless the data they submit meets your requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we will look at conditional logic inside forms, such as show-if conditions, which is another powerful technique to make forms more user-friendly.<\/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<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Continue Reading About Advanced Forms<\/h2>\n\n\n\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 5: Custom Display Types 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 users access [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3955,"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-3951","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-Custom-Display-Types.jpg",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Custom-Display-Types-150x150.jpg",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Custom-Display-Types-300x169.jpg",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Custom-Display-Types-768x432.jpg",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Custom-Display-Types-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Custom-Display-Types.jpg",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/09\/Five.Co-Advanced-Forms-Custom-Display-Types.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 5: Custom Display Types 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 users access&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/3951","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=3951"}],"version-history":[{"count":0,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/3951\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/3955"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=3951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=3951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=3951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}