Basic Fields in the 123FormBuilder tool
As basic fields, you can use short texts, long texts, dropdowns, single choices, multiple choices, file uploads, headings, and HTML blocks. Thanks to the awesome drag and drop form builder, you can easily add any field to your form. Drag fields from the panel on the left to your main view, to the place where you want them to be. You can reposition them afterward. You can also add fields by just clicking on them in the left panel. Each element comes with an Edit option that lets you control its appearance and behavior. In this article, we’ll cover all the basic fields available.
General Particularities
- Type in the Label of the field, the title you want your users to see.
- Set the label’s Visibility (shown, hidden, inside the field, removed).
- When you edit the Label you can also choose the title’s style: normal, bold, or italic.
- Check the Required box if the field must be filled in (a red asterisk will indicate that the field is required).
- Click on Hide field if you don’t need to display it on the form.
- Add Instructions if you want to provide additional information regarding the text box; instructions will appear right below the field label.
- Default Value. Specifies the default value of the text field (e.g John Doe).
- Short text fields can show a Unique ID. The ID is automatically generated when the form’s page is refreshed.
- Match another field value. Match two input fields to force the user to type the same value in both.
- You can choose to make an input field Read-Only.
- On choice fields, you can set to Accept other values instead of the pre-established choices. Once clicked, it will open an input field.
- Limit the number of times a choice can be selected. Once the limit is reached, that particular option will be grayed out.
- Choice fields can be used for Quiz forms.
Short Text Field
A short text field allows users to enter any characters. You can use this field type to collect simple text inputs.
Particularities
- From Field validation, choose the input type you will accept for this field. For example: alpha numeric (letters and numbers), alpha numeric space (letters, numbers and space tab), full name, and regular expression.
- Set the length of the answer with the Min and Max no. of characters options.
Long Text Field
Long text fields are similar to short text ones, the difference being that they allow for more text input. For example, you may use long text fields for comments or suggestions.
Particularities
- Set the minimum and a maximum number of words allowed.
- Increase the height in rows.
- The user can manually increase the long text typing area by dragging its bottom-right corner.
Dropdown Field
The dropdown field provides a list of several options from which your visitor will have to select one.
Particularities
- Type in the Choices box the options your visitors can choose from (one per line).
- You can make the dropdown Searchable for your form user.
- Click on Import to see all your choices.
- You can also preselect a value in the Default choice section.
- Show how many times each option can be selected on the form with the help of the Limit choices option.
- Randomize your choices.
- Add a placeholder text that will show up on the first line. If you want to keep the first line blank, delete the Please select default message.
Single Choice Field
The single choice field allows users to choose only one item from a list of options.
Particularities
- In the Layout section, choose whether your single choice field will show on one, two, or three columns. You can also display the choices inline.
- Tick Clearable to allow your visitors to deselect the option they have chosen.
- Import lists of days of the week and months of the year by clicking on the Import option.
- Limit the number of times a choice can be checked. The limitation can be Reset every day and you can also Show no. of choices left.
Multiple Choice Field
The multiple choice field allows users to choose any number of items from a list of options.
Particularities
- You can set the minimum and the maximum number of choices that can be selected.
- Enable the Group answers option to receive the actual choice text instead of the Yes and No indicators.
File Upload Field
The file upload field allows you to receive files from your form respondents.
Particularities
- Allow multiple files to be uploaded through a single upload field.
- You can also choose to Allow folder uploads. However, when you enable this option, users will no longer be able to upload individual files.
- Choose the File types accepted on your form, and the File types forbidden.
- If a file type is not available on our list, you can Add it manually from the File types accepted option.
- You can add a maximum of 50 upload fields per form.
- The maximum file size available per field is 150MB.
Heading Field
You can mark a new section or subsection in your form by using headings.
Particularities
- Replace the Text with your desired heading and choose its style: bold, normal, or italic.
- Change the font size (h1, h2, h3, h4, label size, instructions size).
- Name your heading field to better identify it while using field rules.
HTML Block Field
Use HTML blocks to add customized text sections, links, images, and tables to your online form.
Particularities
- Click on the Edit text link to open the customization lightbox.
- Add custom HTML code on the form by clicking the source code icon.
- Type in text and use the following customization options: font type and size, font style (bold, italic, underlined), foreground and background color, text alignment (left, right, center, justified).
- When inserting tables, specify the number of rows and columns, the table width, padding and background color, the border size, style and color, and the type of alignment. Then, insert text or images into the table cells.
- When inserting an image, paste its URL in the customization box or upload it from your device, type in an image description (the text that will show if the image is unavailable at a certain moment), then adjust the image dimensions (width and height); finally, press Ok.
- When inserting hyperlinks, paste the URL and choose a target (New window to open the link in a new tab, None to open the link on the same page).
I am trying to get headings at the end of my form to be added to the automatic reply after someone completes the form. Currently, I get the questions and answers but the headings at the end (which are rules) just show up as brackets.
Hi Elizabeth, heading fields are only to display information on the form. What you can do is the following: add a short text field, add a default value with your heading text, and set the field to be read-only. You can also remove the label. Here are two screenshots with these settings:short text field with default value and the read-only option
Now, since they are input fields, they can be incorporated into your email template. I hope the above helps. If you have any questions, let me know. Have a great day.
Hey all,
How can I make certain field visible or not due to a selection on a previous question.? Does it make sense.
In other words, I field must only appear due to an answer in a previous drop-down box.
TIA
Hello! Yes, this is a feature that we offer, called branching and conditional logic. For more information, feel free to check out this article: field rules
Hi,
I need to show in the form the e-mail from a previous form.
I have already made the redirection with customs variables: https://www.123formbuilder.com/sf.php?s=form-5147990&customVars123=yes&control58816435=request5145983. But now i don´t know how to show in the text the e-mail filled in the previous form. example: “An email was sent to johndoe@JJ.com”
Could you help me with that?
Thank you,
Hi Ricardo! To show directly on the form and in plain text, you will need to have a script that passed the email input into a heading or HTML block field. A much easier and faster option will be to add the information on the second form’s Thank You Page. Choose in Settings – Thank you Page -> Show HTML Block. In the body add the email field variable form the right-side dropdown list. You should have something like this: An email was sent to {[email fieldID]}.
Is it possible to change a short text field to a number field without creating a new field?
Hello Willie,
Thank you for the comment and our sincere apologies for the delayed response.
Yes, it is possible. From the edit panel of your short text field you will need to change the Field Validation to numeric.
Hi, I need help please. I have field titles that are in ALL CAPS/2pt, and are running into the input boxes if I don’t move some of the field title text down to another line. I want all the field title text on one line. This should be possible? Also how do I justify the input boxes to the right or further away from the field titles? Thank you!
Hello Carina,
The form looks fine on our side. Please contact our Support Team at support@123formbuilder.com or via our contact form for anything related to your account.
Thanks!
Is there a way to create a report chart based on a check box field with 6 options? It would be great to have the visible data for that!
Hello Laura,
Yes, it’s possible. Follow our documentation here to learn more. You can create a report based an the 6 options you’ve added to the Checkbox field.
For further assistance, don’t hesitate to contact our Support Team at support@123formbuilder.com or via our contact form.
Thanks!
Hi there – how do I make the text box fields TALLER, and make the input text that appears IN them larger?
Thanks!
Hello Stephen!
These can be accomplished by adding some custom CSS to your form. In the Form Settings section, go to Themes and click on the link Use custom CSS. In the lighbox that appears you can use a code such as: input {height:50px} (this code will make the input box taller. Adjust the value as you see fit}.
As for the text that appears in the input, use the code: input {font-size: 24px;} (Change the value as you see fit on your form).
If you have text areas on your form, then you will need to use this code: input, textarea {font-size: 24px;} (This will change the size of the text within the input and textarea to 24 px)
If you are also interested in changing the font family used within the input, follow our documentation at: https://www.123formbuilder.com/docs/how-to-change-the-font-family-for-form-inputs/
For further assistance, don’t hesitate to contact our Support Team at support@123formbuilder.com or via our contact form.
Thanks!
I Am trying to insert a form in my front page but I could please could you help me
Hello Daniel!
Have you tried using the JavaScript code to embed your form on the front page or any other options available in the Form Publish → Embed Code section of your form?
For technical assistance, don’t hesitate to contact our Support Team at support@123formbuilder.com or via our contact form.
Thanks!