Change in page resets embedded form in translated page

This thread is resolved. Here is a description of the problem and solution.

Problem:
Marketo forms embeeded with Javascript cannot be translated.
Solution:

- Backup the site completely first to prevent any issues.

- Edit your child theme's functions.php file and append the following code so that Numbers/IDs in page are translatable and are shown in translation editor.

/**
 * Allow translating numbers
 */
function wpmlsupp_7499_allow_translating_numbers( $is_translatable, $job_translate ) {
    $data = $job_translate['field_data'];
    if ( 'base64' === $job_translate['field_format'] ) {
        $data = base64_decode( $data );
    }
    if ( is_numeric( $data ) ) {
        return true;
    }
    return $is_translatable;
}
add_filter( 'wpml_tm_job_field_is_translatable', 'wpmlsupp_7499_allow_translating_numbers', 10, 2 );

- Also append the following code to your child theme's functions.php file so that a shortcode is setup to insert marketo forms in pages/posts.

//[marketo_forms id="FORM ID"]
function Marketo_Forms( $atts ){
    $string ="<script src=\"//page.gofluent.com/js/forms2/js/forms2.min.js\"></script>
    <form id=\"mktoForm_".$atts["id"]."\"></form>
    <script>MktoForms2.loadForm(\"//page.gofluent.com\", \"846-WED-421\",".$atts["id"].");</script>";
      
    return $string;
          
    }
    add_shortcode( 'marketo_forms', 'Marketo_Forms' );

- Go to WPML -> Settings -> Custom XML Settings and save the setting with the following XML so that the id in shortcode is set as translatable:

Go to WPML -> Settings page click on Custom XML Configuration tab, then save it with the following config:

<wpml-config>
<shortcodes>
        <shortcode>
            <tag>marketo_forms</tag>
            <attributes>
                <attribute>id</attribute>
            </attributes>
        </shortcode>
</shortcodes>
</wpml-config>

- Edit your page and replace the JavaScript form you inserted= with a shortcode in the following format:

[marketo_forms id="10800"]

Replace the id 10800 with your form id.

- Edit the translation and translate the id of the translated form from marketo forms.

Relevant Documentation:
N/A

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: Custom Work, Exception

This topic contains 12 replies, has 2 voices.

Last updated by Subash Chandra Poudel 1 year, 11 months ago.

Assisted by: Subash Chandra Poudel.

Author	Posts
January 25, 2023 at 11:01 am #12888789
Marketing Tech	We are using Marketo forms in our website and we embed it by adding a script provided by Marketo. To embed, we use a HTML block from the Gutenberg builder and since we cannot find the script in the ATE, when we localized or changed form from other languages we change it on String Translation. The issue with this is that everytime we change the content in a page with the embed form the form get back to the english one
January 25, 2023 at 12:43 pm #12890017
Subash Chandra Poudel	Hi there, can you please try this and see how it goes: - Backup the site completely first to prevent any issues. - Add the following code to your theme's functions.php file so that Numbers in page are allowed to be translated in ATE. /** * Allow translating numbers */ function wpmlsupp_7499_allow_translating_numbers( $is_translatable, $job_translate ) { $data = $job_translate['field_data']; if ( 'base64' === $job_translate['field_format'] ) { $data = base64_decode( $data ); } if ( is_numeric( $data ) ) { return true; } return $is_translatable; } add_filter( 'wpml_tm_job_field_is_translatable', 'wpmlsupp_7499_allow_translating_numbers', 10, 2 ); - Edit the page with issue in primary language and update the page by adding an extra space or character in title or content to trigger a translation update. - Edit the translation and see if you have the form ID like 11521 available for translation. If not search in the search bar at the top in ATE then translate it. Regards, Subash
January 27, 2023 at 1:43 am #12901043
Marketing Tech	Hello, we tried this solution but we can't find the ID of the form in the ATE.
January 27, 2023 at 1:53 am #12901089
Marketing Tech	It seems that it can only detect a number that is part of the content but not the ID of the form which is inside a script.
January 27, 2023 at 6:44 am #12901819
Subash Chandra Poudel	Hi there, Thank you for checking the solution. It looks like the ID is not shown in ATE because the ID is embedded within a HTML/JavaScript code and ATE does not translates HTML codes. In this case a custom code or a setup might be required to make the forms compatible with WPML. This out of our support scope. However I am making an exception here since minimal code might fix the issue, and providing you a custom solution below: Can you please: - Backup the site complete to prevent any issues. - Add the code below ( that you added before ) in your child theme's functions.php for translating Numbers with ATE. /** * Allow translating numbers */ function wpmlsupp_7499_allow_translating_numbers( $is_translatable, $job_translate ) { $data = $job_translate['field_data']; if ( 'base64' === $job_translate['field_format'] ) { $data = base64_decode( $data ); } if ( is_numeric( $data ) ) { return true; } return $is_translatable; } add_filter( 'wpml_tm_job_field_is_translatable', 'wpmlsupp_7499_allow_translating_numbers', 10, 2 ); - Also add the following code in your child theme's functions.php. This will setup a short code [marketo_forms] that you can use to embed your form. //[marketo_forms id="FORM ID"] function Marketo_Forms( $atts ){ $string ="<script src=\"//page.gofluent.com/js/forms2/js/forms2.min.js\"></script> <form id=\"mktoForm_10800\"></form> <script>MktoForms2.loadForm(\"//page.gofluent.com\", \"846-WED-421\",".$atts["id"].");</script>"; return $string; } add_shortcode( 'marketo_forms', 'Marketo_Forms' ); - Go to WPML -> Settings page click on Custom XML Configuration tab, then save it with the following config: <wpml-config> <shortcodes> <shortcode> <tag>marketo_forms</tag> <attributes> <attribute>id</attribute> </attributes> </shortcode> </shortcodes> </wpml-config> The config makes sure the shortcode is recognized by WPML. - Edit your page and replace the form with a shortcode in the following format: [marketo_forms id="10800"] Replace 10800 with any form ID. - Now translate the page again and see if you can find the Form ID in Ate try searching from the top search bar if you don't see it then translate it. Regards, Subash
January 27, 2023 at 7:02 am #12901907
Marketing Tech	Thank you so much! We will try this solution and let you know the results.
January 27, 2023 at 8:43 am #12902307
Marketing Tech	Updated the code with the one you've provided. I'm not sure if I did it correctly but instead of embedding the form via script I replaced it with this format [marketo_forms id="10800"]. The problem is that it does not show the form on the page however when I try to translate in ATE I was able to find the form ID. Can you please also check?
January 27, 2023 at 3:31 pm #12905121
Subash Chandra Poudel	Hi there, Thank you for the updates. I test the solution again on a test site and it seems to work fine. I also see on your site hidden link the form is loading fine. Can you please try the solution again after clearing all browser caches and see how it goes? If the issue persists, I would need to take a closer look at your site. So I would need to request temporary access (WP-Admin and FTP), preferably to a test site where the problem has been replicated. Also, please let me know on which page can I see the issue. Your next answer will be private, which means only you and I have access to it. IMPORTANT: Please take a complete backup of the site to avoid data loss. memory
January 29, 2023 at 11:32 am #12911965
Marketing Tech	Hello, Thank you so much for looking into this. I can confirm that the form is loading on this page - hidden link. I can also see the form ID on ATE. However when I translate it the form is not showing on the translated page for example in French. Here's the link for your referece hidden link Can you please also check again on your end. Thank you!
January 30, 2023 at 7:33 am #12918781
Subash Chandra Poudel	Hi there, Thank you for the updates. I can see the issue on your page. It looks like to embed a form the translation should be done to the Form Id in "<form id=" section Script/HTML also and not only the Form id in Script. In the scripts I sent you please replace the code in theme functions.php for [marketo_forms] to the following, this should then fix the issue. //[marketo_forms id="FORM ID"] function Marketo_Forms( $atts ){ $string ="<script src=\"//page.gofluent.com/js/forms2/js/forms2.min.js\"></script> <form id=\"mktoForm_".$atts["id"]."\"></form> <script>MktoForms2.loadForm(\"//page.gofluent.com\", \"846-WED-421\",".$atts["id"].");</script>"; return $string; } add_shortcode( 'marketo_forms', 'Marketo_Forms' ); Regards, Subash
January 30, 2023 at 7:37 am #12918787
Marketing Tech	Hi Subash, Thank you, will try this changes again.
January 31, 2023 at 7:00 am #12926575
Marketing Tech	Hi Subash, Confirming that everything is working on our end. Thank you so much!
January 31, 2023 at 10:43 am #12928587
Subash Chandra Poudel	Hi there, Thank you for confirming that the issue is resolved now. Feel free to contact us again if you have any other WPML issues or need any help. Regards, Subash