Learn how to improve the accessibility and functionality of your forms by pre-populating form fields with default values.
Note: While this feature is available for all platforms and all of our form widgets, it requires the widget the be added to the website via the “HTML” method, i.e. by copying the widget’s HTML code:
And adding it to your website builder. For more information, you can visit our help center for individual platforms.
Once you’ve added the widget to your website via the “HTML” method, follow these steps to pre-populate the form’s fields. In this article, we will use the Contact Form as an example.
- In your form widget’s editor, click on the “Content” icon, and from the “Form Fields” section, select the field you would like to add data to.
- Open the selected field, you should see a “Field ID” section with a copy icon on the right, click on the icon to copy the field ID.
- Open your console, and write the following code:
encodeURIComponent(JSON.stringify({
'field-id': 'value'
}));
Learn how to open your console using this Google Chrome article.
Replace "field-id" with the ID you copied and "value" with the default value you want to add to the field.
- Copy the returned string.
- Now, go back to your website’s editor, select the Common Ninja’s form widget, and edit its HTML code, like so: within the “div” element, add the “comp-props” attribute and paste the string you’ve copied above.
- And that's it!
When you view the page, you should see the default value you’ve added to the form field.
If you need assistance, feel free to contact our support team.