ACF Forms with fully customisable live previews as the form is updated

Version 1.6.6 of Advanced Forms Pro was released just a few days ago and with it came some interesting little enhancements to the calculated field that allow you to do the following:

Trigger calculated field rerenders whenever needed.
Intercept the rendered preview markup and append it anywhere you need it on the page.

This is all made possible by building on top of the Advanced Custom Fields JavaScript API which ensures the code you need to write is simple, clean, and stable.

Why would you use these enhancements?

These enhancements make it possible to build more complex form previews that update while the user enters their data in the form. For an example of this in action, just take a look at our plugin review form.

The ability to trigger updates whenever you like makes it possible to have the field rerender on keystrokes, button clicks, timer intervals, or any other type of on-page event that you can intercept via JavaScript.

The ability to control where the preview renders on the page offers even more possibilities as your preview will no longer be confined to the form’s markup – you can append the output to any HTML element on the page making it possible to have your form in one place and the rendered preview somewhere completely different!

How to trigger calculated field updates

Triggering calculated field update is really easy using any of the following formats:

      
        // This is the simplest format available and will trigger the update for 
      
        // all calculated fields on the page
      
        acf.doAction( 'af/field/calculated/update_value' );
      
        // You may target specific fields by field name
      
        acf.doAction( 'af/field/calculated/update_value/name=FIELD_NAME' );
      
        // You may also target specific fields by field key
      
        acf.doAction( 'af/field/calculated/update_value/key=FIELD_KEY' );

view raw advanced-forms-pro-calculated-field-update-trigger.js hosted with ❤ by GitHub

How to control where the rendered preview appears

Intercepting the return values is also really easy and offers the same field targeting capabilities as the triggers:

      
        // This will intercept the rendered calculated field and insert the markup
      
        // into an element with the id `#preview-container`
      
        acf.addAction( 'af/field/calculated/value_updated', function( value, field, form ) {
      
          $('#preview-container').html(value);
      
        });
      
        // You may intercept the return values of specific fields by field name
      
        acf.addAction( 'af/field/calculated/value_updated/name=FIELD_NAME', function( value, field, form ) {
      
          // …
      
        });
      
        // You may also intercept the return values of specific fields by field key
      
        acf.addAction( 'af/field/calculated/value_updated/key=FIELD_KEY', function( value, field, form ) {
      
          // …
      
        });

view raw advanced-forms-pro-calculated-field-update-intercept.js hosted with ❤ by GitHub

Calculated field enhancements in Advanced Forms Pro version 1.6.6

Why would you use these enhancements?

How to trigger calculated field updates

How to control where the rendered preview appears

Further reading

	// This is the simplest format available and will trigger the update for
	// all calculated fields on the page
	acf.doAction( 'af/field/calculated/update_value' );

	// You may target specific fields by field name
	acf.doAction( 'af/field/calculated/update_value/name=FIELD_NAME' );

	// You may also target specific fields by field key
	acf.doAction( 'af/field/calculated/update_value/key=FIELD_KEY' );

	// This will intercept the rendered calculated field and insert the markup
	// into an element with the id `#preview-container`
	acf.addAction( 'af/field/calculated/value_updated', function( value, field, form ) {
	$('#preview-container').html(value);
	});

	// You may intercept the return values of specific fields by field name
	acf.addAction( 'af/field/calculated/value_updated/name=FIELD_NAME', function( value, field, form ) {
	// …
	});

	// You may also intercept the return values of specific fields by field key
	acf.addAction( 'af/field/calculated/value_updated/key=FIELD_KEY', function( value, field, form ) {
	// …
	});

Why would you use these enhancements?

How to trigger calculated field updates

How to control where the rendered preview appears

Further reading

Good dev stuff, delivered.