Print

JCI and ContactForm7

Challenge

Load JSON-Data and show this Data in an HTML-Form to change or submit it.
Example:
http://api.json-content-importer.com/extra/json/meetup/1.json
Insert the JSON-Datafield “0.id” (which is “258386729”) into a Form.

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="{{_context.0.id}}">
<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. From Version 3.10, 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
  • Download and install Contact Form 7
  • Create a ContactForm7-Template in this template like the following.
    {{_context.0.id}} is the twig-placeholder for the JSON-data: You can insert any twig-code into the Contact7-Form (as long as the Contact7-syntax is not destroyed).
<label> Your id
[text* your-name "json-id is: {{_context.0.id}}"]
</label>
[submit "Submit"]
  • Create a JCI-Template and insert the ContactForm7-Shortcode.
    NO_CF is the no of the created CF-Form (copypaste it from the Contact7-form-list):
[contact-form-7 id="NO_CF" title="whatever"]
  • Use the JCI-Template in a JCI-Shortcode: “orderofshortcodeeval=2” tells the plugin to execute the shortcodes correctly.
[jsoncontentimporterpro nameoftemplate=NAME_GIVEN_IN_TEMPLATE orderofshortcodeeval=2]
Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
On this page: