PHP を上げられない WordPress で Contact Form 7 の最新版を使う：WASM で動かす実験と、iframe という答え

// The background an element sits on (nearest opaque ancestor, not the element itself).
function bgOf(el) {
  for (el = el && el.parentElement; el && el.nodeType === 1; el = el.parentElement) {
    var b = getComputedStyle(el).backgroundColor;
    if (opaque(b)) return b;
  }
  return 'rgb(255, 255, 255)';
}
// Elements matching sel near the iframe first, else on the whole page; among them,
// those on the same background as the iframe come first (a footer on a dark band
// is styled for that band, not for the form's).
function candidates(frame, sel) {
  var near = frame.closest('section, .wp-block-group, article, main, form, footer') || document;
  var list = Array.prototype.filter.call(near.querySelectorAll(sel), visible);
  if (!list.length) list = Array.prototype.filter.call(document.querySelectorAll(sel), visible);
  list = list.filter(function (el) { return !el.closest('iframe') && el !== frame; });
  var bg = bgOf(frame);
  var same = list.filter(function (el) { return bgOf(el) === bg; });
  return same.concat(list.filter(function (el) { return same.indexOf(el) < 0; }));
}
function explicit(frame, attr) {
  var sel = frame.getAttribute(attr);
  return sel ? document.querySelector(sel) : null;
}
function side(s, k) {
  return s['border' + k + 'Width'] + ' ' + s['border' + k + 'Style'] + ' ' + s['border' + k + 'Color'];
}

// The most prominent button: one with a fill, gradient or border; largest wins.
function pickButton(frame) {
  var frameBg = bgOf(frame);
  var list = candidates(frame, 'button, input[type=submit], .wp-element-button, .wp-block-button__link, a.button, a.btn, .btn, [role=button]')
    .filter(function (el) {
      var s = getComputedStyle(el);
      var border = parseFloat(s.borderTopWidth) > 0 && s.borderTopColor !== frameBg;
      var fill = (opaque(s.backgroundColor) && s.backgroundColor !== frameBg) || s.backgroundImage !== 'none';
      // It must stand out on the form's background, or the form's button would vanish.
      return (el.textContent || el.value || '').trim() && (fill || border);
    });
  list.sort(function (a, b) { return (bgOf(b) === frameBg) - (bgOf(a) === frameBg) || area(b) - area(a); });
  return list[0];
}

.wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.wpcf7 textarea, .wpcf7 select {
  display: block; box-sizing: border-box; width: 100%; margin-top: .4em; padding: var(--cf7e-in-pad);
  font-family: var(--cf7e-font); font-size: var(--cf7e-size); letter-spacing: normal; text-transform: none;
  color: var(--cf7e-in-text); background: var(--cf7e-in-bg);
  border-top: var(--cf7e-in-top); border-right: var(--cf7e-in-right); border-bottom: var(--cf7e-in-bottom); border-left: var(--cf7e-in-left);
  border-radius: var(--cf7e-in-radius); box-shadow: var(--cf7e-in-shadow);
}
.wpcf7 textarea { min-height: 9em; resize: vertical; }
.wpcf7 :is(input, textarea, select):not([type=submit]):focus { outline: 2px solid transparent; border-color: var(--cf7e-accent); } /* the site's own borders, in the accent color */
.wpcf7 input[type=submit]:focus-visible { outline: 2px solid var(--cf7e-accent); outline-offset: 3px; }
.wpcf7 input[type=submit] {
  font-family: var(--cf7e-btn-font); font-size: var(--cf7e-btn-size); font-weight: var(--cf7e-btn-weight);
  letter-spacing: var(--cf7e-btn-spacing); text-transform: var(--cf7e-btn-transform);
  padding: var(--cf7e-btn-pad); color: var(--cf7e-btn-text);
  background-color: var(--cf7e-btn-bg); background-image: var(--cf7e-btn-image);
  border: var(--cf7e-btn-border); border-radius: var(--cf7e-radius); box-shadow: var(--cf7e-btn-shadow); cursor: pointer;
}

/**
 * CF7 Embed — script for the page that embeds the form.
 * License: GPL-2.0-or-later (https://www.gnu.org/licenses/gpl-2.0.html)
 *
 *   <iframe data-cf7-embed src="https://forms.example.com/?cf7_embed=6" title="お問い合わせ"></iframe>
 *   <script src="https://forms.example.com/wp-content/plugins/cf7-embed/parent.js" async></script>
 *
 * Reads this page's look around each iframe and hands it to the form so it
 * blends in, and resizes the iframe to the form's height.
 *
 * What is read (nearest to the iframe first, then the whole page):
 *   text    font, size, line height, color      (body text near the iframe)
 *   bg      background color behind the iframe
 *   button  colors / gradient, border, radius, padding, font, letter spacing,
 *           upper case, shadow                   (the most prominent button)
 *   input   each side's border (underline-only works), radius, background,
 *           padding, shadow                      (the widest text field)
 *   label   color, weight, size, letter spacing, upper case
 *   fonts   @font-face of this site (passed as data) and web font style sheets
 *           (Google Fonts, Adobe Fonts, Bunny Fonts; loaded by the form itself)
 *
 * When the automatic choice is wrong, point at the right elements:
 *   <iframe data-cf7-embed data-cf7-button=".btn-primary" data-cf7-input="#newsletter-email"
 *           data-cf7-label=".field label" data-cf7-text=".product-description" ...>
 *
 * Colors that would not show (a pale brand color, a guess from a link) are corrected in
 * the form by moving only their OKLCH lightness. data-cf7-contrast="strict" also gives
 * the fields WCAG 1.4.11 (3:1) boundaries.
 */
