Tips & Tricks

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.

Strip Non-numeric Characters from Phone Numbers

Whenever you capture a phone number on a form, wouldn't be nice to also capture a version of the number that can be used in a tel: link on a view?

Here's a jQuery snippet that will do just that and store the value stripped of non-numeric characters in a hidden field with the exception of the plus sign as used in a country code.

As an example, +1 123-456-7890 becomes +11234567890.

Add Currency to Formidable’s Global List

Question:

I need to use a currency that is not included in the “Formidable -> General Settings -> Currency” settings. Is there a way I can add additional currencies?

Albert Opoku—Formidable Slack Community

Answer:

Formidable Pro provides a frm_currencies filter that allows users to add additional currencies to Formidable's global currency list. The example in the linked knowledge base article only demonstrates how to modify an existing currency, not how to add new currencies. There's also a significant error in the example. Instead of using add_filter, the example uses apply_filters.

This code snippet adds the Eastern Caribbean dollar to Formidable's currency list:

Use Hidden Text Fields for data-

This Mastermind tip comes from Nathanael at Formidable Support. Thank you Nathanael!

Problem

Maybe we've never noticed this before, but it was pointed out in the Formidable Slack community that the source code for hidden fields does not display on the form's Customize HTML page. In business applications, hidden fields are not only used for their ability to hide values, but can also be used to hold custom or data- attributes. Not having the source code available to add these attributes is, quite frankly, a bummer.

Solution

The solution is actually quite simple and we're a little embarrassed we didn't think of it first. But thanks to Nathanael from Formidable's Great Support Team, here's the solution:

We recommend using any standard field type that suits your need and then hiding it with CSS. Fields that are not Hidden Fields can still be hidden from view by using the Formidable CSS class frm_hidden.

There it is! Simple and yet elegant.

Retrieve Upload Filename and Path

Question:

Does anyone know how to return the filename with path for a File Upload field?

Nick Amis, Formidable Slack Community

This is a simple question, but the answer is somewhat elusive.

File Upload Field

First, let's gain an understanding of Formidable's file upload field. For one reason or another, the file upload field has had gone through several revisions over the course of its history. In its current incarnation, it uses the popular DropzoneJS library to drive its functionality. DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It is lightweight and doesn’t depend on any other library. It's also highly customizable.

When you upload a file through the file upload field, it is immediately uploaded to a directory on your server. Formidable creates its own directory for uploaded files, which you can find under wp-content/uploads/formidable.

When you click the submit button on a form with the file upload field, any uploaded files are added to the WordPress media library. Normally, if you add files to the media library, they are added to the standard WordPress directory structure. But this isn't the case with Formidable's file upload field. Formidable's uploaded files remain in the Formidable directory structure and an entry is created in the wp_posts table for the media library item.

Let's analyze how Formidable manages the database transactions. First, we'll query the wp_frm_item_metas table in PHPMyAdmin and search for a file upload field.

If you're not familiar with Formidable's table structure, see this knowledge base article describing the database schema.

The SQL query returns the following results:

SQL query result set in PHPMyAdmin
Results of SELECT * FROM `wp_frm_item_metas` where field_id = '651'

We want to examine the meta value in this result set. The meta value for upload fields is a pointer to the record id in wp_posts that is created the form entry is saved. This means that if we want to retrieve the filename and path, we have to look into wp_posts for the targeted record, and this is what we see:

Result set for wp_posts query in PHPMyAdmin
Result set for SELECT * FROM `wp_posts` where id = '769'

To find the filename and path, we have to scroll to the right:

Result set from wp_posts showing guid field
This section of the result set showing the guid.

The guid, or 'Globally Unique Identifier', contains the filename and path and for this media library entry. In this case, it's:

http://localhost/public_html/wp-content/uploads/formidable/32/calendar-1847346.svg

Answer:

In order to retrieve the the filename and path for the uploaded article, you have to first get the record id from wp_frm_item_metas, then use that value as the parameter passed to the WordPress get_the_guid() function.

Multiple File Uploads

If you have your upload field configured to "Allow multiple files to be uploaded", the process is a little different because Formidable stores the field's meta_value differently in wp_frm_item_metas. For multiple files, the meta_value is stored as a PHP serialized array:

a:2:{i:1;i:797;i:2;i:798;}

Serialized arrays need to be unserialized before you can use them. You can then loop through the resulting data set to retrieve each uploaded file's guid.

Taming E2PDF Saves

This Mastermind tip is contributed by Rob Levine (@RobL) from the Formidable Slack Community. Thank you Rob!

Problem

I am using e2PDF to create a PDF of a submitted Formidable Form. The difference for me is that I both want to save it to the server and do it without the user knowing (or caring) that it’s happening. While the e2PDF documentation has excellent shortcode descriptions, it falls very short of telling you where to use the shortcodes in the Formidable Forms or Views. Formidable suggests using it as part of the Submit message.  In my case that didn’t work because I would need to redirect to a landing page to be able to use the shortcode or use an unnecessarily complex AJAX solution.

Solution

The solution is to use Formidable’s frm_after_create_entry and frm_after_update_entry hooks and, using WordPress’ do_shortcode function, execute the e2pdf-save shortcode. That sounds a little easier than it is because I needed to fill in several e2pdf parameters that differed based on which form was being submitted. Here is the example code I used with my specifics stripped out.