Victor Font

Firefox Default Value Bug? The Work Around

Summary

We recently encountered a strange bug while working with Firefox in our MacOS development environment. This environment runs Apache 2.4.54, PHP 8.1.8, and MariaDB 10.8.3. The tested browsers are:

  • Firefox 102.0.1
  • Safari 15.6
  • Chrome 103.0.5060.134
  • Firefox Developer Edition 103.0b9

Here's the issue:

While working on a new product release, we modified a form that was first created on August 30, 2021. The form has been working beautifully but needed a modification to support post content types, i.e., Block vs. Legacy.

To implement this feature, we added a new radio to the form using Formidable 5.4.2. A default value was set for this radio button, after we tried a toggle field with a default value set. Firefox did not display the default value for either of these new fields. The default values worked as they always have on the fields that were already on the form. It just didn't work for the new fields.

What makes this behavior suggestive of a Firefox bug is the fact that the new field default value works in all the other tested browsers. There are no errors being generated anywhere.

To troubleshoot this we first examined the field data in wp_frm_fields to compare old radio button configuration data to the new and the result is that nothing has changed in the data assembly and storage.

Next we tried Firefox in troubleshoot mode. Same problem. Last came a full refresh of Firefox. Same problem. Firefox is not setting the default values on new fields for old forms and we can't figure out why. It also won't display new default values for old fields.

Since we couldn't determine the root cause for this problem, we opened bug reports with both Mozilla and Strategy 11, although we sincerely doubt that the issue lies within the Formidable form, which works in every other tested browser. We wanted to make sure Strategy 11 received a heads-up in case others users start experiencing this issue.

Mozilla provided Firefox 103 Beta to test. Installing the Beta and running triggered an immediate update to 103.0 with the Beta designation removed. It fixed the radio button default value issue, but not other fields.

The first image is Firefox Developer Edition that displays default values correctly. This is the same result as Safari and Chrome. The second image is the same form in Firefox 103.0.

Image of form as displayed by Firefox Developer Edition
Firefox Developer Edition 103.0b9
Image of form as displayed by Firefox Version 103
Firefox 103.0

The function is an old field where a default value has been added. The radio buttons are fixed. The toggle button is a new field. It does not show "Block" as active even though "Block" is the default value. Formidable's generated code is correct in every case.

Work Around

This jQuery snippet is the workaround we developed for the radio buttons. It can be modified to work with other field types.

Latest Updates

The form works fine in Firefox when first migrated into a new instance WordPress instance the Formidable's Export/Import process. Even after import, adding new fields to the imported form fails to work in Firefox.

Create Interactive Graphs with Chart.js and Formidable

Requirement

A client submitted a Project Application that requested:

  • the creation of an interactive bar chart to calculate and display future values in real time when a "Risk" dropdown is changed on a form
  • the Risk dropdown's selected option changes color and the interactive chart uses the same color as the Risk option
  • interactive colors and interest rates are dynamic and stored in a look up table

Demo Form

This demo form is the result:

Interactive Chart Prototype
Min: $10,000 / Max: $100,000 / Incr: $1,000
50000
$50,000
Min: $1,000 / Max: $10,000 / Incr: $500
5000
$5,000

Mechanics

The chart is an HTML Canvas object that displays in an HTML field. The chart is generated with the Chart.js jQuery library. Chart JS works equally well whether the output is displayed on a view or form.

Initial Deposit and Monthly Contribution Amount are custom slider fields. How to customize these fields to display as currency is explained in the Display Range Slider as Currency post.

The "Risk" dropdown is a standard dropdown field that is populated dynamically from a lookup table with the frm_setup_new_fields_vars filter.

Why use a standard dropdown instead of a dynamic or lookup field? Because the standard dropdown field supports separate values and the dropdown labels and values are provided by the lookup table.

The lookup table is a standard Formidable form consisting of 4 text fields, class name, color value, dropdown label, and interest rate.

Form styling is built on the fly in PHP and injected into the page through the WordPress wp_head action.

jQuery drives the interactive elements and refreshes the chart with new values when the dropdown field's change event fires.

PHP Source

jQuery Source

Display Range Slider as Currency

Summary

This snippet is an updated version of the example found on the Formidable Knowledge Base JavaScript examples page: https://formidableforms.com/knowledgebase/javascript-examples/#kb-format-a-slider-field-value-as-a-currency.

The KB example works for one slider at a time. This version works for multiple sliders on a single page. It also uses the JavaScript standard built-in Intl.NumberFormat object. This object enables language-sensitive number formatting.

To use this snippet, follow the same directions as found in the KB article with a couple of exceptions. The HTML needs to be modified to use the [key] shortcode to make the code generic, and the CSS needs to be modified to apply to multiple sliders.

For the custom HTML in Step 1, drop the following span into each slider on the page as instructed in the KB article directly after the [input] shortcode:

<span id="field_[key]_display" class="frm_range_value_currency">$50</span>

Demo Form

Multiple Range Slider Currency Demo
50
Min: 0 | Max: 100 | Incr: 1
Min: $1,000 | Max: $10,000 | Incr: $500
5000
$5,000
Min: $10,000 | Max: $100,000 | Incr: $1,000
50000
$50,000

Snippet

Here's the jQuery code that should be placed in the form's After Fields section on the Customize HTML page:

Final tips:

  • don't forget to add the multiple slider ids to the recommended CSS from the KB article. (Step 2)
  • the field descriptions for the demo sliders are moved to a position above the [input] shortcode on the form's Customize HTML page

CSS

Here's the modified CSS:

Customize HTML

Here's the modified HTML for the formatted sliders used in the demo form:

Formidable Visual Views and CPT Templates

Introduction

Custom Post Types (CPTs) in WordPress have been supported since version 3.0. With the release of WordPress 3.1, the ability to use custom templates for CPT displays was added.

Formidable can create CPTs with its Create Post add-on available with any premium license. When you use the Create Post add-on, you can add custom fields to your post/page or integrate form data with custom fields created with Advanced Custom Fields or any other tool or process you use to create custom fields.

Formidable Visual Views is game changer for developers. With Visual Views, any developer can create stunning views and CPT displays. All that's required is a little knowledge of CSS grid and flex box, and before you know it, you'll be creating incredibly useful content displays.

The Formidable knowledge base explains how to Create Posts, Pages, and Custom Posts using the Create Post add-on. It also explains how to map fields and create a view by writing custom content.

This tutorial teaches how to create a CPT that doesn't require any custom fields at all and display the associated form entry with a Visual View added to a custom CPT template.

Developers Directory CPT

When a user enrolls for inclusion in our Developers Directory, a CPT is created so the developer can refer to their own contact information without searching the directory. We create the CPT with the Create Post add-on and only include content that is necessary to create the post. Of course, the CPT definition has to exist first. For this, we use the CPT UI plugin, which is configured as follows:

Custom Post Type UI Developer CPT Configuration
Custom Post Type UI Developer CPT Configuration

Take note of the right-most column titled "Template Hierarchy". This is important for naming our CPT template.

Once the CPT is created, you can configure the Create Post add-on as follows.

Formidable create post add-on configured for developer CPT
Developers Directory CPT config

Notice, we are not using any custom fields in the CPT. We are only using content from the form entry necessary to create the CPT.

We use a separate field in our form for Post Title because of how Formidable manages this field when editing the integrated form entry.

If you edit the field linked to the post title, Formidable populates the form field from the title of the CPT instead of just using the content in the form entry that would be the same as the post title anyway. The reasoning behind why the Formidable developers chose this particular way to edit this field escapes our logic.

Without adding custom fields to the CPT, the CPT's post id is the only link back to the form entry. When the Create Post add-on creates a CPT, the WordPress post id is saved in the form entry's post_id field that is stored in the wp_frm_items table. See Formidable's Database Schema to learn more.

CPT Template

Here's the CPT template that displays the view using the developer directory content.

This template is named single-developer.php. It is stored in our theme's root directory. Why did we name it single-developer.php? We named it single-developer.php because this is what the WordPress template hierarchy system expects.

WordPress will work through the template hierarchy and use the template file it comes across first. So if you want to create a custom template for your acme_product custom post type, a good place to start is by copying the single.php file, saving it as single-acme_product.php and editing that.

Extracted from https://developer.wordpress.org/themes/template-files-section/custom-post-type-template-files/

To provide more clarity, here's the template hierarchy column from the CPT UI configuration screen for our developer CPT:

Here's the link to the WordPress Template hierarchy Theme Handbook referenced in the image.

Code Walk Through

This site is built upon the foundation provided by the Genesis Framework. Our single-developer.php template is designed to work with the Genesis Framework.

Since no author can predict what development frameworks, page builders, or themes every user that reads this article uses, this code walk through will be useful to get you started with how to create your own template for your specific environment.

The first three lines of this template set the environment for our custom template:

remove_filter( 'the_content', 'wpautop' );
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
add_action( 'genesis_entry_content', 'masterminds_display_developer_details' );

The first line removes the WordPress wpautop function from the content. Wpautop can play havoc with a visual view's display by automatically adding paragraph tags where they don't belong.

The second and third lines are Genesis Framework specific. The second line disables the standard way Genesis displays content using the WordPress loop and the third line tells Genesis to use our custom code instead.

The balance of this template has three custom functions. The callback function for our custom add_action is masterminds_display_developer_details(). The masterminds_get_directory_entry_id() and masterminds_get_entry_id_by_post_id( $post_id ) functions retrieve the entry ID that is passed as a filter parameter to the view.

To see an example of how this works see: https://formidable-masterminds.com/developer/jones-web-designs/

Disable Copying Email Address into Email Confirmation Field

Roberto Alverez asked this question in the Formidable Community forum:

How I can disable pasting into the email confirmation field? I need to prevent the users from copying and pasting the confirmation email if it contains errors.

Roberto Alverez—Formidable Community Forum

This is a common requirement and one that needs to be satisfied with JavaScript. Of course, there's nothing that can prevent any user from purposefully entering a fake email address into either the email or email confirmation field. However, if the email address is spelled wrong in the email field, copying and pasting it into confirmation exacerbates the problem.

To make this as bullet proof as possible, this JavaScript snippet not only prevents copying and pasting, but also disables drag and drop and the browser's autocomplete function when targeted at the email confirmation field.

To use this snippet, change "field_conf_29yf4d2" to the input id of your email confirmation field and copy the script into the After Fields area on your form's Customize HTML page.

Formidable Form/Field Keys Easy Display/Edit Shortcode

Bulk Editor for Form and Field Keys

Thank you for purchasing the Formidable Form/Field Keys Easy Display/Edit Shortcode. We hope you find it as useful for your Formidable development projects as we do for ours.

Installation

To install this code, do any of the following:

  • Copy this code into a snippets plugin
  • Copy this code into functions.php
  • Load this as a library using include or require

Usage

Basic shortcode to display all forms and fields:

[devtool_display_form_fields]

Optional parameters to view one form at a time:

  • [devtool_display_form_fields frm_id=1]—searches by form_id to display single form/field
  • [devtool_display_form_fields frm_key="contact-form"]—searches by form_key to display single form/field

Additional Optional parameters:

  • show_logo—boolean default true, enables/disables Mastermind Developer insignia on single form/field display.

    Example: [devtool_display_form_fields show_logo="false"]

  • enable_edit—boolean default false, enables/disables form/field Ajax key editing. Works for all forms or single display.

    Example: [devtool_display_form_fields enable_edit="true"]