{"id":3616,"date":"2016-06-30T18:15:25","date_gmt":"2016-06-30T14:15:25","guid":{"rendered":"http:\/\/dhtmlx.com\/blog\/?p=3616"},"modified":"2026-04-03T15:33:05","modified_gmt":"2026-04-03T12:33:05","slug":"creating-registration-form-online-form-builder","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/creating-registration-form-online-form-builder\/","title":{"rendered":"Creating Registration Form with Online Form Builder"},"content":{"rendered":"

\n

\n
\n \n <\/path>\n <\/svg>\n\n INFO\n <\/div>\n\n
\n

\n If you are using an outdated version of DHTMLX Suite 5 and require the documentation for it, \n please contact us<\/a>,
and we will send it to you.\n <\/p>\n <\/div>\n <\/div>\n
\nLet’s face it – a very small number of web applications goes without forms. Just once in the life developers created a form for the app, whether a small one with 2 inputs for login or a large application form. To improve the form building process, we’d like to offer you our online form creator<\/a> that will help with form elements arrangement and get a ready code on return.<\/p>\n

A small tutorial already exists in our documentation<\/a> that shows how to create forms with our free form builder tool, but today we’ll make a little bit larger registration form. Let’s begin with designer’s scratch:<\/p>\n

\"form<\/p>\n

That’s the form we need for our application. Follow the instructions below to create such kind of form with us.<\/p>\n

Preparations.<\/strong> First of all, let’s configure the settings block: we put the general data for our form, in particular we need: <\/p>\n

labelAlign – left<\/em>. Nevertheless, checkboxes and radio buttons require right<\/em> (we’ll discuss it later)
\nlabelWidth – 130
\ninputWidth – 270 (for the custom inputs)
\noffsetLeft – 0 (for the custom inputs)<\/p>\n

\"configure<\/p>\n

Full name field.<\/strong> The full name<\/em> field contains two inputs. The best way to create this field is to divide it into 2 columns and unite into one block. It gives us the ability to arrange the rest of the elements below this block.<\/p>\n

A new block requires the following settings:<\/p>\n

inputWidth – 130
\nblockOffset – 0<\/p>\n

Also we remove label of the second input and add offsetLeft:7<\/p>\n

At the form building process, you may switch between Mockup and Preview tabs, it’ll show you whether you are on the right track or not.<\/p>\n

\"preview<\/p>\n

Phone number field.<\/strong> The phone number<\/em> field is the same as a full name<\/em> (just a slight difference in sizes), so the fastest way to create it is by copying the previous block.<\/p>\n

\"copy<\/p>\n

Besides, we need to remove inputWidth in settings, replace label from full name to phone number, and make the custom width for the inputs: the first input gets 60, the second one – 200.<\/p>\n

Company field.<\/strong> Now let’s deal with the company<\/em> field. It’ll be quite simple: add an input, give it a name, using drag-n-drop move it after the full name<\/em> block. As you may notice, each block has its own built-in offsets in the skin, that’s why we need to level the phone number field (move up and down). For this, the phone number block gets offsetTop – 5. <\/p>\n

\"company<\/p>\n

Email field.<\/strong> It’s super easy to create an email <\/em>field: copy the company <\/em>block, drag and drop it to the right place and change the label to “email”.
\n
\nCountry field.<\/strong> A country <\/em>field is created by copying the email <\/em>field, changing the type to select, and changing the label.<\/p>\n

\"country<\/p>\n

Remember that you can check the interim result by switching the view from Mockup to Preview. Looks nice, isn’t it? ;)<\/p>\n

Radio buttons.<\/strong> As you may remember from our scratch, there are two fields with checkboxes and radio buttons follow. Well, it’s not just copying and changing the name like we did in the previous steps, but more complicated work. But don’t worry – you just need a little more practice, and you\u2019ll create such kind of forms as easy as ABC.<\/p>\n

How to start: <\/p>\n

    \n
  1. Create a block. Add blockOffset:0 and offsetTop:5 to this block (the same as for the phone number block). This block will contain a template with a sex label. <\/li>\n
  2. inputWidth = 0.<\/li>\n
  3. Add 2 radio buttons to the next 2 columns<\/li>\n
  4. Set a little offset for the right radio button<\/li>\n
  5. Make position:label-right for both radio buttons<\/li>\n
  6. Change labelWidth:auto and type to radio (press ctrl to choose two items from the tree at once).<\/li>\n<\/ol>\n

    To add radio functionality to the buttons, give them the similar name. <\/p>\n

    \"<\/p>\n

    Language field.<\/strong> Copy the previous block (the one with the radio buttons). Change the type from radio to checkbox, remove name, add the 3rd checkbox by copying the female <\/em>column.<\/p>\n

    \"checkboxes<\/p>\n

    Almost ready! 3 more elements left.<\/p>\n

    Comments field.<\/strong> The familiar actions – copy the company <\/em>block and rename the label.<\/p>\n

    One more checkbox.<\/strong> Copypaste the language <\/em>block. Make a text of the template item equal to one space (we need it to take some space) and remove the next 2 columns.<\/p>\n

    \"remove<\/p>\n

    We are so close to finish.<\/p>\n

    Register button.<\/strong> Now we just add the button. In order to place it in the center of the form, we add offsetLeft:130 and offsetTop:30.<\/p>\n

    \"<\/p>\n

    Check Preview tab and enjoy the created form! To add it to your application, click “Export” button and copy a ready code of your form.
    \n    Download the json we’ve exported<\/a>. Now you can import it to the form builder<\/a> and get the form from our picture.<\/p>\n

    We hope you enjoy the result as we do! :) Share your thoughts in comments and feel free to send your feature requests.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Let’s face it – a very small number of web applications goes without forms. Just once in the life developers created a form for the app, whether a small …<\/p>\n","protected":false},"author":2,"featured_media":3640,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,31,52,10,32],"class_list":["post-3616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-form","tag-form-builder","tag-dhtmlxsuite","tag-ui-designer"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=3616"}],"version-history":[{"count":2,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3616\/revisions"}],"predecessor-version":[{"id":15354,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3616\/revisions\/15354"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3640"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=3616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=3616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=3616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}