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]