Form Editor

Page content
  1. Introduction
  2. Basic Fields
  3. Advanced Fields
  4. Field Validation
  5. Form Layout
  6. Form Preview

FAQs
  1. Does the form editor have real-time preview?
  2. Do you offer form validation?
  3. Characters are not displayed properly in my form and submission emails. What to do?
  4. Can my visitors upload files using my contact form?
  5. I don’t receive uploaded files as attachments, but as download links. Why?
  6. How to delete a field?
  7. How to adjust form width?
  8. How to change the name of my form?
  9. What are compact forms and how to use them?
  10. Can I use images as options in a radio buttons list?
  11. Can I set a default value for a choice form field?
  12. How can I place labels on top of fields?
  13. How to remove the Submit button?
  14. How can I hide the Calculate button?
  15. How can I replace the subfield named Region with State?
  16. I set a smaller form width. Why is there no change?
  17. Why can’t I use the File Upload field?
  18. How to edit the Submit button?
  19. How to add a Reset button to the form?

 

Introduction
The form editor allows you to create and customize the structure of your form.

You can add and edit basic and advanced fields, drag and drop sections, adjust the form layout and preview the result in real time.

The fields panel is placed on the left side of your page, split into Basic and Advanced.

Basic Fields
As basic fields, you may use text boxes or areas, numbers, dropdown lists, radio buttons, checkboxes, headings and Likert scales. 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

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

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

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 intereseted in
  • type in the Available Choices box the options visitors have got (one per line)
  • 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
  • the Import link will take you to a lightbox from where you can import lists of days, months, years, continents, US States etc.
  • 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, months, years, continents, states 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
  • preselect a value in the Default Choice section

f) Checkboxes. 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, months, years, continents, states) using the Import link
  • 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

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.


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

Advanced Fields
Advanced fields provide a wide range of options for requesting contact data from your submitters (name, email, address, phone, website), as well as other information, such as date, time or price. You can also embed images, Google maps or HTML blocks and invite your submitters to upload files.

a) Name. This field is specially designed to request a person’s first and last name. Label it, then select the Label Style (bold, normal, italic), check the Required box to make sure visitors type in their names and add any necessary Instructions.

b) 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)

c) Address. This field asks for the visitor’s physical address. You can Label it, choose its Style, specify whether it is a Required field and add Instructions. In terms of structure, this field contains two Street Address lines, separate text boxes for City, Region and Postal/Zip code and a Country dropdown.

d) Phone. Phone fields are structured into three boxes with space for 3-3-4 characters. This field only accepts numeric values.

For fields with a specific type of validation, visitors will get an error message if they provide other types of values than the indicated ones.

e) 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

f) Date. This field requires visitors to enter a date (birthday, delivery date etc.)

  • label and style the field
  • use the Required box to make sure visitors specify a date and add, if necessary, Instructions
  • choose the Date Format – either mm/dd/yyyy or dd/mm/yyyy
  • when filling in the date, visitors may type it or click on the icon that appears next to the field; this will open a calendar that allows going through days, months and years

g) Time. Time fields require visitors to enter time coordinates, by specifying – in separate boxes – the hour and the minutes and choosing between AM and PM in a dropdown list.

Time fields work very well with Event Registration Forms (asking for guests’ expected time of arrival), with Order Forms (asking for preferred delivery time interval) or even with Surveys (asking for opinions concerning working hours).

h) Price. Ask visitors to specify a price by using this customized field.

  • after labeling and styling the field, choose your desired Currency (dollars, euros, pounds and many other options)
  • you may use the Hide price decimals checkbox to ask for a round price

 
i) 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)
  • insert ordered or unordered lists, apply text indentation and use sub- or superscription
  • 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, 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 Submit
  • 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
  • insert horizontal rules by using the last customization option in the HTML block lightbox


j) File Upload. Upload fields allow visitors to upload different types of files.

  • label and style the field, then add any necessary instructions
  • the supported file types for upload are: .gif, .jpg, .jpeg, .txt, .pdf, .doc, .zip, .rar, .png, .dwg, .tiff, .dxf, .stf, .bmp, .psd, .eps, .ai, .mp3, .mpeg4, .docx, .xlsx, .xls, .rtf, .odt, .ott, .ppt, .ppsx, .pptx, .pps, .wmv, .avi, .flv, .mov, .3gp
  • if the total size of the uploaded files exceeds 5MB, instead of being sent as attachments, they will be sent as direct download links

 

