Creating custom form field is just a matter of adding a couple of plugins.
If you are not already familiar with how plugins work, we recommend you take a look at the Plugins Crash Course.
Let's examine the following example:
With the above plugin properly registered, we should already see our new form field in the form builder! Just try dragging the "Custom" field from the fields menu, and you should see it in the dialog that follows:
Once you click on the icon, we'll be able to see the form that consists of two tabs. And if we take a look at the form in the initial "General" tab, we'll see that at the top we have "Label", "Field ID", and "Help Text" fields (which are present for every field by default), and on the bottom we have three fields we added via the
renderSettings function in our plugin.