Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Form Render - No Text Field Labels / Broken when translating messages

See original GitHub issue

When rendering the form the text field labels are being used as placeholders. I noticed that this problem was due to the translated subtype messages. Instead of text, password, email, color it displays Option 0, Option 1 … You should update your Docs (and be more careful with it). For now I’ll just comment out the subtype messages.

Notice the fields added clicking repeatedly (mentioned in another issue) formbuilder formbuilder2 formbuilder3

Here is the json that generates the javascript object I’m using in messages option (it is a copy of the default options in the docs): (I’m using localization)

        "addOption": "Add Option",
        "allFieldsRemoved": "All fields were removed.",
        "allowSelect": "Allow Select",
        "autocomplete": "Autocomplete",
        "button": "Button",
        "cannotBeEmpty": "This field cannot be empty",
        "checkboxGroup": "Checkbox Group",
        "checkbox": "Checkbox",
        "checkboxes": "Checkboxes",
        "className": "Class",
        "clearAllMessage": "Are you sure you want to clear all fields?",
        "clearAll": "Clear",
        "close": "Close",
        "content": "Content",
        "copy": "Copy To Clipboard",
        "dateField": "Date Field",
        "description": "Help Text",
        "descriptionField": "Description",
        "devMode": "Developer Mode",
        "editNames": "Edit Names",
        "editorTitle": "Form Elements",
        "editXML": "Edit XML",
        "enableOther": "Enable 'Other'",
        "enableOtherMsg": "Permit users to enter an unlisted option",
        "fieldDeleteWarning": false,
        "fieldVars": "Field Variables",
        "fieldNonEditable": "This field cannot be edited.",
        "fieldRemoveWarning": "Are you sure you want to remove this field?",
        "fileUpload": "File Upload",
        "formUpdated": "Form Updated",
        "getStarted": "Drag a field from the right to this area",
        "header": "Header",
        "hide": "Edit",
        "hidden": "Hidden Input",
        "label": "Label",
        "labelEmpty": "Field Label cannot be empty",
        "limitRole": "Limit access to one or more of the following roles:",
        "mandatory": "Mandatory",
        "maxlength": "Max Length",
        "minOptionMessage": "This field requires a minimum of 2 options",
        "name": "Name",
        "rows": "Rows",
        "value": "Value",
        "no": "No",
        "number": "Number",
        "off": "Off",
        "on": "On",
        "option": "Option",
        "optional": "optional",
        "optionLabelPlaceholder": "Label",
        "optionValuePlaceholder": "Value",
        "optionEmpty": "Option value required",
        "other": "Other",
        "paragraph": "Paragraph",
        "placeholder": "Placeholder",
        "placeholders": {
            "value": "Value",
            "label": "Label",
            "text": "",
            "textarea": "",
            "email": "Enter you email",
            "placeholder": "",
            "className": "space separated classes",
            "password": "Enter your password"
        "preview": "Preview",
        "radioGroup": "Radio Group",
        "radio": "Radio",
        "removeMessage": "Remove Element",
        "remove": "×",
        "required": "Required",
        "richText": "Rich Text Editor",
        "roles": "Access",
        "save": "Save",
        "selectOptions": "Options",
        "select": "Select",
        "selectColor": "Select Color",
        "selectionsMessage": "Allow Multiple Selections",
        "size": "Size",
        "sizes": {
            "xs": "Extra Small",
            "sm": "Small",
            "m": "Default",
            "lg": "Large"
        "style": "Style",
        "styles": {
            "btn": {
                "default": "Default",
                "danger": "Danger",
                "info": "Info",
                "primary": "Primary",
                "success": "Success",
                "warning": "Warning"
        "subtype": "Type",
        "subtypes": {
            "text": [
            "button": [
            "header": [
            "paragraph": [
        "text": "Text Field",
        "textArea": "Text Area",
        "toggle": "Toggle",
        "warning": "Warning!",
        "viewXML": "</>",
        "yes": "Yes"

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

kevinchappellcommented, Oct 30, 2016

This is related to a subtype issue that was brought up in the gitter chat is will be fixed in the next version.

kevinchappellcommented, May 23, 2017

This is resolved in current version. As a side note, 2.x now also has built-in i18n allowing you to load languages files directly or in conjunction with i18next.js

Read more comments on GitHub >

github_iconTop Results From Across the Web

Translate a field label - Product Documentation | ServiceNow
Navigate to the field on the form. · Right-click the field label and select Configure Label. · In the Field Label form, replace...
Read more >
Auto-generated labels are not translated while rising ... - GitHub
Auto-generated label names, using the humanize filter or not, rises a missing translation warning. Yet, they can neither be detected by ...
Read more >
Translation of big webforms broken [#2836206] |
I'd honestly suggest working out how to translate each form label & description tag individually rather than the entire config object - you...
Read more >
Labeling Controls | Web Accessibility Initiative (WAI) - W3C
Provide labels to identify all form controls, including text fields, ... purpose may be clear enough from the context when the content is...
Read more >
How to display a label having text with line breaks?
Give the label white-space: pre-wrap and it will break line as the text area does. textarea { height: 70px; } label { white-space:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found