Formidable Forms

The Most Advanced WordPress Forms Plugin and Form Builder

  • Features
  • Pricing
  • Blog
  • Support
  • Login
  • Get Formidable Forms

AngularJS Examples

Last Updated: April 28, 2020

Knowledge Base → Extend Formidable Forms → JavaScript Examples → AngularJS Examples

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.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

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.

  1. 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>

    AngularJS Examples before fields

  2. At the end of the "Before Fields" section in Customize HTML, add:
    <div ng-app="">

    and add:

    </div>

    at the top of the "After Fields" section.
    AngularJS Examples After Fields Content

  3. 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"]

    AngularJS Examples Input Shortcode Changes

  4. 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}}"
    AngularJS Examples Field Label Example

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".
AngularJS Examples Final Example of Functionality

Related Topics

  • JavaScript Examples
  • Utilize user input in field labels
  • Related Topics
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms
Install Formidable Lite

Using WordPress and want to get Formidable Forms for free?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact

Top Features

  • Front End Editor
  • Repeating Fields
  • Views from Entries
  • Calculator Forms
  • Conditional Logic
  • Visual Form Styler
  • Form Templates
  • User Submitted Posts
  • File Upload Forms
  • Spam Protection
  • Multi Page Forms
  • Surveys & Polls
  • Form Graphs & Charts
  • Save and Continue
  • Mobile Forms
  • Stripe Forms
  • PayPal Forms
  • WooCommerce Forms
  • MailChimp Forms
  • User Registration
  • Signature Forms
  • Bootstrap Forms
  • Quiz Maker
  • Zapier Forms
  • Salesforce Forms
  • HubSpot Forms
  • API Webhooks
  • Multilingual Forms
  • Directories

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • Blog

Copyright © 2021 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started