Implementing LinkedIn’s new Autofill feature + Request Could not be Completed

I’ve stumbled upon a guide that explains how you can fill in form fields with the autofill LinkedIn feature. I have 3 form fields:

• First Name
• Last Name
• Email

And I would like to fill in these form fields by clicking a button by getting these from their LinkedIn profile.

As you check the guide you can see I’ve done three things:

<div id="linkedin_form"> 
    <form method="post" action="' . $this_page .'">
        <p>
        <label for="FNAME" id="FNAME">First Name:</label>
        <input type="text" name="FNAME" id="FNAME" required="required" />
        </p>

        <p>
        <label for="LNAME" id="LNAME">Last Name:</label>
        <input type="text" name="LNAME" id="LNAME" required="required" />
        </p>

        <p>
        <label for="EMAIL" id="EMAIL">Email address: </label>
        <input type="text" name="EMAIL" id="EMAIL" required="required" />
        </p>

        <p>
        <label for="CURRENTJOBTITLE" id="CURRENTJOBTITLE">Current Job Title:</label>
        <input type="text" name="CURRENTJOBTITLE" id="CURRENTJOBTITLE" />
        </p>

        <!-- Hidden value for page -->
        <input type="hidden" value="1" name="page" />

        <input type="submit" value="Next" />
    </form>
</div>

<script src="//platform.linkedin.com/in.js" type="text/javascript">
    api_key: my_secret_api_key
    noAuth: true
    lang: en_US
</script>

<script type="IN/Form" data-form="#linkedin_form" data-field-firstname="FNAME" data-field-lastname="LNAME" data-field-phone="C_BusinessPhone" data-field-email="EMAIL" data-field-company="C_company" data-field-title="C_Title" data-field-city="ENTER_CITY" data-field-state="ENTER_STATE" data-field-country="ENTER_COUNTRY" data-field-zip="ENTER_ZIP"></script>

1. Add my form with id linkedin_form
2. Add js link with my public API key
3. Add javascript to link my fields

The problem is I don’t see the HTML button. I get an Iframe in my HTML but in my Iframe I get a h2 (with other elements) with text:

Your Request Could not be Completed.

I made sure that in my LinkedIn Application I’ve added http://mydomain.dev:8888 (my local working directory) to OAuth 2.0 Redirect URLs AND to Javascript API Domains.

I’m working with wordpress and created a custom form with a shortcode. So the full code of my form is:

add_shortcode('custom_form','custom_form');
function custom_form()
{
    $html = "";

    // output form
    $html .=
    '<div id="linkedin_form"> <form method="post" action="' . $this_page .'">
        <p>
        <label for="FNAME" id="FNAME">First Name:</label>
        <input type="text" name="FNAME" id="FNAME" required="required" />
        </p>

        <p>
        <label for="LNAME" id="LNAME">Last Name:</label>
        <input type="text" name="LNAME" id="LNAME" required="required" />
        </p>

        <p>
        <label for="EMAIL" id="EMAIL">Email address: </label>
        <input type="text" name="EMAIL" id="EMAIL" required="required" />
        </p>

        <p>
        <label for="CURRENTJOBTITLE" id="CURRENTJOBTITLE">Current Job Title:</label>
        <input type="text" name="CURRENTJOBTITLE" id="CURRENTJOBTITLE" />
        </p>

        <!-- Hidden value for page -->
        <input type="hidden" value="1" name="page" />

        <input type="submit" value="Next" />

    </form></div>';

    $html .=
        '<script src="//platform.linkedin.com/in.js" type="text/javascript">

            api_key: my_secret_key

            noAuth: true

            lang: en_US

        </script>';

    $html .=
        '<script type="IN/Form" data-form="#linkedin_form" data-field-firstname="FNAME" data-field-lastname="LNAME" data-field-phone="C_BusinessPhone" data-field-email="EMAIL" data-field-company="C_company" data-field-title="C_Title" data-field-city="ENTER_CITY" data-field-state="ENTER_STATE" data-field-country="ENTER_COUNTRY" data-field-zip="ENTER_ZIP"></script>';

    return $html;
}

What am I doing wrong?