Mapping Form Fields
This article assumes you already know how to install the PDF Forms Filler for CF7 plugin and attach a PDF file containing a form to your Contact Form 7 form. It is time to delve into building a form on your website that users can fill out and obtain a filled PDF file either through email or by clicking a download link. This is accomplished by creating CF7 form-tags and setting up mappings between the corresponding fields in the PDF form and the CF7 form.
As an example, this article will use a demo PDF file.
Demo PDF Form Example
Mapping CF7 Fields to PDF Fields
The Field Mapper Tool can be used to configure mappings between CF7 form-tags and PDF fields. It can be accessed by clicking the “PDF Form” button in the form editor.
Field Mapper Tool
The Field Mapper Tool consists of several elements:
- The manual field mapping element with the two dropdown lists, CF7 field/mail-tags and PDF field, which allows creation of manual mappings between individual fields that already exist in your CF7/PDF forms.
- The field mapping creation elements that allow users to create a new CF7 form-tag and map it with a single click or generate form-tags for all remaining unmapped PDF fields, insert them into the CF7 form and link them to their corresponding fields.
- The list of existing field mappings and value mappings. This list can be used to remove no longer needed mappings and add/remove value mappings.
CF7 Field/Mail-Tags Dropdown
The CF7 field/mail-tags
dropdown contains CF7 fields that already exist in the form (as shown in the CF7 Form with Mapped Fields image below) and special CF7 mail-tags that are not associated with CF7 fields.
You can map a CF7 field or a mail-tag from this list to a PDF field. Custom text or a combination of mail-tags can also be used. Read more about special mail-tags in Contact Form 7 Docs.
CF7 Field and Mail-Tags Dropdown
You can edit mail-tags after adding the mapping. Dynamic data can be filled into PDF fields by using appropriate special mail-tags.
PDF Field Dropdown
The PDF field
dropdown contains a list of form fields that exist in the attached PDF file.
PDF Field Dropdown Menu
At the end of the list, you will see duplicate field names with a numeric [ID]
in front of the field name.
The [ID]
fields are tied to specific PDFs. The fields without [ID]
are applied to all attached PDFs. Because multiple PDF files can be attached to a single CF7 form and different files can have the same field names, the same mapping can be used for multiple files.
When you set up the field mapping you can choose which file and field to apply the field mapping to. If you select a field without [ID]
then field mapping will apply to all PDF files with the same field name.
If you need to send different versions of the filled PDF file to the user and the administrator then you should attach the same PDF file twice and map CF7 fields to PDF fields named with [ID]
. You will also need to use the checkbox settings Attach to primary email message and Attach to secondary email message in the options of each file.
Use field mapping with
[ID]
only when you really need it. If you delete the PDF attachment then all field mappings associated with the attachment by[ID]
will be deleted.
If you need to replace your PDF file with a newer version, please replace it on the server directly (via FTP/etc), do not detach it from your CF7 form, otherwise the field mappings associated with your PDF file by
[ID]
will be deleted.
Creating & Mapping Form-Tags
It is possible to create and map form-tags all in a single action in a semi-automatic fashion. To create form-tags for your CF7 form from PDF form fields, you have several options:
-
Insert & Link All button
This is the recommended method. This button allows you to create form-tags for all remaining unmapped PDF fields, insert them into the CF7 form and link them to the corresponding PDF fields with a single click. Tags are inserted at the current cursor position.
-
Insert and Link button
When a field is selected in the PDF field dropdown, the New Tag hint for the selected PDF field is shown under the dropdown. The new form-tag can be inserted into the CF7 form and a mapping can be automatically created by clicking the Insert and Link button. Tags are inserted at the current cursor position.
Insert and Link Button Option
Using any of the above methods should work fine in most cases, however, you must make sure that the format of the mapped CF7 field value matches the required format by the PDF field. For example, there may be problems related to incorrect date format (example:
dd/mm/yyyy
). -
Create and map the form-tag manually
You can create your form-tag manually in the CF7 form and map it to your PDF field by selecting your form-tag in the CF7 field/mail-tags dropdown and clicking the Add Mapping button.
Whichever method you use, your CF7 form should end up looking as follows:
CF7 Form with Mapped Fields
Be sure to save the form once you are done mapping all fields. Form settings don’t get saved until you hit the save button.
Input Formats for PDF Fields
Different PDF field types may require specific input formats. Here’s a table of possible formats for different PDF field types:
PDF Field Type | Expected Format | Example |
---|---|---|
Text | Plain text | “John Doe” |
Date | Various date formats | “2023-04-15” or “04/15/2023” |
Number | Numeric values | “42” or “3.14” |
Checkbox | Value matching the export value | “Yes”, “On”, “True” |
Radio Button | Value matching the export value | “Option1” |
Dropdown | Value matching one of the options | “California” |
Multiple Select | Values matching the options, separated by commas | “Red,Green,Blue” |
If your form field values don’t match the expected format for the PDF field, you may need to use value mapping to ensure the PDF is filled correctly.
Testing Mappings
Now you are done creating the form. Go to the page where you installed the contact form shortcode. The CF7 form filled with data should look similar to the following:
CF7 Form Frontend Preview
When your user fills in and submits the form, the recepient of the submissions will receive a filled PDF file with user data which should look similar to the following:
Filled PDF with Form Data
When testing your form, if you encounter any issues with fields not being filled correctly, check the following:
- Ensure the field mapping is correct
- Verify that the input format matches what the PDF field expects
- Consider using value mapping for fields with mismatched values
- Check if your PDF field has validation scripts that might prevent certain values
- For date fields, ensure you’re using the correct date format
- For checkbox fields, verify that the export value matches your form value