Skip Navigation

[Resolved] How to integrate another app's short code in the form

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.
This support ticket is created 8 years ago. There's a good chance that you are reading advice that it now obsolete.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 6 replies, has 2 voices.

Last updated by Luo Yang 8 years ago.

Assisted by: Luo Yang.

Author
Posts
#403876

Heya,

I’ve been trying to solve this for a couple of days now:

I am working on a communal map on my website. Everybody will be able to contribute. I use the plugin "Progress Map" for the map.

I plan to have my users enter new locations (posts) from the front end of the page. When I bought progress map, I saw, that they have a short code for that: [progress_map_add_location_form] - There's more info about it to be found here: hidden link

However, I create my form for the entire post (incl. title, content, category, ect.) with Toolset CRED. Now, Toolset obviously doesn’t know about Progress Map.

And since I’m not too code savvy, I’m a little stuck, integrating Progress Map's short code into the Toolset form. Here is a screenshot of the code: hidden link

I want to integrate the Progress Map input before the submit button.

I already tried to simply put the short code there and I played around with the existing code in combination with the short code. All of which only led to the form not working anymore.

Do you have any idea, how I could solve this problem?
As I said, I'm a little bit of a noob, when it comes to code, and yet I keep getting myself into these situations :/

Thanks so much, Robin

#404096
201.JPG

Dear Robin,

There isn't a feature within CRED, and form insider form is not valid according w3c standard.

There is a workaround within Toolset, I think it can do the same thing:
I tested the Progress Map plugin in my localhost, there are four custom fields is needed for the Progress Map plugin:
1. codespacing_progress_map_address - the name of target address
2. codespacing_progress_map_lat - address latitude value
3. codespacing_progress_map_lng - address longitude value
4. codespacing_progress_map_secondary_lat_lng - It seems like an array which for combine latitude and longitude values, for example: [26.647661,106.63015399999995]

So we can create an address field with Types + Toolset map plugin, put it into CRED form, use the CRED form to submit the address value, and use CRED action hook "cred_save_data" to save the value into above four custom fields.

Here are the detail steps:
1) Install Types + Toolset map plugin, you can download them here:
https://toolset.com/account/downloads/
This will add a custom address field in Types plugin

2) Create a custom address field "my-address" with Types plugin, see screenshot 201.jpg

3) Put the field "my-address" into your CRED form:

[cred_field field='my-address' post='post' value='' urlparam='']

Then your user will be able to submit the address with google map.

Click "CSS and Javascript for this form", add below JS codes into JS window, which will be able to add name attribute into the fields: Latitude and Longitude:

//add name attribute into the fields: Latitude and Longitude
jQuery(document).ready(function($){
  $( document ).on( 'click', 'input[name="wpcf-my-address"]', function( e ) {
  	$('#toolset-google-map-lat').attr('name', 'toolset-google-map-lat');
  	$('#toolset-google-map-lon').attr('name', 'toolset-google-map-lon');
  });
}); 

4) Add below codes into your theme/functions.php:

add_action('cred_save_data', 'CRED_Progress_Map_func',10,2);
function CRED_Progress_Map_func($post_id, $form_data)
{
	if ($form_data['id']==123) // if is specific form
	{
		update_post_meta($post_id, 'codespacing_progress_map_address', get_post_meta($post_id, 'wpcf-my-address', true));
		update_post_meta($post_id, 'codespacing_progress_map_lat', $_POST['toolset-google-map-lat']);
		update_post_meta($post_id, 'codespacing_progress_map_lng', $_POST['toolset-google-map-lon']);
		update_post_meta($post_id, 'codespacing_progress_map_secondary_lat_lng', '[' . $_POST['toolset-google-map-lat'] . ',' . $_POST['toolset-google-map-lon'] . ']');
	}
}

Please replace the 123 with the CRED form ID of step 3.

Then test your CRED form in fornt-end again.

#404232

Hey there,

Thank you for the great step-by-step explanation!
The map in the form seems to work fine, however, progress map does not seem to receive the data. There's only a new module in the backend, when you look at the newly created post. There is has the right location. Progress map is unchanged, though...

Thanks for your help! I really appreciate the effort!

#404314

What do you mean this:
progress map does not seem to receive the data. There's only a new module in the backend, when you look at the newly created post. There is has the right location. Progress map is unchanged,

I am familiar with the Progress Map plugin, what can I see if the new module works fine in the backend.

And please check this:
In step 4) replace the 123 with the CRED form ID of step 3.

#404344

Hey,

I mean, that the Toolset Map is in the backend of the post now. And the Toolset Map has the right coordinates. But Progress Map doesn't get any coordinates...

I had already replaced the 123 with the ID... :/

#404345
Screen Shot 2016-06-04 at 14.03.28.png

I just noticed that Progress Map seems to get the coordinates but can't deal with the format, apparently... (Screenshot)
I know you can enter Coordinates into this field (not only addresses) but without the brackets. But even if I remove the brackets, it hasn't actually saved the exact location. Instead it shows the next street...

Also, I'd additionally have to click "Get Pinpoint" to actually save it, once it's found the right position...

#404615
203.JPG

I just test again in my localhost, it does work, after submit the CRED form, in the back-end, edit the new post, the section "Progress Map: Add Locations", does display the google map and address, see screenshot 203.JPG

Please check these:
1) You are using the latest version of Toolset plugins
2) Make sure you have followed the steps I described in post:
https://toolset.com/forums/topic/how-to-integrate-another-apps-short-code-in-the-form/#post-404096
3) Deactivate other plugins and switch to wordpress default theme 2016, and test again.

If the problem still exists, please duplicate same problem in a test site, and fill below private detail box with login details and ftp access, also point out the problem page URL, CRED form URL, and where I can edit your PHP codes, I need a live website to test and debug. thanks

The forum ‘Types Community Support’ is closed to new topics and replies.

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.