k) Google Maps. Google Maps can be integrated with your form to provide precise details concerning a specific location. Press the Customize Map link and type the location coordinates in the customization lightbox. Set the map width, height and zoom and click on the Update Map Preview button to view changes.

Google Maps are highly useful and appealing when used with event registration forms.



l) Images. You can use images to personalize your form. Click on the Customize Image link and specify the image URL or upload an image from your computer. Use the Align dropdown to position your image: left, right or center.



m) Social Buttons. By adding Social Buttons to your forms, you’ll make it very easy for your form visitors to recommend your form on Facebook, Google+, Twitter and LinkedIn. After you’ve added the Social Buttons field to your form, click on it in the main view of your editor to open the Edit panel.

Place the social icons to the left or right side of your form by selecting your preferred option in the Align dropdown list. Select, in the Buttons section, the social network icons that you want displayed within your form. If the Show count option is ticked, then the number of likes, +1′s, tweets and LinkedIn recommendations gathered by your form will be shown right next to the social buttons. Untick the option if you don’t want these counts to be public.

 

Field Validation
Field Validation allows you to accept only the data that meets your required format. You can choose from predefined validation types or create custom validation codes. The predefined types are:

  • alpha – only letters
  • alphanumeric – letters and digits
  • alphaspace – letters and white spaces
  • alphanumericspace – letters, digits and white spaces
  • numeric – only digits
  • numericplus – digits and the characters +, -, .
  • email – email addresses
  • URL (webpage) – webpage URLs (e.g. http://123contactform.com/docs/)
  • date – YYYYMMDD – date as year/month/day
  • date – DDMMYYYY – date as day/month/year
  • date – MMDDYYYY – date as month/day year
  • date – MMDDYYYY + picker – date as month/day/year and a calendar in which users can pick the date instead of typing it in
  • date – DDMMYYYY + picker – date as day/month/year and a calendar in which users can pick the date instead of typing it in
  • date – MMYYYY – date as month/year
  • time – time coordinates (hours and minutes)
  • custom

With custom validation, you can define your own validation code. Choose Custom in the validation dropdown list and type your code in the box that shows up. The code will have a format such as CCCCNNAAAAAANN. The code letters that you may use are:

  • C – character (letter)
  • N – numeric (digit)
  • A – alphanumeric (letter or digit)
  • L – lowercase letter
  • U – uppercase letter
  • S – white space

If your form requires even more complex field validation, contact us and we’ll help you get it done.

 

Form Layout
The Form Layout panel is available at the page top. Here, you can specify your form’s width and encoding, choose whether it is displayed in one or two columns and position labels (field titles) and instructions.

 

Form Preview
Your form is updated automatically in the main page section. You can easily drag and drop fields to rearrange your form, remove fields or have one-click access to field customization. The Preview button opens a lightbox that shows your form the way it will be seen by submitters.

 

Does the form editor have real-time preview?
Yes, the form editor has professional real-time preview. As soon as you add or edit fields in the left panel, you’ll see the changes in the main view.

 

Do you offer form validation?
Yes, we offer form validation. This way, you will never receive emails that you can not answer because the user misspelled the email address, nor will you receive phone numbers containing unwanted letters, entered by mistake. You can use a wide variety of field validation options: alpha (only letters), alphanumeric (letters and numbers), alpha space, alphanumeric space, numeric, numeric plus, email, URL, date (as yyyymmdd, ddmmyyyy, mmddyyyy) and many others.

 

Characters are not displayed properly in my form and submission emails. What to do?
For special characters you will need to select the appropriate encoding (Hebrew, Arabic, Greek, Thai etc.) to have your form and submission emails displayed properly.

In your form editor, click on the Form Layout section at page top to unfold the panel.

Open the Form Encoding dropdown and select the character encoding corresponding to your region. This way, form text and submission emails will be displayed correctly.
Before trying to find your own encoding, always give UTF-8 a try. It works best in most cases. Also, make sure to check both your form and email message while using the same encoding value.

 

Can my visitors upload files using my contact form?
Yes, your visitors can upload files using your contact form. Use the File upload field to do this.

 

I don’t receive uploaded files as attachments, but as download links. Why?
This happens when a submitter uploads files with a total size larger than 5MB. In this case, you will not receive the attachments in your mailbox, but the direct download links. Click on them to download files.

 

How to delete a field?
Simply click on the form field that you want to delete in the main view section. When a field is selected, it becomes highlighted and a closing button appears in the top right corner. Press it and you’ll get a confirmation alert. Choose OK to remove your field.

 

How to adjust form width?
To adjust form width, go to your Form Editor and open the Form Layout panel at page top. Type your desired width in the Form Width box.

 

How to change the name of my form?
To change the name of a form, visit your Form Editor (if you’re in the My Forms section, select the form that you want to rename and click on the first option – Edit). After you’ve opened the editor, spot the form name – it is placed at page top, right below the main menu and right above the form builder wizard. Click on the form name, delete the old name and type in the new one.

 

What are compact forms and how to use them?
When you use compact form fields, the field name will be displayed within the input box or text area. The text will disappear as soon as your form visitor clicks on it. The width of your form will be smaller and the form will fit easier in your web page.

This feature can be used for the following form fields: Text Box, Text Area, Number, Email or Website.

After adding a field to your form, click on it in the main view to open the Edit panel. In the Options section, check the Compact Field box.

 

Can I use images as options in a radio buttons list?
Yes, you can. Create a regular radio buttons list. Instead of typing text in the Available Choices box, paste the images URLs, one on every line. The images will show up in your main view.

 

Can I set a default value for a choice form field?
Yes, you can set default values for dropdown lists and radio buttons fields. After you’ve typed the options in the Available Choices box, they are loaded in the dropdown list right below, Default Choice. Select the one that you want to have preselected in your choice field.

 

How can I place labels on top of fields?
Go to your Form Editor, open the Form Layout panel and choose Top Aligned in the Label Placement dropdown list.

 

How to remove the Submit button?
If you want to remove the Submit button from your form, go to your Settings → Themes section and click on Use Custom CSS. Then, with the Code tab selected, paste the following code: #id123-button-send {visibility:hidden;}. Click on Save. Basically, you’re telling the Submit button not to be displayed.

 

How can I hide the Calculate button?
If you want to hide the Calculate button in your order form and direct users straight to the purchasing part, go to your Settings → Themes section, click on Use Custom CSS and paste this code: #id123-button-calc {display: none;}. Save the settings.

 

How can I replace the subfield named Region with State?
To have a State subfield instead of a Region one in your Address field, go to your Translations section, click Add Translation, type State in the text box and choose Region in the dropdown list. Save the translation and check your form in preview.

 

I set a smaller form width. Why is there no change?
Sometimes, when you try to adjust the form width in the Form Layout panel, the change does not apply to the form. This is most probably because some of the fields in your form don’t allow the form width to change. For example, if there is a text box or a text area set on a 100-columns size, you need to make it smaller, in order to allow the form to have a smaller width. Go to your Form Editor, click on the field and, in the Edit Field panel that opens on the left side of the page, under Field Size, set a lower value, like 25.

 

Why can’t I use the File Upload field?
On the free plan, you are not allowed to use the File Upload field. Have a look at our Features Matrix.

 

How to edit the Submit button?
To edit the Submit button, go to your Form Editor and click on the Submit button area (not on the button itself). Its Edit Field panel will open on the left side of the page. There, you can change the text displayed on the Submit button. If you want to customize the button in terms of appearance, then customize the form theme.

 

How to add a Reset button to the form?
The Reset button clears user input and allows users to start over. To add a Reset button to your form, click on the Submit button area to enter its Edit mode. Tick the checkbox Show Reset Button. When you do so, a new input box will be displayed, where you can edit the text shown on the Reset button.

2 thoughts on “Form Editor”

  1. Pingback: Free Online Survey Template Collection | Facebook Surveys Blog

  2. Pingback: Online Market Research Survey | Facebook Surveys Blog

Leave a Reply

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

*