Browse categories

Form Editor

Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Basic Fields

Short Text
Long Text
File Upload
Dropdown		 Single Choice
Multiple Choice
Heading
HTML block

Form-Basic-Fields

 As basic fields, you can use short text fields, long text fields, number fields, dropdown lists, single choice fields, multiple choice fields, headings and HTML blocks.Thanks to the awesome drag and drop editor, any field can be added to your form as easy as 1-2-3. Drag fields from the panel on the right to your main view, to the place where you want them to be. You can reposition fields afterwards. You can also add fields by just clicking on them in the panel.

Each element comes with an Edit option that lets you control its appearance and behavior.

Text Box Field

 a) Short Text field. A single choice may be used to request a simple text input from your visitor.

  • type in the Label of the field, the title you want your users to see
  • when you edit the Label you can also choose the title’s style: normal, bold or italic
  • choose, from the Field Validation the input type you will accept for this field: for example, alphanumeric (letters and numbers), alphanumeric space (letters, numbers and space tab), full name and regular expression
  • check the Required box if the field must not be left blank (a red asterisk will indicate that the field is required)
  • add field Instructions if you want to provide additional information regarding the text box; instructions will appear right below the field label

Text Area Field

b) Long Text field. Long text fields are similar to Short text fields the difference being that they allow for more text input. For example, you may use long text fields for comments or suggestions.

  • type the title of the long text field in the Label box
  • choose the Label Style (normal, bold, italic)
  • set the Min/Max number of characters (number of columns)
  • set the number of Min/Max number of words as well if you wish(lines)
  • check the Required box to make sure that visitors complete the field
  • add Instructions to give indications

Dropdown List

 c) Dropdown menus. Dropdowns provide several options from which your visitor will have to select one.

  • indicate, in the Label box, the information you are interested in
  • type in the Available Choices box the options visitors have got (one per line)
  • you can make the dropdown searchable for your form users to find the option they want much easier and quick
  • set up the dropdown’s width from 100 to 500 pixels. When set on Auto, it will automatically adjust as you type in the available choices.
  • quick tip: if you want to leave the first line blank, type in [Please Select] – this way, no choice will show until your visitor opens the dropdown list
  • show how many times each option can be selected on the form with the help of the Limit choices option.
  • the Import link will take you to a lightbox from where you can import lists with days of the week and months of the year
  • you can also preselect a value in the Default Choice section

Radio Buttons

 d) Single Choice field. Option lists can also be rendered through single choice fields.

  • type in the Available Choices box the options visitors will choose from
  • import lists of days of the week and months of the year clicking on the Import link
  • in the Layout dropdown, choose whether your single choice field will show on one, two or three columns or the choices can also be displayed inline
  • tick the Accept Other Values box to allow visitors to enter an option of their own
  • you can also choose to Reset every day option
  • enable the Show no. of choices left option to show how many times each option can be selected after submission.
  • tick Clearable to allow your visitors to deselect the option they have chosen.
  • preselect a value in the Default Choice section

Checkboxes

 e) Multple Choice fields. For these types of fields, visitors may tick as many options as they wish.

  • type in the Available Choices box, line by line, the available options
  • import common lists (such as days of the week and months of the year) using the Import link
  • Set one or more Default Choices that will show up in the editor and the front-end of the form.
  • set up the Layout by indicating whether the options will be structured in one, two or three columns or side by side
  • tick Accept Other Values if visitors may type in a different option than the listed ones
  • use the Show no. of choices left option to let your form users know how many more times each option can be selected.
  • In Submissions, you have a column for the whole field and you are shown exactly what choices were selected – Yes or No.
Headings

f) Headings. If you want to mark a new section or subsection in your form – for example, a Likert scale list – you can do this by using headings. Replace the text in the Label box with your desired heading and choose its Style: bold, normal or italic.

HTML_blocks


g) HTML Blocks. HTML blocks may be used for inserting customized text sections, images and tables.

  • click on the Edit HTML Block link to open the customization lightbox
  • 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 alternate text (the text that will show if the image is unavailable at a certain moment), then adjust the image layout: width, height, border, alignment and the horizontal and vertical space covered by the image section; finally, press Save
  • when inserting hyperlinks, paste the URL, choose a target (_blank to open the link in a new tab, _self to open the link in the same frame, _parent to open it in the same frameset, _top to open it as a new page that fills the entire window)
  • Style, Class and Name are HTML/CSS fields in which you may introduce code lines
SIGN UP FOR FREE

14 comments

  1. 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!

    Reply

  2. 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!

    Reply

  3. Hi there – how do I make the text box fields TALLER, and make the input text that appears IN them larger?

    Thanks!

    Reply

    1. 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: http://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!

      Reply

  5. Hi,
    I am setting up a summary section at the end of my form (OSCA Internship Application Form). Can I set it to automatically copy the answers of the fields included? Eg the text box field allows you to select ‘match field with the value of another field’. Is it possible to do this with the dropdown field? I am trying to duplicate the ‘University’ box in the summary section.
    Thanks.
    Rosy

    Reply

  6. Can I please request a field that allows you to add a table to a form. For example – 3 rows (Date/Job Role/Responsiblities) and 5 columns (space for 5 jobs to be inputed) on a grid.
    Thanks

    Reply
  7. Pingback: Community Surveys for Facebook | Facebook Surveys Blog
  8. Pingback: How to Increase Company Retention Rates With the Employee Benefits Survey (Part II) | Smashing Forms

Leave a Reply

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

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?

Contact our support team