Basic Fields

Text Box
Text Area
Number
Dropdown List
Radio Buttons
Checkbox
Heading
Likert Scale
Email
Website

Form-Basic-Fields

As basic fields, you can use text boxes, text areas, number fields, dropdown lists, radio buttons, checkboxes, headings, Likert scales email and website fields.

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.

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

a) Text Box. A text box may be used to request a simple text input from your visitor.

  • type in the Label text box the title of your text box
  • select in the Label Style dropdown the title style: normal, bold or italic
  • specify the box width using the Field Size option (it indicates the number of columns – or characters – within the box)
  • choose, in the Field Validation dropdown, the input type you will accept for this field: for example, alphanumeric (letters and numbers), email (an email address), URL (a webpage)
  • 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 Box Field

Text Area Field

b) Text Area. Text areas are similar to text boxes, but they allow for more text input. For example, you may use text areas for comments or suggestions.

  • type the text area title in the Label text box
  • choose the Label Style (normal, bold, italic)
  • set the Field Size (number of columns)
  • set the number of Rows (lines)
  • check the Required box to make sure that visitors complete the field
  • add Instructions to give indications

Number. Number fields require a numeric input. They function like text boxes, but have the numeric type of validation preset in the Field Validation box. If your visitors type in letters or other characters, they will get an error requesting them to use numbers.

Number Field

Dropdown List

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

  • indicate, in the Label text box, the information you are interested in
  • type in the Available Choices box the options visitors have got (one per line)
  • add a searchable box 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 [space] and press Enter – 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 Show no. of choices left option.
  • the Import link will take you to a lightbox from where you can import lists of days of the week, months of the year, age, years, continents, US states, EU states, World States, numbers from 1 to 50.
  • preselect a value in the Default Choice section

e) Radio Buttons. Option lists can also be rendered through radio buttons.

  • type in the Available Choices box the options visitors will choose from
  • import lists of days of the week, months of the year, age, years, continents, US states, EU states, World States, numbers from 1 to 50 by clicking on the Import link
  • in the Field Layout dropdown, choose whether your radio buttons will show on one, two or three columns or side by side
  • tick the Accept Other Values box to allow visitors to enter an option of their own
  • 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

Radio Buttons

Checkboxes

f) Checkbox. Checkboxes are multiple choice lists. Visitors may tick as many options as they wish.

  • type in the Available Choices box, line by line, the available options
  • import common lists (days of the week, months of the year, age, years, continents, US states, EU states, World States, numbers from 1 to 50) 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 Field 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.

g) 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.

Headings

Likert Scales


h) Likert Scales. Likert scales are elegant ways of eliciting your visitors’ opinions (from most to least favorable). Visitors will check one of the five (or more) options available for each statement.

  • choose, in the lightbox that appears after you have clicked on the Likert Scale button, the number of statements that you want to create and the scale type: degrees of agreement, importance, probability, satisfaction or quality (or create a scale of your own)
  • press Create and statements will then be added to your form; click on a statement and customize it in the panel that appears on the left side
  • insert the statement text in the Label box and choose a Label Style (normal, bold, italic)
  • check the Required box to make sure visitors state their opinions and type in any necessary instructions
  • adjust your scale by using the Customize Likert Scale link at the panel top; create new degrees or import predefined ones
  • add another statement by using the Insert New Statement link at the panel top; when you press it, an untitled statement will be added below the already existing ones
 


i) Email. Email fields are preset to accept email addresses only.

  • specify a field title in the Label text box and choose the Label Style
  • specify, in the Field Size box, the length accepted for your visitors’ email addresses
  • make sure the Field Validation dropdown is set on the email option; this way, the user input will have to meet the particularities of an email address (name@domain.com)
  • check the Required box if email input is mandatory and, if you want to be more specific, add Instructions (e.g. Please type in your personal address; Please type in your company address)

Email Field

Website URL form field

j) Website. Website fields require the URL of a webpage.

  • specify a field Label and choose the Label Style
  • set the accepted length of the URL in the Field Size box
  • make sure the Field Validation dropdown is set on the URL (webpage) option – visitors will only be allowed to enter URLs
  • according to your preferences, check the Required box and add fill-in Instructions
Carina Staerck

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!

August 24, 2015 12:03
Laura

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!

August 21, 2015 08:23
    Olivian Stoica

    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@123contactform.com or via our contact form.

    Thanks!

    August 24, 2015 12:59
Stephen

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

Thanks!

June 01, 2015 02:13
    Olivian Stoica

    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.123contactform.com/docs/how-to-change-the-font-family-for-form-inputs/

    For further assistance, don’t hesitate to contact our Support Team at support@123contactform.com or via our contact form.

    Thanks!

    June 02, 2015 06:18
daniel

I Am trying to insert a form in my front page but I could please could you help me

May 13, 2015 03:54
    Olivian Stoica

    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 PublishEmbed Code section of your form?

    For technical assistance, don’t hesitate to contact our Support Team at support@123contactform.com or via our contact form.

    Thanks!

    May 14, 2015 06:09
Rosy

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

February 23, 2015 06:10
Rosy

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

February 23, 2015 10:41
    Olivian Stoica

    Hello Rosy!

    To submit a feature request, please fill in our suggest a feature form. It will be published in the Feature Requests section of our Knowledge Base, where other users can vote it. Requests with the highest votes will be included in our To-Do List.

    For questions or assistance, don’t hesitate to contact our Support Team at support@123contactform.com or via our contact form.

    Thanks!

    February 24, 2015 07:29

Leave a Reply

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