Print

JCI and ContactForm7

Challenge

Load JSON-Data and show this Data in a HTML-Form to change or submit it.
Example:
http://api.json-content-importer.com/extra/json/meetup/1.json
Inserting 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 nice forms on a wordpress-page. From Version 3.10 on the PRO-JCI-Plugin is able to 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 in the right way.
[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: