Electron Remote process with user input width and height not working

There are many ways to implement this functionality. Choosing a particular way and fine-tuning it would be based on personal preference and desired functionality.

In the example below, I have not used nodeIntegration: true and contextIsolation: false. Instead, I have these settings reversed. IE: nodeIntegration: false and contextIsolation: true. This ensures that "both your preload scripts and Electron's internal logic run in a separate context to the website you load in a webContents". See Context Isolation for more information.

To keep things simple, I have the below preload.js script only managing the definition of "channel names" and implementation of Inter-Process Communication. Apart from the preload.js script, all other files shown below should give you a good idea on how to implement an answer.

preload.js (main process)

const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;

// White-listed channels.
const ipc = {
    'render': {
        // From render to main.
        'send': [
            'openWindow'
        ],
        // From main to render.
        'receive': [],
        // From render to main and back again.
        'sendReceive': []
    }
};

// Exposed protected methods in the render process.
contextBridge.exposeInMainWorld(
    // Allowed 'ipcRenderer' methods.
    'ipcRender', {
        // From render to main.
        send: (channel, args) => {
            let validChannels = ipc.render.send;
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, args);
            }
        },
        // From main to render.
        receive: (channel, listener) => {
            let validChannels = ipc.render.receive;
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender`.
                ipcRenderer.on(channel, (event, ...args) => listener(...args));
            }
        },
        // From render to main and back again.
        invoke: (channel, args) => {
            let validChannels = ipc.render.sendReceive;
            if (validChannels.includes(channel)) {
                return ipcRenderer.invoke(channel, args);
            }
        }
    }
);

Within your main.js script, create the main window and listed for a call on the channel name openWindow. When received, pass on the form options (width and height) to create the newIndex.html window.

main.js (main process)

const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronIpcMain = require('electron').ipcMain;

const nodePath = require("path");

// Prevent garbage collection.
let mainWindow;
let newWindow;

function createWindow(options) {
    return new electronBrowserWindow({
        x: 0,
        y: 0,
        width: options.width,
        height: options.height,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });
}

electronApp.on('ready', () => {
    mainWindow = createWindow({width: 800, height: 600});

    mainWindow.loadFile('index.html')
        .then(() => { mainWindow.show(); });
});

electronApp.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        electronApp.quit();
    }
});

electronApp.on('activate', () => {
    if (electronBrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

// ----------------

electronIpcMain.on('openWindow', (event, options) => {
    newWindow = createWindow(options);

    newWindow.loadFile('newIndex.html')
        .then(() => { newWindow.show(); });
})

This is the main window that will be displayed on application start-up, along with form logic and an IPC call (openWindow) from the render to the main process.

index.html (render process)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Main Window</title>
    </head>

    <body>
        <label for="width">Width: </label>
        <input type="number" id="width" min="400" max="800" step="50" value="800">

        <label for="height">Height: </label>
        <input type="number" id="height" min="200" max="600" step="50" value="600">

        <input type="button" id="button" value="Open Window">
    </body>

    <script>
        document.getElementById('button').addEventListener('click', () => {
            let options = {
                // Convert values from strings to integers
                width: parseInt(document.getElementById('width').value),
                height: parseInt(document.getElementById('height').value)
            };

            window.ipcRender.send('openWindow', options);
        });
    </script>
</html>

And finally, the second window that will be created on form submission.

newIndex.html (render process)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>New Window</title>
    </head>

    <body>
        <h1>New Window</h1>
    </body>
</html>