(function () {
  var origin = new URL(document.currentScript.src).origin;
  var FONT_CSS_HOSTS = /^https:\/\/(fonts\.googleapis\.com|use\.typekit\.net|fonts\.bunny\.net)\//;

  function frames() {
    return Array.prototype.slice.call(document.querySelectorAll('iframe[data-cf7-embed]'));
  }
  function opaque(c) {
    return !!c && c !== 'transparent' && !/rgba\([^)]*,\s*0\)$/.test(c);
  }
  function visible(el) {
    var r = el.getBoundingClientRect();
    return r.width > 0 && r.height > 0 && getComputedStyle(el).visibility !== 'hidden';
  }
  function area(el) {
    var r = el.getBoundingClientRect();
    return r.width * r.height;
  }
  // The background an element sits on (nearest opaque ancestor, not the element itself).
  function bgOf(el) {
    for (el = el && el.parentElement; el && el.nodeType === 1; el = el.parentElement) {
      var b = getComputedStyle(el).backgroundColor;
      if (opaque(b)) return b;
    }
    return 'rgb(255, 255, 255)';
  }
  // Elements matching sel near the iframe first, else on the whole page; among them,
  // those on the same background as the iframe come first (a footer on a dark band
  // is styled for that band, not for the form's).
  function candidates(frame, sel) {
    var near = frame.closest('section, .wp-block-group, article, main, form, footer') || document;
    var list = Array.prototype.filter.call(near.querySelectorAll(sel), visible);
    if (!list.length) list = Array.prototype.filter.call(document.querySelectorAll(sel), visible);
    list = list.filter(function (el) { return !el.closest('iframe') && el !== frame; });
    var bg = bgOf(frame);
    var same = list.filter(function (el) { return bgOf(el) === bg; });
    return same.concat(list.filter(function (el) { return same.indexOf(el) < 0; }));
  }
  function explicit(frame, attr) {
    var sel = frame.getAttribute(attr);
    return sel ? document.querySelector(sel) : null;
  }
  function side(s, k) {
    return s['border' + k + 'Width'] + ' ' + s['border' + k + 'Style'] + ' ' + s['border' + k + 'Color'];
  }

  // The most prominent button: one with a fill, gradient or border; largest wins.
  function pickButton(frame) {
    var frameBg = bgOf(frame);
    var list = candidates(frame, 'button, input[type=submit], .wp-element-button, .wp-block-button__link, a.button, a.btn, .btn, [role=button]')
      .filter(function (el) {
        var s = getComputedStyle(el);
        var border = parseFloat(s.borderTopWidth) > 0 && s.borderTopColor !== frameBg;
        var fill = (opaque(s.backgroundColor) && s.backgroundColor !== frameBg) || s.backgroundImage !== 'none';
        // It must stand out on the form's background, or the form's button would vanish.
        return (el.textContent || el.value || '').trim() && (fill || border);
      });
    list.sort(function (a, b) { return (bgOf(b) === frameBg) - (bgOf(a) === frameBg) || area(b) - area(a); });
    return list[0];
  }
  function pickInput(frame) {
    var list = candidates(frame, 'input[type=text], input[type=email], input[type=search], input[type=tel], input:not([type]), textarea');
    var bg = bgOf(frame);
    list.sort(function (a, b) { return (bgOf(b) === bg) - (bgOf(a) === bg) || b.getBoundingClientRect().width - a.getBoundingClientRect().width; });
    return list[0];
  }

  function tokens(frame) {
    var host = frame.parentElement;
    var sample = explicit(frame, 'data-cf7-text') || candidates(frame, 'p').filter(function (p) { return p.textContent.trim().length > 10; })[0] || host;
    var cs = getComputedStyle(sample);
    var bg = 'rgb(255, 255, 255)';
    for (var el = host; el; el = el.parentElement) {
      var b = getComputedStyle(el).backgroundColor;
      if (opaque(b)) { bg = b; break; }
    }
    var t = { font: cs.fontFamily, size: cs.fontSize, line: cs.lineHeight, text: cs.color, bg: bg };
    if (frame.getAttribute('data-cf7-contrast') === 'strict') t.strict = true; // fields get WCAG 3:1 boundaries

    var btn = explicit(frame, 'data-cf7-button') || pickButton(frame);
    if (btn) {
      var bs = getComputedStyle(btn);
      var filled = opaque(bs.backgroundColor) || bs.backgroundImage !== 'none';
      t.btnBg = opaque(bs.backgroundColor) ? bs.backgroundColor : 'transparent';
      t.btnImage = /gradient\(/.test(bs.backgroundImage) ? bs.backgroundImage : 'none';
      t.btnText = bs.color;
      t.btnBorder = parseFloat(bs.borderTopWidth) > 0 ? side(bs, 'Top') : 'none';
      t.radius = bs.borderRadius;
      t.btnPad = bs.padding;
      t.btnWeight = bs.fontWeight;
      t.btnFont = bs.fontFamily;
      t.btnSize = bs.fontSize;
      t.btnSpacing = bs.letterSpacing;
      t.btnTransform = bs.textTransform;
      t.btnShadow = bs.boxShadow;
      t.accent = filled && opaque(bs.backgroundColor) ? bs.backgroundColor : (parseFloat(bs.borderTopWidth) > 0 ? bs.borderTopColor : bs.color);
    } else {
      var link = candidates(frame, 'a[href]')[0];
      if (link) t.accent = getComputedStyle(link).color;
    }

    var input = explicit(frame, 'data-cf7-input') || pickInput(frame);
    if (input) {
      var is = getComputedStyle(input);
      t.inTop = side(is, 'Top');
      t.inRight = side(is, 'Right');
      t.inBottom = side(is, 'Bottom');
      t.inLeft = side(is, 'Left');
      t.inRadius = is.borderRadius;
      t.inBg = opaque(is.backgroundColor) ? is.backgroundColor : 'transparent';
      t.inPad = is.padding;
      t.inShadow = is.boxShadow;
      t.inText = is.color;
    }

    var label = explicit(frame, 'data-cf7-label') || candidates(frame, 'label')[0];
    if (label) {
      var ls = getComputedStyle(label);
      if (bgOf(label) === bg) t.lbColor = ls.color; // a label on another background has the wrong color for the form
      t.lbWeight = ls.fontWeight;
      t.lbSize = ls.fontSize;
      t.lbSpacing = ls.letterSpacing;
      t.lbTransform = ls.textTransform;
      t.lbFont = ls.fontFamily;
    }
    return t;
  }

  // @font-face rules of this site (readable sheets) for the families in use; passed as data.
  function fontFaces(families) {
    var out = [];
    Array.prototype.forEach.call(document.styleSheets, function (sheet) {
      var rules;
      try { rules = sheet.cssRules; } catch (e) { return; } // cross-origin sheet
      Array.prototype.forEach.call(rules || [], function (r) {
        if (r.type !== CSSRule.FONT_FACE_RULE) return;
        var fam = r.style.getPropertyValue('font-family').replace(/["']/g, '').trim();
        if (families.indexOf(fam.toLowerCase()) < 0) return;
        var m = /url\(["']?([^"')]+)["']?\)/.exec(r.style.getPropertyValue('src'));
        if (!m) return;
        out.push({
          family: fam,
          url: new URL(m[1], sheet.href || document.baseURI).href,
          weight: r.style.getPropertyValue('font-weight') || 'normal',
          style: r.style.getPropertyValue('font-style') || 'normal',
        });
      });
    });
    return out.slice(0, 8);
  }
  // Web font services serve their fonts with CORS, so the form can load their CSS itself.
  function fontLinks() {
    return Array.prototype.map.call(document.querySelectorAll('link[rel=stylesheet][href]'), function (l) { return l.href; })
      .filter(function (h) { return FONT_CSS_HOSTS.test(h); }).slice(0, 4);
  }

  function send(frame) {
    var t = tokens(frame);
    var families = [t.font, t.btnFont, t.lbFont].join(',').split(',').map(function (f) {
      return f.replace(/["']/g, '').trim().toLowerCase();
    });
    var faces = fontFaces(families);
    Promise.all(faces.map(function (f) {
      return fetch(f.url).then(function (r) { return r.ok ? r.arrayBuffer() : null; }).then(function (data) {
        return data ? { family: f.family, weight: f.weight, style: f.style, data: data } : null;
      }, function () { return null; });
    })).then(function (fonts) {
      frame.contentWindow.postMessage({ type: 'cf7-embed-style', tokens: t, fonts: fonts.filter(Boolean), fontLinks: fontLinks() }, origin);
    });
  }

  window.addEventListener('message', function (e) {
    if (e.origin !== origin || !e.data) return;
    frames().forEach(function (frame) {
      if (frame.contentWindow !== e.source) return;
      if (e.data.type === 'cf7-embed-ready') send(frame);
      if (e.data.type === 'cf7-embed-height') frame.style.height = e.data.height + 'px';
    });
  });

  frames().forEach(function (frame) {
    frame.style.width = '100%';
    frame.style.border = '0';
    frame.style.display = 'block';
    frame.style.colorScheme = 'normal';
  });
})();

<?php
/**
 * Plugin Name: CF7 Embed
 * Description: Contact Form 7 のフォームだけのページを出し、別のサイトに iframe で埋め込めるようにする。?cf7_embed=<フォーム ID>。埋め込み先のデザイン（書体・色・ボタン・入力欄）に自動でなじむ。
 * Version: 0.4.0
 * License: GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 *
 * wp-config.php で設定する:
 *   CF7_EMBED_PARENTS  埋め込んでよいサイトのオリジン（空白区切り）例: 'https://shop.example.com'
 *
 * 埋め込み先に貼るもの:
 *   <iframe data-cf7-embed src="https://このサイト/?cf7_embed=6" title="お問い合わせ"></iframe>
 *   <script src="https://このサイト/wp-content/plugins/cf7-embed/parent.js" async></script>
 */

defined( 'ABSPATH' ) || exit;

add_action(
  'template_redirect',
  function () {
    if ( ! isset( $_GET['cf7_embed'] ) || ! function_exists( 'wpcf7_contact_form' ) ) {
      return;
    }
    $form = wpcf7_contact_form( absint( $_GET['cf7_embed'] ) );
    if ( ! $form ) {
      status_header( 404 );
      exit;
    }
    $parents = defined( 'CF7_EMBED_PARENTS' ) ? preg_split( '/\s+/', trim( CF7_EMBED_PARENTS ) ) : array();

    // Only the listed sites may frame this page; styles and heights are only exchanged with them.
    header( "Content-Security-Policy: frame-ancestors 'self' " . implode( ' ', array_map( 'esc_url_raw', $parents ) ) );
    header_remove( 'X-Frame-Options' );
    nocache_headers();
    show_admin_bar( false );

    // This site's theme must not style the form; the embedding page's look is applied instead.
    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
    remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_classic_theme_styles' );
    remove_action( 'wp_footer', 'wp_enqueue_stored_styles', 1 );
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    add_action(
      'wp_enqueue_scripts',
      function () {
        foreach ( wp_styles()->queue as $handle ) {
          if ( 'contact-form-7' !== $handle ) {
            wp_dequeue_style( $handle );
          }
        }
      },
      PHP_INT_MAX
    );
    ?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<?php wp_head(); ?>
<style>
:root {
  --cf7e-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --cf7e-size: 16px;
  --cf7e-line: 1.6;
  --cf7e-text: #1e1e1e;
  --cf7e-bg: #fff;
  --cf7e-accent: #1e1e1e;
  --cf7e-error: #d63638;
  /* button */
  --cf7e-btn-bg: var(--cf7e-accent);
  --cf7e-btn-image: none;
  --cf7e-btn-text: #fff;
  --cf7e-btn-border: 0;
  --cf7e-radius: 4px;
  --cf7e-btn-pad: .7em 1.6em;
  --cf7e-btn-weight: 600;
  --cf7e-btn-font: var(--cf7e-font);
  --cf7e-btn-size: inherit;
  --cf7e-btn-spacing: normal;
  --cf7e-btn-transform: none;
  --cf7e-btn-shadow: none;
  /* input */
  --cf7e-in-line: 1px solid color-mix(in srgb, var(--cf7e-text) 35%, transparent);
  --cf7e-in-top: var(--cf7e-in-line);
  --cf7e-in-right: var(--cf7e-in-line);
  --cf7e-in-bottom: var(--cf7e-in-line);
  --cf7e-in-left: var(--cf7e-in-line);
  --cf7e-in-radius: 4px;
  --cf7e-in-bg: transparent;
  --cf7e-in-pad: .6em .8em;
  --cf7e-in-shadow: none;
  --cf7e-in-text: inherit;
  /* label */
  --cf7e-lb-color: inherit;
  --cf7e-lb-weight: inherit;
  --cf7e-lb-size: inherit;
  --cf7e-lb-spacing: normal;
  --cf7e-lb-transform: none;
  --cf7e-lb-font: inherit;
}
html, body { margin: 0; padding: 0; background: transparent; }
html { overflow: hidden; } /* the iframe grows to fit; it never scrolls inside */
body { padding: 2px 2px 6px; font-family: var(--cf7e-font); font-size: var(--cf7e-size); line-height: var(--cf7e-line); color: var(--cf7e-text); }
body:not(.cf7e-styled) .wpcf7 { visibility: hidden; } /* until the embedding page's look arrives (max 1.5 s) */
.wpcf7 form p { margin: 0 0 1.2em; }
.wpcf7 label {
  display: block; color: var(--cf7e-lb-color); font-family: var(--cf7e-lb-font); font-weight: var(--cf7e-lb-weight);
  font-size: var(--cf7e-lb-size); letter-spacing: var(--cf7e-lb-spacing); text-transform: var(--cf7e-lb-transform);
}
.wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.wpcf7 textarea, .wpcf7 select {
  display: block; box-sizing: border-box; width: 100%; margin-top: .4em; padding: var(--cf7e-in-pad);
  font-family: var(--cf7e-font); font-size: var(--cf7e-size); letter-spacing: normal; text-transform: none;
  color: var(--cf7e-in-text); background: var(--cf7e-in-bg);
  border-top: var(--cf7e-in-top); border-right: var(--cf7e-in-right); border-bottom: var(--cf7e-in-bottom); border-left: var(--cf7e-in-left);
  border-radius: var(--cf7e-in-radius); box-shadow: var(--cf7e-in-shadow);
}
.wpcf7 textarea { min-height: 9em; resize: vertical; }
.wpcf7 :is(input, textarea, select):not([type=submit]):focus { outline: 2px solid transparent; border-color: var(--cf7e-accent); } /* the site's own borders, in the accent color */
.wpcf7 input[type=submit]:focus-visible { outline: 2px solid var(--cf7e-accent); outline-offset: 3px; }
.wpcf7 input[type=submit] {
  font-family: var(--cf7e-btn-font); font-size: var(--cf7e-btn-size); font-weight: var(--cf7e-btn-weight);
  letter-spacing: var(--cf7e-btn-spacing); text-transform: var(--cf7e-btn-transform);
  padding: var(--cf7e-btn-pad); color: var(--cf7e-btn-text);
  background-color: var(--cf7e-btn-bg); background-image: var(--cf7e-btn-image);
  border: var(--cf7e-btn-border); border-radius: var(--cf7e-radius); box-shadow: var(--cf7e-btn-shadow); cursor: pointer;
}
.wpcf7 input[type=submit]:hover { filter: brightness(1.08); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--cf7e-error); font-family: var(--cf7e-font); font-size: calc(var(--cf7e-size) * .875); font-weight: normal; margin-top: .3em; letter-spacing: normal; text-transform: none; } /* tips sit inside the label; do not inherit its small caps style */
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: var(--cf7e-error); }
.wpcf7 form .wpcf7-response-output { margin: 1em 0 0; padding: .6em 1em; border-radius: var(--cf7e-in-radius); }
</style>
</head>
<body class="cf7-embed">
<?php echo do_shortcode( '[contact-form-7 id="' . $form->id() . '"]' ); ?>
<?php wp_footer(); ?>
<script>
(function () {
  var parents = <?php echo wp_json_encode( array_values( $parents ) ); ?>;
  var styled = false;
  function post(msg) { parents.forEach(function (o) { window.parent.postMessage(msg, o); }); }
  function height() {
    window.scrollTo(0, 0); // focus on an invalid field may have scrolled the inside before the iframe grew
    post({ type: 'cf7-embed-height', height: Math.ceil(document.documentElement.getBoundingClientRect().height) });
  }
  function show() { document.body.classList.add('cf7e-styled'); height(); }

  var map = { font: '--cf7e-font', size: '--cf7e-size', line: '--cf7e-line', text: '--cf7e-text', bg: '--cf7e-bg', accent: '--cf7e-accent',
    btnBg: '--cf7e-btn-bg', btnImage: '--cf7e-btn-image', btnText: '--cf7e-btn-text', btnBorder: '--cf7e-btn-border',
    radius: '--cf7e-radius', btnPad: '--cf7e-btn-pad', btnWeight: '--cf7e-btn-weight', btnFont: '--cf7e-btn-font',
    btnSize: '--cf7e-btn-size', btnSpacing: '--cf7e-btn-spacing', btnTransform: '--cf7e-btn-transform', btnShadow: '--cf7e-btn-shadow',
    inTop: '--cf7e-in-top', inRight: '--cf7e-in-right', inBottom: '--cf7e-in-bottom', inLeft: '--cf7e-in-left',
    inRadius: '--cf7e-in-radius', inBg: '--cf7e-in-bg', inPad: '--cf7e-in-pad', inShadow: '--cf7e-in-shadow', inText: '--cf7e-in-text',
    lbColor: '--cf7e-lb-color', lbWeight: '--cf7e-lb-weight', lbSize: '--cf7e-lb-size', lbSpacing: '--cf7e-lb-spacing',
    lbTransform: '--cf7e-lb-transform', lbFont: '--cf7e-lb-font' };
  var FONT_CSS_HOSTS = /^https:\/\/(fonts\.googleapis\.com|use\.typekit\.net|fonts\.bunny\.net)\//;

  /*
   * Contrast guard. Colors read from the page may not work for the form: no button near
   * the iframe (the accent is guessed from a link), a pale brand color, a footer label
   * made for another background. Each color is converted to OKLCH and only its lightness
   * is moved (hue and chroma kept, so it stays the brand color) until it has enough
   * contrast with what it sits on. ?cf7_embed_raw=1 turns this off for comparison.
   */
  var ctx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
  function rgba(css, under) {
    ctx.clearRect(0, 0, 1, 1);
    ctx.fillStyle = '#000'; ctx.fillStyle = css; // invalid -> stays black
    ctx.fillRect(0, 0, 1, 1);
    var d = ctx.getImageData(0, 0, 1, 1).data, a = d[3] / 255;
    var c = [d[0], d[1], d[2]];
    if (a < 1 && under) c = c.map(function (v, i) { return v * a + under[i] * (1 - a); }); // over the background
    return a === 0 && !under ? null : c;
  }
  function lum(c) {
    return c.map(function (v) { v /= 255; return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); })
      .reduce(function (s, v, i) { return s + v * [0.2126, 0.7152, 0.0722][i]; }, 0);
  }
  function ratio(a, b) { var x = lum(a), y = lum(b); return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05); }
  function toOklch(c) {
    var l = c.map(function (v) { v /= 255; return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); });
    var L = Math.cbrt(0.4122214708 * l[0] + 0.5363325363 * l[1] + 0.0514459929 * l[2]);
    var M = Math.cbrt(0.2119034982 * l[0] + 0.6806995451 * l[1] + 0.1073969566 * l[2]);
    var S = Math.cbrt(0.0883024619 * l[0] + 0.2817188376 * l[1] + 0.6299787005 * l[2]);
    var ok = [0.2104542553 * L + 0.7936177850 * M - 0.0040720468 * S, 1.9779984951 * L - 2.4285922050 * M + 0.4505937099 * S, 0.0259040371 * L + 0.7827717662 * M - 0.8086757660 * S];
    return [ok[0], Math.hypot(ok[1], ok[2]), Math.atan2(ok[2], ok[1])];
  }
  function fromOklch(o) {
    var a = o[1] * Math.cos(o[2]), b = o[1] * Math.sin(o[2]);
    var L = Math.pow(o[0] + 0.3963377774 * a + 0.2158037573 * b, 3), M = Math.pow(o[0] - 0.1055613458 * a - 0.0638541728 * b, 3), S = Math.pow(o[0] - 0.0894841775 * a - 1.2914855480 * b, 3);
    return [4.0767416621 * L - 3.3077115913 * M + 0.2309699292 * S, -1.2684380046 * L + 2.6097574011 * M - 0.3413193965 * S, -0.0041960863 * L - 0.7034186147 * M + 1.7076147010 * S]
      .map(function (v) { v = v <= 0.0031308 ? 12.92 * v : 1.055 * Math.pow(v, 1 / 2.4) - 0.055; return Math.round(Math.min(1, Math.max(0, v)) * 255); });
  }
  function css(c) { return 'rgb(' + c.map(Math.round).join(' ') + ')'; }
  // fg with its OKLCH lightness moved (the shorter way that works) until ratio(fg, bg) >= min.
  function fix(fg, bg, min) {
    if (ratio(fg, bg) >= min) return fg;
    var o = toOklch(fg), best = null;
    [-1, 1].forEach(function (dir) {
      for (var i = 1; i <= 100; i++) {
        var L = o[0] + dir * i * 0.01;
        if (L < 0 || L > 1) break;
        var c = fromOklch([L, o[1], o[2]]);
        if (ratio(c, bg) >= min) { if (!best || i < best.i) best = { i: i, c: c }; break; }
      }
    });
    return best ? best.c : (ratio([0, 0, 0], bg) > ratio([255, 255, 255], bg) ? [0, 0, 0] : [255, 255, 255]);
  }
  function borderColor(b) { var m = /^\S+\s+\S+\s+(.+)$/.exec(b || ''); return m ? m[1] : null; }
  function borderWidth(b) { return parseFloat(b) || 0; }

  function guard(t) {
    var root = document.documentElement.style, set = function (k, v) { root.setProperty(k, v); };
    var bg = rgba(t.bg || '#fff') || [255, 255, 255];
    var text = fix(rgba(t.text || '#1e1e1e', bg), bg, 4.5);
    set('--cf7e-text', css(text));
    if (t.lbColor) set('--cf7e-lb-color', css(fix(rgba(t.lbColor, bg), bg, 4.5)));
    set('--cf7e-error', css(fix(rgba('#d63638', bg), bg, 4.5)));
    var accent = fix(rgba(t.accent || css(text), bg), bg, 3);
    set('--cf7e-accent', css(accent));

    // Fields: text readable on the field; the field itself must not disappear into the background.
    var inBg = rgba(t.inBg || 'transparent', bg) || bg;
    set('--cf7e-in-text', css(fix(rgba(t.inText || css(text), inBg), inBg, 4.5)));
    var sides = ['inTop', 'inRight', 'inBottom', 'inLeft'];
    var fieldMin = t.strict ? 3 : 1.5; // strict: WCAG 1.4.11 non-text contrast
    var shown = ratio(inBg, bg) >= fieldMin || sides.some(function (k) {
      return t[k] && borderWidth(t[k]) > 0 && ratio(rgba(borderColor(t[k]), bg) || bg, bg) >= fieldMin;
    });
    if (!shown) {
      sides.forEach(function (k) {
        // No field on the page: the default border (text at 35% over the background).
        var v = t[k] || '1px solid ' + css(text.map(function (x, i) { return x * 0.35 + bg[i] * 0.65; }));
        if (!borderWidth(v)) return;
        var c = fix(rgba(borderColor(v), bg) || text, bg, fieldMin);
        set('--cf7e-' + k.replace('in', 'in-').toLowerCase(), v.replace(/^(\S+\s+\S+\s+).+$/, '$1' + css(c)));
      });
    }

    // Button: it must stand out from the background (fill or border), and its label must be readable.
    var gradient = t.btnImage && t.btnImage !== 'none';
    var fill = t.btnBg === undefined ? accent : rgba(t.btnBg, null);
    var border = t.btnBorder && borderWidth(t.btnBorder) > 0 ? rgba(borderColor(t.btnBorder), bg) : null;
    if (!gradient) {
      if (fill && !(ratio(fill, bg) >= 3 || (border && ratio(border, bg) >= 3))) {
        fill = fix(fill, bg, 3);
      } else if (!fill && border && ratio(border, bg) < 3) {
        border = fix(border, bg, 3);
        set('--cf7e-btn-border', t.btnBorder.replace(/^(\S+\s+\S+\s+).+$/, '$1' + css(border)));
      }
      if (fill) set('--cf7e-btn-bg', css(fill));
      var under = fill || bg;
      var label = rgba(t.btnText || '#fff', under);
      if (!t.btnText) label = ratio([255, 255, 255], under) >= ratio([20, 20, 20], under) ? [255, 255, 255] : [20, 20, 20];
      // A pair taken from the site's own button is its design: hold it only to 3:1 (bold button text).
      // A guessed color gets the full 4.5:1.
      set('--cf7e-btn-text', css(fix(label, under, t.btnBg === undefined ? 4.5 : 3)));
    }
  }

  window.addEventListener('message', function (e) {
    if (parents.indexOf(e.origin) < 0 || !e.data || e.data.type !== 'cf7-embed-style') return;
    styled = true;
    var t = e.data.tokens || {};
    Object.keys(map).forEach(function (k) {
      // Values are CSS values read from the parent's computed styles; reject anything that could break out.
      if (typeof t[k] === 'string' && t[k] && t[k].length < 300 && !/[;{}<>]|url\(/i.test(t[k])) {
        document.documentElement.style.setProperty(map[k], t[k]);
      }
    });
    if (!/[?&]cf7_embed_raw=1/.test(location.search)) guard(t);
    // Web font style sheets (Google Fonts etc.) are loaded here; their fonts are served with CORS.
    var cssLoads = (e.data.fontLinks || []).filter(function (h) { return typeof h === 'string' && FONT_CSS_HOSTS.test(h); }).slice(0, 4).map(function (h) {
      return new Promise(function (done) {
        var l = document.createElement('link');
        l.rel = 'stylesheet'; l.href = h; l.onload = l.onerror = done;
        document.head.appendChild(l);
      }).then(function () { return document.fonts.ready; });
    });
    var loads = cssLoads.concat((e.data.fonts || []).slice(0, 8).map(function (f) {
      try {
        var face = new FontFace(f.family, f.data, { weight: String(f.weight), style: String(f.style) });
        document.fonts.add(face);
        return face.load().catch(function () {});
      } catch (err) { return Promise.resolve(); }
    }));
    Promise.race([Promise.all(loads), new Promise(function (r) { setTimeout(r, 2500); })]).then(show);
  });

  // Ask for the look until the parent script answers (it may load after this page).
  var tries = 0;
  (function ready() {
    if (styled) return;
    post({ type: 'cf7-embed-ready' });
    if (++tries < 15) setTimeout(ready, 100 * tries);
  })();
  setTimeout(function () { if (!styled) show(); }, 1500); // no parent script: show with defaults
  new ResizeObserver(height).observe(document.documentElement);
  // Focusing a field can scroll even an overflow:hidden page; the iframe shows everything, so undo it.
  window.addEventListener('scroll', function () { if (window.scrollY) window.scrollTo(0, 0); });
  window.addEventListener('load', height);
})();
</script>
</body>
</html>
    <?php
    exit;
  }
);