Handling PHP/HTML inside the output of a shortcode function

This is mostly working fine. You probably want quotes around your id in the window.superformIds array to ensure it’s a string.

This is a bad way of going about this. With scripts and styles you want to avoid outputting them directly on the page wherever the shortcode is placed.

Here’s a better method:

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
function my_enqueue_scripts() {
    wp_register_style( 'superform', 'https://assets.sokt.io/superform/superform.css', array(), '1.0.0', 'screen' );
    wp_register_script( 'superform', 'https://assets.sokt.io/superform/superform.js', array( 'jquery' ), '1.0.0', true );
}


function superForms( $atts ) {
    $atts = shortcode_atts(
        array(
            'id' => '',
        ),
        $atts
    );
    wp_enqueue_script( 'superform' );
    wp_enqueue_style( 'superform' );
    wp_localize_script( 'superform', 'superformIds', array( $atts['id'] ) );
    return '<div id="' . $atts['id'] . '"></div>';
}
add_shortcode( 'superform', 'superForms' );

This registers the scripts and styles ahead of time, allowing you to enqueue them when the shortcode is called. This prevents multiple scripts from being added to the page since enqueuing something twice will only include it once.

You can also specify things like dependencies for your scripts. It looks like superform requires jQuery.

Finally, you can localize your script which passes the associated ID to the DOM and makes it available to the script.

One note, superforms assumes jQuery is set to $. You will need to handle this as well.