Print

JCI and ContactForm7

Challenge

Load JSON-Data and show this Data in an HTML-Form to change or submit it.
Example:
https://api.json-content-importer.com/extra/auto-refresh-api-ajax/1.php

The JSON-Datafield “items.0.currentdatesec” has the current day and time.

Solution 1: Simple HTML-Form

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 nmae=text1 value="{{items.0.currentdatesec}}">
<input type=submit>
</form>
Solution 2: Use a Plugin like Contact Form 7

Contact Form 7 is a very 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.

Example Solution 2.1 – free JCI (from Version 1.5.5 on)
<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 Shotcodes 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 ther time and date got frtom 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.

How to debug this:

  • Check what the receiving API stored. for learning how this works you might use this PHP-Snippet as receiving URL:
<?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 saiing data ";
}
?>

This stores the data send from the CF7-form.

  • 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


Example Solution 2.2 – JCI-PRO
  • Download and install Contact Form 7
  • Create a ContactForm7-Template:
    In this template add {{items.0.currentdatesec}} as value. This is the twig-placeholder for the JSON-data: You can insert any twig-code into the ContactForm-7 (do not destroy the ContactForm7-syntax…).
<label> Your id
[text* your-name "json-id is: {{items.0.currentdatesec}}"]
</label>
[submit "Submit"]
  • Save the ContetnForm-7 template and copypaste the ContentForm-7-Shortcode, e. g.
[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.currentdatesec}}
[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]

See example in action

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
5
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
On this page: