Form Editor 101: The Basics

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.

123contactform 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.

123contactform 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.

123contactform 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 123contactform

    • 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!

Juan Scarilli
Juan Scarilli
is the Campaign Manager of 123ContactForm. He takes care of delivering high-end marketing communication and helping our users get around the platform. He's a passionate football player, dedicated blogger and enthusiastic traveler.

4 Comments

  1. Pablo Lozano Rodriguez says:

    Mi interes es hacer un formato para recabar informaion para hacer reservaciones en mi hostal y este formato poderlo incluir en mi pagina web ( http://www.lyoban.com.mx ).
    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.

    • Romi Catauta-Toma says:

      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 123ContactForm Team

  2. David Vaught says:

    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 Reply

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