Add external form with css & JS to wordpress

It’s not clear how you’ve attempted to integrate these files. Maybe it doesn’t matter if it’s not working 🙂

Must these resources remain as separate files? Or could you incorporate the content into a new WP template? By creating a custom page template, you could simply inline everything on the same template.

If they must remain separate files, the index.html should be converted into a PHP file. You can basically just rename it index.php. As a PHP file, you can require or include it on the custom page template. The external JS and CSS files should be enqueued in functions.php with wp_enqueue_script() and wp_enqueue_style(). You can conditionally enqueue them only for the one page by checking the requested page with get_queried_object_id().

I’m not sure about the correct paths to these files, adjustment may be required. A very rudimentary custom page template file added to your theme:

<?php
/* Template Name: Booking */
get_header();
//index.html with the form must be converted to a PHP file
include( get_stylesheet_directory() . '/index.php');
get_footer();

For the WP page on which the form should appear, specify it be based on the “Booking” template. Make note of the page’s ID from “post” URL parameter in the browser address field. It will be used in the following code. Let us say the ID is 123 as an example.

Add to functions.php:

add_action('wp_enqueue_scripts', 'chhe_booking');
function chhe_booking() {
   if ( 123 == get_queried_object_id()) {
      wp_enqueue_script('booking_script', get_template_directory_uri() . '/tl-booking.js', ['jquery'], '1.0.0', true );
      wp_enqueue_style('booking_style', get_template_directory_uri() . '/tl-datepicker-theme.css', [], '1.0.0', 'all');
   }
}