{"id":18,"date":"2021-06-28T09:04:10","date_gmt":"2021-06-28T09:04:10","guid":{"rendered":"https:\/\/documentation.userswp.io\/article\/working-with-the-form-builder\/"},"modified":"2026-01-27T11:56:19","modified_gmt":"2026-01-27T11:56:19","slug":"working-with-the-form-builder","status":"publish","type":"gd_place","link":"https:\/\/userswp.io\/documentation\/article\/first-steps\/working-with-the-form-builder\/","title":{"rendered":"Working with the Form Builder"},"content":{"rendered":"<p>UsersWP has an intuitive Form Builder that can be used to quickly add registration and account forms to your site. There is no limit on the number of forms that you can add.<\/p>\n<section class=\"alert alert-success\">You can create <strong>multiple register forms <\/strong>in UsersWP, each with its own Form Options and custom fields by creating new User Type.\u00a0<\/section>\n<h2>Understanding the Form Builder Interface<\/h2>\n<p>UsersWP Form Builder screen is divided in two parts &#8212; on the left, you have the list of available fields, and on the right, you can see the fields that are actually added to the form.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/Form-Builder-1024x563.png\" alt=\"\" class=\"wp-image-571\" srcset=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/Form-Builder-1024x563.png 1024w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/Form-Builder-300x165.png 300w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/Form-Builder-768x423.png 768w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/Form-Builder-1536x845.png 1536w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/Form-Builder-2048x1127.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<p>Adding fields to the form is fairly straightforward &#8212; you can click on the field of your choice, and it will be added to the form. You can then customize its settings as per your requirements. For instance, in the example below, we will add the &lt;strong&gt;Text&lt;\/strong&gt;\u00a0field to our form.<\/p>\n<dl>\n<dt>1<\/dt>\n<dd>\u00a0Navigate to <strong>UsersWP &gt; Form Builder.\u00a0<\/strong><\/dd>\n<\/dl>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"426\" src=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image.png\" alt=\"\" class=\"wp-image-572\" srcset=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image.png 320w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-225x300.png 225w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n<dl>\n<dt>2<\/dt>\n<dd>\u00a0Click on the <strong>Text <\/strong>field; it will be added to the form.<\/dd>\n<\/dl>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"578\" src=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-1-1024x578.png\" alt=\"\" class=\"wp-image-573\" srcset=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-1-1024x578.png 1024w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-1-300x169.png 300w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-1-768x434.png 768w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-1-1536x868.png 1536w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-1-2048x1157.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<dl>\n<dt>3<\/dt>\n<dd>\u00a0You can now customize its settings as per your needs. You can specify a field label and description, choose whether its a required field, and also specify where it should be displayed on the frontend.<\/dd>\n<\/dl>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"565\" src=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-2-1024x565.png\" alt=\"\" class=\"wp-image-574\" srcset=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-2-1024x565.png 1024w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-2-300x166.png 300w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-2-768x424.png 768w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-2-1536x847.png 1536w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-2-2048x1130.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<dl>\n<dt>4<\/dt>\n<dd>\u00a0Save your settings.<\/dd>\n<\/dl>\n\n\n<p>The above process can be repeated for all fields, as necessary.<\/p>\n\n\n<section class=\"alert alert-info\">Two field options need to be borne in mind:<\/p>\n<ul>\n<li><strong>Is Active? &#8211; <\/strong>This should be checked, otherwise the field may not show up on the frontend.<\/li>\n<li><strong>Include This Field in Register Form? &#8211; <\/strong>If checked, the field will show up in the Available register form fields.<\/li>\n<\/ul>\n<\/section>\n<h2>Register and Profile Tabs<\/h2>\n<p>Once you have created an Account Form, you can tweak its registration fields by heading to <strong>UsersWP &gt; Form Builder &gt; Register.\u00a0<\/strong><\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-3-1024x453.png\" alt=\"\" class=\"wp-image-575\" srcset=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-3-1024x453.png 1024w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-3-300x133.png 300w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-3-768x339.png 768w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-3-1536x679.png 1536w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-3-2048x905.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<p>Similarly, you can add profile tabs to specific forms from the page <strong>UsersWP &gt; Form Builder &gt; Profile Tabs.<\/strong><\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"490\" src=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-4-1024x490.png\" alt=\"\" class=\"wp-image-578\" srcset=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-4-1024x490.png 1024w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-4-300x144.png 300w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-4-768x368.png 768w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-4-1536x735.png 1536w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2021\/06\/image-4-2048x980.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<section class=\"alert alert-success\">It is noteworthy that whatever fields are added to the form from the Account Form Builder AND selected as &#8220;Include this field in Register form&#8221; will be available on the Register Form Builder.\nSimilarly, whichever tabs are selected from the Profile Builder for a particular form will be shown on the profiles of users that are registered using that form.<\/section>","protected":false},"excerpt":{"rendered":"<p>UsersWP has an intuitive Form Builder that can be used to quickly add registration and account forms to your site. There is no limit on the number of forms that you can add. You can create multiple register forms in UsersWP, each with its own Form Options and custom fields by creating new User Type.\u00a0 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[50,51,46,47,48,49],"article\/categories":[3,8],"class_list":["post-18","gd_place","type-gd_place","status-publish","hentry","gd_place_tags-adding-forms","gd_place_tags-registration-forms","gd_place_tags-form-builder","gd_place_tags-form-fields","gd_place_tags-custom-fields","gd_place_tags-adding-form-fields","gd_placecategory-getting-started","gd_placecategory-first-steps"],"_links":{"self":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":0,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/18\/revisions"}],"wp:attachment":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/tags?post=18"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/categories?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}