Form Editor 101: The Basics


by 123FormBuilder

The form editor is where the magic begins. What fields, how many of them, what to ask for, spacing, layout, everything is happening here! Even though it’s pretty intuitive and easy to use, we have prepared you this short guide to the very basics of form building.

It will help you learn about the form fields and their options, field validations, layout options and more. So we hope you find it useful. Welcome aboard!

Start with a Clear Goal in Mind

But before jumping into the Editor we have an advice: set up your goals clearly. Having a clear goal is the most important step when getting started. Ask yourself: “What do I want to achieve with my form?”. Do you want to register guests to an event? Do you want a way for your clients to order products and pay online? Or maybe you just want to send blog articles through a subscription form?

Having a clear goal will help you map out the information you need to collect. After you know that, it’s easy to start adding the relevant fields that can get you the data you really need.

The Form Editor

So after choosing your desired template or selecting to create a form from scratch you’ll find yourself in a forest of features, buttons and functionalities that are there to help you build stunning forms and get the results you’re looking for: welcome to the Form Editor. So let us give you an introduction:

    • This is the form layout where you can drag and drop fields.

123formbuilder editor form layout

    • The left menu contains all field types that you can add to your form. They are divided in three categories: Basic fields, Special fields and Other fields.

123formbuilder form fields

  • Form layout options are located on top of the form by pressing the square-shaped button on the top right side. Next to it, the eye-shaped button lets you preview your form at any time.

123formbuilder form layout options

To add a field to your form, click and hold the field in the fields menu, then drag it to the form layout and release. Or you can simply click a field directly in the menu and it will be automatically added to the form.

drag and drop form editor

Once you click the field on the form, you can edit it in the left panel.

edit field in editor

Each type of form field has different settings in the edit panel.

field settings 123formbuilder

    • Form field settings are divided into Basic settings and more Advanced settings. Take for example the advanced settings of the single choice field where you can limit the number of times an option can be chosen, which choice is correct (useful for building a quiz form) and randomize choices after each session.
    • Some field settings are shared among the majority of available form fields, such as the option to change the label of the field and make the field required.
    • Some form fields that use input boxes have the option to use default values. This means you can add a value that will appear in the field each time the form is being used. However, some field types accept only certain default values. These are number, email, name, date and time.
    • If you add the default value “now” to the Time field, it will show the current time.
    • If you add the default value “today” to the Date field, it will show the current date.
    • Some fields have more than one input box (e.g. Name). If you want to show default values in both boxes (First Name and Last Name), use a space to separate them when introducing the default values in the left menu.
    • You can easily style your form labels with bold and italic. In case want more options, go to ThemesText to change the color, size or font style.
    • You can hide the fields on your form by using their hidden option. However, this will interfere with any rules you want to set that show certain fields on the form only when a criteria is met. The hidden option forces the field to remain unseen regardless of any rule.

So that’s pretty much for now and enough for you to get started into your forms adventure. Wanna learn more? Don’t miss the second part of this article. Please leave us your comments or questions below and share your form-building experience!


  1. Hi, being 58 years old and primarily French (Canada), I am able to follow these tutorials even in English.
    In fact, this page is where I should have started when joining 123FormBuilders.

    I just discovered this week that while playing with my forms, I can use the chat live
    while actually building up my forms, nice!

    This led me to a suggestion: to provide additional learning strength to these tutorials above, could a small video
    gathering the content and including the clicking relevant to the specifics and so on be also in place here?
    Or at least: a video showing an actual live “building” of a form, step by step (as above) with mouse+arrow moving in all the required fields and especially for more complex forms like Quizzes with branching?

    Pretty sure that if I were 20 years old I would never have written these suggestions, but at my age and starting on the net…In addition, senior “newbies” on the net are growing fast in number, should 123Contactforms adapt?

  2. Hola,

    Necesito hacer un formulario de cotización, donde se ingrese parametros numericos y devuelva un resultado. Como hago el cálculo y la devolución del resultado?


  3. Mi interes es hacer un formato para recabar informaion para hacer reservaciones en mi hostal y este formato poderlo incluir en mi pagina web ( ).
    Segun yo, ya elabore un formato (lo hise de forma intuitiva y es un borrador) y me gustaria recibir tu opinion al respecto, y tambien te agradederia que me orientaras de como incluirlo en mi pagina.
    En la actualidad tengo un formato en mi pagina, pero es complicado, no lo se manejar y no esta funcionando.

    De antemano te agradezco tu ayuda.

    Pablo Lozano Rodriguez.

    1. Hi Pablo,

      Our colleagues from the support team have already replied to you via email. If you have any other questions, don’t hesitate to contact us again.

      Have a great day ahead!
      The 123FormBuilder Team

  4. Juan — I have trouble seeing the numbers typed into a Phone field (3-3-4 format). The numbers are so large that only 2 show up when my customers enter 3 numbers into the first two parts of the field, and only 3 numbers show up in the portion reserved for 4 numbers. How do I reduce the SIZE of the displayed numbers for my customers, so they can see what they entered into the form accurately?

Leave a comment

Your email address will not be published. Required fields are marked *

You love forms as much as we do?

Then share your form story with us! We will read all the submitted cases and reach out the selected ones for further details. The chosen ones will have a case study created and will be featured in our blog, newsletter and social media channels.