JCI and ContactForm7
Challenge
Create a Web Form Prepopulated with JSON Data: Fill in the form fields with preloaded JSON data. Upon submission, the form data is sent to a separate API.
An example data source for prepopulating the form is https://api.json-content-importer.com/extra/auto-refresh-api-ajax/1.php. The JSON data field ‘items.0.currentdate’ contains the current date and time.
Solution 1 with HTML-Form: Filled Form, no sending of submitted data
You can create a JCI-Template and insert HTML-Code like the following. This is just simple HTML. If adding some CSS, you can design it from scratch as you like:
<form action=... method=...>
<input type=text name=text1 value="{{items.0.currentdatesec}}">
<input type=submit>
</form>
Solution 2: Contact Form 7 and free JCI
Contact Form 7 is a popular WordPress plugin for creating friendly forms on a WordPress page. The PRO-JCI-Plugin can insert JSON data into the fields of a Contact7-Form. With that, you get rid of any HTML stuff.
- Download and install Contact Form 7 and the free JCI plugin.
- Create a ContactForm7-Template:
<label> Current time:
[text* your-data "{datetime:datetime,d.m.Y, H:i:s,0}"]
</label>
[submit "Submit"]
And add this to the “Additional Settings”:
skip_mail:on
jci_url:https://...?d=#your-data#
jci_timeout:50
jci_method:post
jci_header:Content-Type:application/json;a:in#your-data#
jci_payload:{"your-data";"#your-data#"}
The “Additional Settings” tell the free JCI plugin this:
- Do not send an email when submitting the CF7-form: skip_mail:on
- URL to the API receiving the submitted data. If needed (e.g. get-method) The submitted fields are masked by two “#”. This is replaced by the urlencoded-submitted data when submitting the form: jci_url:https://…?input=#your-data#
- Number of seconds waiting for the Timeout for receiving API: jci_timeout:50
- Method (either “post” or “get”) expected by the receiving API: jci_method:post
- Additional headers for the receiving API, separated by “;” an “:”: jci_header:Content-Type:application/json;a:b
- Data-Payload when using post-method: The submitted fields are masked by two “#”. This is replaced by the submitted data when submitting the form: jci_payload:{“your-data”;”#your-data#”}
Save the CF7-Form and copypaste the Shortcode for it, e.g.
[contact-form-7 id="2f59529" title="jcifree"]
Now use the CF7-Shortcode in a JCI-free Block:
- URL in the JCI-free Block: http://worldtimeapi.org/api/timezone/America/Argentina/Salta
- Activate the “Execute Shortcodes in Template” option!
- Use this Template:
time = {datetime:datetime,d.m.Y, H:i:s,0}<br>
[contact-form-7 id="2f59529" title="jcifree"]
On the left side you should see the time and date got from the JSON in plain text and in the CF7-Form. Save this page and open it in the browser.
Submit the Form and in the back the API is connected.
Solution 3: Contact Form 7 and JCI PRO
a. Populate form fields:
Enhancing Capabilities with JCI PRO for Maximum Flexibility: When the free version of JCI reaches its limits, JCI PRO steps in to provide unparalleled flexibility:
- The data used to populate the form fields can be customized.
- Detailed specifications for how the submitted data is sent to the API.
Integrating ContactForm7 with JCI PRO:
- Download and install both Contact Form 7 and JCI PRO
- Create a template in ContactForm7:
In this template, add {{items.0.currentdatesec}} as value. This serves as the twig placeholder for the JSON data, allowing for inserting any twig code into the ContactForm7 template (while maintaining the integrity of the ContactForm7 syntax).
<label> Current Date:
[text* cdate "{%if urlparam.cdate %}{{urlparam.cdate #pipe# e}}{% else %}{{items.0.currentdate #pipe# date(#qm#m/d/Y#qm#) }}{% endif %}"]
</label>
<label> User Text:
[text cusrtxt "{%if urlparam.cusrtxt %}{{urlparam.cusrtxt #pipe# e}}{% endif %}"]
</label>
[submit "Submit Form"]
<style>.wpcf7-form.sent p { display:none; }</style>
- The placeholders
#pipe#and#qm#represent|and"respectively. These placeholders are necessary to avoid errors. - Additionally, you can populate the form with data directly through the URL. The parameters
urlparam.cdateandurlparam.cusrtxtcorrespond to user data transmitted via the URL, for example...?cdate=A&cusrtxt=B - To hide the form upon submission, apply the following CSS:
<style>.wpcf7-form.sent p { display:none; }</style> - After configuring your Contact Form 7 template, remember to save it and then copy and paste the provided Contact Form 7 shortcode, for example:
[contact-form-7 id="NO_CF" title="whatever"]
- Create a JCI-Template and insert the ContactForm-7-Shortcode.
NO_CF is the ID of the created ContnetForm-7-Form:
API: {{items.0.currentdate}}
[contact-form-7 id="NO_CF" title="whatever"]
Name and store the JCI Template and use this Shortcode; add “orderofshortcodeeval=2” to tell the plugin to execute the shortcodes in the Template first:
[jsoncontentimporterpro nameoftemplate=NAME_GIVEN_IN_TEMPLATE orderofshortcodeeval=2]
b. Send submitted data:
Go to “Additional Settings” of the ConotactForm7-Form. Add this:
skip_mail:on jci_nameoftemplate:cf7sendform
- The
skip_mailoption is optional and, when enabled, prevents an email from being sent after the form is submitted. - The
jci_nameoftemplaterefers to the name of the JCI template that will be created in the subsequent steps.
Creating a New JCI Template:
- Template Text (API Response Format): To define how the API response should be displayed, use the following template text, which encodes the context as JSON:
answer of api the submitted data is sent to:
{{ _context | json_encode }} - Template name: Assign a name to your template. This name will be used in the
jci_nameoftemplatefield to identify the template being used. - URL of Template: Specify the API endpoint URL to which the submitted data should be directed. If the API requires data to be included in the URL as a GET request, you can use the following syntax:
...?dat=#cdate#&txt=#cusrtxt#
Replace...with the actual API endpoint URL. - curloptions (For POST Requests): If the API expects the submitted data to be sent as a POST request with a payload, you can specify the curl options needed to configure this. However, the specific curl options were not provided in your request. Typically, this could involve setting options to send JSON or form data in the body of the POST request.
CURLOPT_HTTPHEADER=Content-Type:application/json;CURLOPT_POSTFIELDS={"jsondate":"#cdate#", "jsontxt":"#cusrtxt#"}
Remember, when configuring your JCI template to interact with an API, adjust the URL, template text, and curl options according to the requirements of the specific API you’re working with.
How to debug this
- Receiving API:
To check what the receiving API has stored, you can use a PHP snippet as the receiving URL for debugging and learning purposes. Here’s a basic PHP snippet that could serve as a receiving endpoint. This script will capture both GET and POST requests, showing the data that was sent to the API:
<?php
$headers = getallheaders();
$data = time().":".file_get_contents('php://input').":".json_encode($headers);
$filePath = 'file.txt';
if (file_put_contents($filePath, $data . PHP_EOL, FILE_APPEND) !== false) {
echo "API-answer: ".$data;
} else {
echo "API-answer: Failure storing data ";
}
?>
This stores the data send from the CF7-form.
- WordPress Debug mode:
At the sending WordPress, you can switch on the WP-Debmugmode in wp-config.php with
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
@ini_set('display_errors', 0);
The JCI-free Plugin then will write debug-infos to the usual debug-file wp-content/debug.log
DO NOT FORGET to delete this file after finishing debugging!