Теоретически каждый Вася, а практически круг таких людей на общую массу населения сильно ограничен. Из них в код каждого сайта на котором есть калькулятор заходят ещё единицы. На сайте нет онлайн оплаты , работа подавляюще с Юр лицами (выставление счета и тд), зачем это Васе с улицы нужно ? Просто от нечего делать?

Если говорить о сделано все как положено , то хороший сайт и на Wordpress не должен работать.

По поводу ввода текста пользователем, я имел в виду что никаких текстовых комментариев у него необходимости нет вводить.

по поводу подтверждения заказа вы имеете в виду клиент через свою почту подтверждает заказ? Нет , этот вариант не пойдёт. Попап форма здесь служит больше колбэк-формой на которую будет реагирование в виде звонка. А организовать в подобной форме подтвердите нам по смс что это вы, тогда... не пойдёт )

Да, я использую wp и именно это плагин.
По поводу связи мне вот не совсем понятно , как помечать и вытаскивать значения селектов и инпутов в моем случае. Возможно, я что-то не так представляю, 2 формы отправлять и не нужно. Ввёл на странице размеры , цвет нажал добавить ещё, снова ввёл -> заказать открылась форма где в одно из полей вставлены значения , вводишь телефон и имя , и отправляешь

Хорошо, отправляйте что хотите, имеется ввиду не проверяя, что шлет клиент. Но Теоретически каждый Вася, а практически круг таких людей на общую массу населения сильно ограничен., это ну просто дилетантский подход к веб приложению.

Не надо ничего вытаскивать. Поля формы через атрибут form можно можно связать с формой, при этом будучи находясь вне ее. Допустим ваш плагин не только принимает ввод, но и отправляет форму. Если этой форме к примеру дать id="order", а полям и спискам, которые определяют параметры заказа прописать атрибут form="order", то форма отправляемая плагином отправит и эти поля.

насчет дилетантства я с вами полностью согласен.


А как сделать "добавить ещё"? При этом форма остаётся одна, просто внутри неё добавляется ещё каким-то образом строка?

Клонировать элементы формы и вставляя их в форму, очистив их. Я просил показать точный html код формы, его нет, поэтому конкретный код написать не могу.

<?php
function callback_display_form($lightbox = true) {
   $field_email = null;
   $field_time = null;
   $field_message = null;
   $label = null;
   $script = null;
   $description = wpautop(wpcallback_get_description());
   $inline_container = null;
   $field_label_name = wpcallback_get_option('field_option_label_name');
   $field_placeholder_name = wpcallback_get_option('field_option_placeholder_name');
   $field_label_telephone = wpcallback_get_option('field_option_label_telephone');
   $field_placeholder_telephone = wpcallback_get_option('field_option_placeholder_telephone');
   $field_label_email = wpcallback_get_option('field_option_label_email');
   $field_placeholder_email = wpcallback_get_option('field_option_placeholder_email');
   $field_label_message = wpcallback_get_option('field_option_label_message');
   $field_placeholder_message = wpcallback_get_option('field_option_placeholder_message');
   $field_label_submit = wpcallback_get_option('field_option_label_submit');

   if($lightbox) {
      $label = '<h1>' . callback_get_option('label') . '</h1>';
      $script = '<script type="text/javascript" src="' . plugins_url('js/callback.js', __FILE__) . '"></script>';
   }
   else {вариант к моему случаю не относится поэтому вырезал}

   $form_action = get_site_url() . '/?callback_action=email';
        $form = <<<EOT
<div class="callback-form {$inline_container}">{$label}{$description}<form class="clearfix callback-form-container" action="{$form_action}" method="post"><label class="hear-about-us"><span>Hear about us</span><input type="text" autocomplete="off" name="hear_about_us"></label><label><span class="callback-label"><span class="label-text">{$field_label_name}</span> <span class="input-required">*</span></span><input class="validate" type="text" autocomplete="off" name="callback_name" placeholder="{$field_placeholder_name}"></label><label><span class="callback-label"><span class="label-text">{$field_label_address}</span> <span class="input-required">*</span></span><input class="validate" type="text" autocomplete="off" name="callback_address" placeholder="{$field_placeholder_address}"></label><label><span class="callback-label"><span class="label-text">{$field_label_telephone}</span> <span class="input-required">*</span></span><input class="validate" type="text" autocomplete="off" name="callback_telephone" placeholder="{$field_placeholder_telephone}"></label>{$field_email}{$field_time}{$field_message}<input class="submit-button" type="submit" value="{$field_label_submit}"></form></div>{$script}
EOT;
   return $form;
}

Прикрепил попап форму, а ниже форму калькулятора, в том виде, в клиром она у меня. Признателен, если подскажите

Я согласен, что это по-дилетантски как уже сказали выше. И вы как человек знающий Веб разработку рассуждаете абсолютно правильно. Работа мастером должна быть сделана качественно и корректно. В частных случаях человек может обойтись тем решение, которое его устроит на какое -то время. На свой страх и риск.

Дальнейшее словоблудие- бесполезная трата времени и не более.

Если делать так как я говорил, то <form id="send" class="clearfix callback-form-container" action="{$form_action}" method="post"> - добавляем ID форме.

<option value="1.2"/> - это неправильно, не должно быть тут слеша.

А вот если отправлять поля формы id="form", то тег этой формы заменить на тег DIV, а полям добавит атрибуты form="send". Но, чтобы эти поля отправились на сервер, они должны иметь имена, например список, это name="color[]", и соответственно name="width[]" и name="height[]" у полей ввода. ID у полей и списка удалить, так как они должны быть уникальны. Если ID эти используются в калькуляторе, то его код нужно переписать делегируя обработку общему родителю - id="form", так как поля добавляются.

Именование как name[], означает, что это элемент массива name. То есть сервер получит такой массив:

Это бутстрап, не знаю где кнопка добавить, тут для примера. Списку добавить опцию с пустым значением (если только Зеленый, это не значение по умолчанию).

<div id="form" >
    <div class="roword">
        <div class="col-md-3 col-sm-6 col-xs-12 form-col-1">
            <select form="send" name="color[]">
                <option value="">Выберите цвет</option>
                <option value="1.2">Зеленый</option>
                <option value="1.6">Синий</option>
                <option value="1.8">Красный</option>
            </select>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12 form-col-2">
            <input form="send" type="number" step="1" name="width[]">
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12 form-col-3">
            <input form="send" type="number" name="height[]">
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12 form-col-4">
            <output></output>
        </div>
    </div>
</div>

<button>Add</button>

И обработчик:

$(function() {
    $('button').click(function() {
        $('div.roword').first().clone().appendTo($('#form')).find('select, input').val('')
    })
});

относительно разобрался.

id в скрипте используются. Правильно ли я понимаю, что я document.querySelector("#id") должен заменить на что-то вроде width=document.querySelector("#form" input[name=width[]]) ? Надеюсь, хотя бы мыслю в правильном направлении.

Для наглядности продублирую скрипт:

function calculate() {
        var h = +height.value || 0,
            w = +width.value || 0,
            c = +select.value;
        h < 40 && (h = 40);
        w < 40 && (w = 40);
        h > 200 && (h = 200);
        w > 300 && (w = 300);
        height.value = h;
        width.value  = w;
        h = h * w;
        h *= c;
        output.value = h.toFixed(0)
    }
    var form = document.querySelector("#form"),
        output = document.querySelector("#output"),
        width = document.querySelector("#width"),
        height = document.querySelector("#height"),
        select = document.querySelector("#mySelect");
    form.addEventListener("change", calculate);
});

Где ваш HTML?
насчет замены. это не обязательно, можно обращаться по ID.