Copy form colour to the popup background

[MAILPOET-2741]

assets/js/src/public.jsx

@@ -37,7 +37,10 @@ jQuery(($) => {
   $(() => {
     $('div.mailpoet_form_popup').each((index, element) => {
       const formDiv = $(element);
-      let delay = formDiv.find('form').data('delay');
+      const form = formDiv.find('form');
+      const background = form.data('background-color');
+      formDiv.css('background-color', background || 'white');
+      let delay = form.data('delay');
       delay = parseInt(delay, 10);
       if (Number.isNaN(delay)) {
         delay = 0;
@@ -46,6 +49,7 @@ jQuery(($) => {
         formDiv.addClass('active');
       }, delay * 1000);
     });
+
     // setup form validation
     $('form.mailpoet_form').each((index, element) => {
       const form = $(element);

lib/Form/DisplayFormInWPContent.php

@@ -124,6 +124,7 @@ class DisplayFormInWPContent {
     );
 
     $templateData['delay'] = $formSettings['popup_form_delay'] ?? 0;
+    $templateData['backgroundColor'] = $formSettings['backgroundColor'] ?? '';
 
     // generate security token
     $templateData['token'] = Security::generateToken();

views/form/front_end_form.html

@@ -18,6 +18,7 @@
       novalidate
       style="<%= form_element_styles %>"/* paragraphs (label + input)
       data-delay="<%= delay %>"
+      data-background-color="<%= backgroundColor %>"
     >
       <input type="hidden" name="data[form_id]" value="<%= form_id %>" />
       <input type="hidden" name="token" value="<%= token %>" />