AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and a few others. Learn more and download the AngularJS library. You can use AngularJS examples to more easily do a few things that are not as simple with JavaScript.
If you would like to stick strictly to vanilla JavaScript and jQuery, see these examples.
Utilize user input in field labels
This AngularJS example makes it easy for a field label title to reflect what the user typed in a previous field in the same form. For example, if a user types their name in a field, and you want for their name to show up in a field label of another field in the same form, you can use this example.
Note: This example is not configured to work with multi-page forms and will require additional customization.
- Download the AngularJS library and install it on your site (recommended) or add a link to the library in Customize HTML > "Before Fields":
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
- At the end of the "Before Fields" section in Customize HTML, add:
<div ng-app="">
and add:
Formidable Forms is the best WordPress Form Builder plugin. Get it for free!</div>
at the top of the "After Fields" section.
- For each field that you want to use in another field's label, add:
ng-model="field-name-here"
inside the input shortcode. For example, if I have a Name field and I want to make use of the user's name in another field label, I would change my input shortcode for the Name field from [input] to:
[input ng-model="Name"]
- In the Form Builder, for each field input that I set up on the back-end, add {{field-name-here}} to the field Label. For example, with the case of using the user's name, I would add a field label like this: "Tell us something about yourself, {{Name}}"
Now when you preview the form and type 'Robert' in the "Name" field, the next field label should read: "Tell us something about yourself, Robert".
