WordPress ???? ???? ?? WordPress ?? ????? ?? ?? ??? ??? ??? ?????. ??? ???? ???? ???? ?? ?? ??? ??? ??? ?? ??? ??? ?????. ??? HTML? ?????, ???? ????, ???? ????, ?? ???? ??? ?????.

??? ??? WordPress? ???? CMS? ??? ????? ?????. ? ?? ?? REST API (?? GraphQL)? ?? ??? ????. ??? ?? ??? ???? ??? ?????, ? ?? ?? ????? ???? ?? ???? ??? ???? ? ?? ????. ?? ??? ??? ??? ???? ???? ????.

??? ?? ? ?? ??? ??? ??? ?? ??? ???? ???????. ? ?? ??? ????.

• ?? ?? ??? ?? ??? ??? API? ?????? ??? ???, ??? ??? ??? ?? ??? ?????? ? ????. ?? ?? ?? ?? ??? ?? ??? ??? ?? ?? ??? ???? ?????.
• ?? ???? ??? ??? ??, ?? ? ??? ???? ??? ? ?????

?? ???? ?? ?? ???? ? Contact Form 7?? ?? REST API ?? ???? ??? ? ??? ?? ????, ?? ??? ????.

??? ? ???? ? ? ??? ???? ??? ?? WordPress ????? ?? ? ?? ???? ???? ? ???? ???? ??? ????. ??? ??? ?? ??? ?? ???????. ??? ??? ?????. ? ? WordPress ?? ? REST API? ???? ????. ?? ???? ???? ?? ????? ??? ? ??? ??? ?????. ???? ???? ?? ?????. ?? ??? WordPress ???? ?? ? ?? ???? ? ?? ? ? ????. ???? ? ? ?? ??? ???? ????? ?, ?? GPDR ??? ???? ???? ???? ???? ????.

??? ??? ??? ???? WordPress Form ????? ???? ?????. ??? ???, ???? ?? ? ??? ???, PDF, ?? ??? ?? ?? ??? ?? ? ?? ???? ???? ????. ?? ???? ???? ???? ?? ????.

WordPress ??? ???? ??? ??? ?? "????"???? WordPress? ?????? Form Plugin? REST API? ???? ?? ??? ?? ? ? ????. ?? ??, ???? ?? CSS ??? ??? ???? ??? ???? ?? BEM? ?? ??? ????? ??? ?? ?? ??? ??? ? ??? ?????? ???? ?? ??????.

? ??? ??? ? ?? WordPress ?? ???? ?? ?? ???? ???? ???? ???? ? ???? ???? ?? ?? ??? ???? ??? ???? ????. ??? ??? ? ????? ? ?? ?? ??? ???????. ??? ??? ??? ???? ?? ??? ????? ???? ???? ???? ????.

???, ??? ?????.

?? ???

??? ??? ? ??? ?????. ? ?? ???? ??? ??? ???? URL? ?? ??? ?? ID???.

??? ?? 7 REST API? ????? ??? ? ? ?? ??? ? ??? ??? ????.

 https : //your-site.tld/wp-json/contact-form-7/v1/contact-forms/ <form_id>/???</form_id>

?? ??? ???? ?? ?? ???? ??? ?? ??? ????.

 https : //your-site.tld/wp-json/gf/v2/forms/ <form_id>/submissions</form_id>

?? ??? REST API? ????? ???????. ?? ??????? ???? ??? ? ?? ??? API ???? ???? "API? ?? ??? ???"??? ???????. ?? ?? ?? ???? ???? ???? API ?? ?? ??? ????.

???? (2024 ? 9 ? 10 ?) : ID? ??? ?? 7 ?? 5.8?? ????? ?? ?? ???? URL?? ?? ? ????.

??? ??

? ?? ???? ?? ????? 5 ?? ??? ????.

• ??? ??? ??
• ??? ??? ??
• 1957 ? 10 ? 4 ? ??? ??? ???? ??? ?? ??
• ??? TextRea
• ??? ???

Contact Form 7? ??? ?? ?? ?? ?? ?? ???? ???????.

 {
  "Somebodys-Name": "Marian Kenney",
  "??-??": "[??? ??]",
  "?? ?": "1922-03-11",
  "??? ???": "",
  "?? ???": "1"
}

?? ??? ?? ?? ???? ?????. ?? _ ???? ?? ?? ?? ? ?? ?? ID? ???????. ??? ?? ? ? ID? ?????.

 {
  "Input_1": "Marian Kenney",
  "input_2": "[??? ??]",
  "?? _3": "1922-03-11",
  "input_4": "",
  "input_5_1": "1"
}

??? ??

?? ?? ??? ?? ?? ???? ?? ??? ??? ? ????. ??? ??? ?? ??? ?? ???????.

?? ?? ???? ??? ?? 7? ?? ?? ?? HTML ??? ????.

?? ??? ?? ??? ?? ?? ? ???????.

??? ?? ??? HTML?? ??? ? ???? ??? ?? ????????. ?? ???? ? ?? ??? FormData? Fetch? ?? ???? ????.

 const formsubmissionHandler = (???) => {
  event.preventDefault ();

  const formelement = event.target,
    {action, method} = Formelement,
    Body = New FormData (Formelement);

  ?? (??, {
    ??,
    ?
  })
    . then ((??) => response.json ())
    . ((??) => {
      // ??? ???? ??? ?????
      if (isformSubmissionError (??)) {
        // ??? ?? ????? ? ???? ?????
      }
      // ??? ?? ?????
    })
    .catch ((??) => {
      // ??? ????? ? ???? ?????.
    });
};

const formelement = document.querySelector ( "form");

formelement.addeventListener ( "??", formsubmissionHandler);

??? ?? ???? ???? ?? ? ??? ??? ??? ?? ?? ????. ??? ??? ? ?? ??? ?? ??? ????? ???? ?? ?? ??? ??? ????. ???, ??? ??? ????? ?? ?????.

• ?? ?? ?? ?? ???? ????
• ??? ?? ?? ?? ??? ? ??? ??? ????
• ?? ?????? ?????? ?????? ??????.

?? ??

?? HTML ?? ??? ??? ???? ? ??? ?? ????? ? ??? ??? JavaScript? ????? ?? ? ??? ??? ??? ? ????.

?? ? ??? ??? ???? Contact Form 7 ? Gravity Forms? ?? ????? ???? ??? ??? ??? ?? ?? ???? ?????. WordPress ???? ?? ??? ?? ? ? ???? ?????.

??? ?? ??? ??? ???? ??? ??? ?? ??? ?? ???? ??? ????? ??? ?? JavaScript ??? ???? ?? ?? ?? ??? ? ? ?? ??? ?? ??? ???? ?? ??? ? ? ????.

?? ? ??? ?? ? ???? ??? ??? ?? ???? ?? ???? ???? ?? ?? ? ??? ??? ???? ?? ?? DOM ??? ?? ??????.

?? ???

??? ?? 7? ?? ??? ?? ????? ?? ??? ??? ????.

 {
  "???": "#",
  "??": "validation_failed",
  "???": "?? ??? ??? ??? ????. ?? ???? ?? ??????."
  "?? ? _data_hash": "",
  "invalid_fields": [
    {
      "in in": "span.wpcf7-form-control-wrap.somebodys-name",
      "???": "??? ?????.",
      "Idref": Null,
      "ERRER_ID": "-VE-SOMEBODYS-NAME"
    },
    {
      "into": "span.wpcf7-form-control-wrap.any-email",
      "???": "??? ?????.",
      "Idref": Null,
      "error_id": "-Ve-any-Email"
    },
    {
      "in in": "span.wpcf7-form-control-wrap.be ofer-space-age",
      "???": "??? ?????.",
      "Idref": Null,
      "ERRER_ID": "-Ve-be-space-Age"
    },
    {
      "into": "span.wpcf7- ??-??-? .fake-terms",
      "???": "???? ??? ?? ?? ??? ???????.",
      "Idref": Null,
      "error_id": "-Ve-fake-terms"
    }
  ]]
}

???? ??? ??? ??? ????.

 {
  "???": "#",
  "??": "mail_sent",
  "???": "??? ??? ?????. ???????.",
  "?? ? _data_hash": "D52F9F9DE995287195409FE6DCDE0C50"
}

?? ???? ?? ??? ?? ?? ??? ? ????.

 {
  "is_valid": ??,
  "validation_messages": {
    "1": "? ??? ?????.",
    "2": "? ??? ?????.",
    "3": "? ??? ?????.",
    "5": "? ??? ?????."
  },
  "page_number": 1,
  "source_page_number": 1
}

??? ???? ??? ?? ??? ? ???.

 {
  "is_valid": true,
  "page_number": 0,
  "source_page_number": 1,
  "volictation_message": "<div id="'gform_confirmation_wrapper_1'class"> <div id="'gform_confirmation_message_1'class" gform_confirmation_message> ??? ?? ? ????!
  "?? _type": "???"
}<p> ? ? ???? ??? ??? ???? ??? ?? ??? ??? ??? ? ? ??? ????. ?? ??, ?? ??? ?? ????? HTML? ???? ??? ??? ?? ??? ??? ?? _ ???? ????. ??? ?? ? ??? ??????. ?? ????, ?? ?? 7? ??? ?? ???? ??? ?? ??? ??? ??? ???? ????. ?? ?? ?? ??? ? ????. ??? ????????.</p>
<p> ?? ?? ????, ??? ?? ???? ???? ?? ??? ???? ??? ????? ?? ????. ?? ??? ??? ????, ??? ??? ??? ??? ?? ?? ?? ??? ??? ?? ? ??? ??? ?? ? ????. ? ????? ??? ???? ?? ???? ???? ??? ???? ??? ?? ??? ????.</p>
<pre rel="JSON" data-line=""> {
  "issuccess": ??,
  "???": "?? ??? ??? ??? ????. ?? ???? ?? ??????."
  "ValidationError": {
    "somebodys-name": "? ??? ?????.",
    "?? ???": "? ??? ?????.",
    "?? _3": "? ??? ?????.",
    "?? _5": "? ??? ?????."
  }
}

??? ???? ???, ??? issuccess? true? ???? ? ??? ?? ?? ??? ?????.

 {
  "issuccess": ??,
  "???": "?? ???? ?????! ? ?? ??????.",
  "ValidationError": {}
}

?? ??? ??? ??? ?? ??? ????? ?? ????? ?????. ??? ?? 7 ??? ????? ??? ??? ????.

 const normalizeContActForm7Response = (??) => {
  // ?? ??? ??? ?? ??? ?????.
  const issuccess = response.status === 'mail_sent';
  // ?? ??? ?? ???? ?????
  const ??? = response.message;
  const validationError = issuccess
    ? {}
    : // ?? ??? ??? ?????.
    ??.
      response.invalid_fields.map ((error) => {
        // "CF7- ?? ??-?"?? ??? ?????.
        const key = /cf7;-az ]* (.

        return [key, error.message];
      })
    );

  ?? {
    issuccess,
    ???,
    ValidationError,
  };
};

??? ??????? ??? ??? ??? ????.

 const normalizegravityformsResponse = (??) => {
  // ?? ???? ??? ?????
  const issuccess = response.is_valid;
  const ??? = issuccess
    ? // html? ??? ??? ??? ????? ?? ????.
      striphtml (response.confirmation_message)
    : // ???? ?? ???? ???? ??? ??????.
      '??? ????????.';
  const validationError = issuccess
    ? {}
    : // ?? ??? ???? ????.
      // ????? ?? ? ??? ?????
      ??.
        ??.
            response.validation_messages
        .
      );

  ?? {
    issuccess,
    ???,
    ValidationError,
  };
};

??? ??? ?? ??, ?? ??? ? ?? ???? ???? ??? ??? ???????. ??? ??? ??? ???? ??? ? ??? ??? ??? ??? ??? ??? ???? ??? ?? ???? ??????. ???? ?? ?????? ??? ??????? ? ?? ?? ?? ? ? ????.

??? ??? ??? ???? ?? ??? ????. ????? ?? ????? ?? ????. ??? ?? ?? ??? ?? ???? ????? ????? ???? ?????? ?? ??? ? ? ????. Alpine.js? CSS- ???? ???? ????? ??? ?? ???? ????? ???? ?????. ?? ?? ??? ?? ???? ??? ??? ? ? ????. ??? ??? ??? ???? ???????.

???

WordPress Form ????? ???? ??? ?? ??? ???? ?? ????? ???? ?? ??? ?????? ?????? ??? ? ??? ???? ?? ?? ? ? ????. ??? ??? ??? ??? ??? ?? ????? ?? ? ??? ?????? ?? ? ?? ????.

??, ?? ??? ??, ??? ? ???? ???? ?? ????? ????? ???? ?? ?? ??? ??? ? ??? ??? ?????, ??? ???? ? ?? ??? ????? ?? ?? ???? ???? ?? ? ?? ???? ?? ? ??? ???, ?? ??? ??????? ???, ??? ??? ?? ????.

WordPress? ???? CMS? ???? ?? ????? ??? API? ????? ?? ?? ???? ???? ?? ? ?? ???? ??????. ???? ???? ? ??? ????. ??? ?? ?? ?? ?? ???? ???? ????? ??? WordPress ?? ??????? ??? ?? ????. ??? ?? ???? ??? ?? ??? ?? ??? ??? ????? ??? ? ????. ?? ??? ??? ??? ?? ? ???, ??? ??????? ??? ? ??? ???? ?????.