{"id":3529,"date":"2021-01-13T13:15:54","date_gmt":"2021-01-13T13:15:54","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=3529"},"modified":"2025-11-17T15:26:09","modified_gmt":"2025-11-17T15:26:09","slug":"typical-form-example","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/html\/forms-html\/example-forms\/typical-form-example","title":{"rendered":".Typical form example"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">With PHP code and styling<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">PHP<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>\n  $CheckboxSetting1 = False;\n  $TextboxSetting1 = \"\";\n  $TextareaSetting1 = \"\";\n  $SelectBoxSettingA = 0;\n  if (isset($_POST&#91;'form_submit_id']) &amp;&amp; ($_POST&#91;'form_submit_id'] == 'admin_store_settings'))\n  {\n    \/\/------------------------------\n    \/\/----- STORE NEW SETTINGS -----\n    \/\/------------------------------\n   \n    \/\/CHECK THE FORM NONCE FIELD IS VALID\n    if (\n      (!isset( $_POST&#91;'my_form_nonce'])) ||\n      (wp_verify_nonce($_POST&#91;'my_form_nonce'], 'my_form') !== 1)       \/\/1=nonce created within last 12 hours\n    )\n    {\n      wp_redirect( home_url( '\/' ) );\n      die;\n    }\n\n    $CheckboxSetting1 = False;\n    if(isset($_POST&#91;'CheckboxSetting1']) &amp;&amp; $_POST&#91;'CheckboxSetting1'] == 'Yes')\n      $CheckboxSetting1 = True;\n    \n    $TextboxSetting1 = \"\";\n    if(isset($_POST&#91;'TextboxSetting1']))\n    {\n      $TextboxSetting1 = trim($_POST&#91;'TextboxSetting1']);\n      $TextboxSetting1 = stripslashes($TextboxSetting1);\n      $TextboxSetting1 = htmlspecialchars($TextboxSetting1, ENT_QUOTES);\n    }\n    \n    $TextareaSetting1 = \"\";\n    if(isset($_POST&#91;'TextareaSetting1']))\n    {\n      $TextareaSetting1 = trim($_POST&#91;'TextareaSetting1']);\n      $TextareaSetting1 = stripslashes($TextareaSetting1);\n      $TextareaSetting1 = htmlspecialchars($TextareaSetting1, ENT_QUOTES);\n    }\n    \n    $SelectBoxSettingA = 0;\n    if(isset($_POST&#91;'SelectBoxSettingA']))\n      $SelectBoxSettingA = intval($_POST&#91;'SelectBoxSettingA']);\n  }\n\n  $CheckboxSetting1_Checked = \"\";\n  if ($CheckboxSetting1)\n    $CheckboxSetting1_Checked = \"checked\";\n\n  $SelectBoxSettingA = 0;\n  $SelectBoxSettingA_Selected = array();\n  $SelectBoxSettingA_Selected = array_fill(0, 3, \"\");\t\t\/\/Fill an array from index 0, 3 items long, with default value \"\"\n  $SelectBoxSettingA_Selected&#91;($SelectBoxSettingA)] = \"selected \";\n\n\n  \/\/-----------------------\n  \/\/-----------------------\n  \/\/----- HTML OUTPUT -----\n  \/\/-----------------------\n  \/\/-----------------------\n  $HtmlOutput = '';\n  \n  $OurNonceField = wp_nonce_field( 'my_form', 'my_form_nonce', true, false );   \/\/Used to validate that the contents of the form request came from the current site and not somewhere else\n\n \n  \/\/(No form action=\"\" specified so form will submit to same URI as this page)\n  $HtmlOutput .= &lt;&lt;&lt;_END\n    &lt;h3>Settings&lt;\/h3>\n    &lt;form method=\"POST\">\n      &lt;input type=\"hidden\" name=\"form_submit_id\" value=\"admin_store_settings\" \/>\n      $OurNonceField\n\n      &lt;input type=\"checkbox\" name=\"CheckboxSetting1\" $CheckboxSetting1_Checked value=\"Yes\" \/>&lt;label>Checkbox Setting 1&lt;\/label>\n\n      &lt;label>Textbox Setting 1:&lt;\/label>\n      &lt;input type=\"text\" name=\"TextboxSetting1\" style=\"width:100%; \" value=\"$TextboxSetting1\" \/>\n\n      &lt;label>Textarea Setting 1:&lt;\/label>\n      &lt;textarea name=\"TextareaSetting1\" style=\"width:100%; height:60px;\">$TextareaSetting1&lt;\/textarea>\n\n      &lt;label>Select Box Setting 1:&lt;\/label>\n      &lt;select name=\"SelectBoxSettingA\" style=\"width:200px\">\n        &lt;option value=\"0\" $SelectBoxSettingA_Selected&#91;0]>My Option 0&lt;\/option>\n        &lt;option value=\"1\" $SelectBoxSettingA_Selected&#91;1]>My Option 10&lt;\/option>\n        &lt;option value=\"2\" $SelectBoxSettingA_Selected&#91;2]>My Option 20&lt;\/option>\n        &lt;option value=\"3\" $SelectBoxSettingA_Selected&#91;3]>My Option 30&lt;\/option>\n      &lt;\/select>\n\n      &lt;input type=\"submit\" class=\"AdminButton\" value=\"Save Settings\" \/>\n    &lt;\/form>\n_END;<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">CSS<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/*-----------------*\/\n\/*-----------------*\/\n\/*----- ADMIN -----*\/\n\/*-----------------*\/\n\/*-----------------*\/\n\n.AdminPage {\n\n}\n\n\/*----- FORM FIELDS -----*\/\n.AdminPage label {\n  display: block;    \/*Cause newline after*\/\n}\n\n.AdminPage input&#91;type=\"text\"] {\n  margin-bottom: 10px;\n  display: block;    \/*Cause newline after*\/\n  font-size: 16px;   \/*min 16px for safari*\/\n}\n\n.AdminPage input&#91;type=\"file\"] {\n  margin-bottom: 10px;\n  display: block;    \/*Cause newline after*\/\n  font-size: 16px;   \/*min 16px for safari*\/\n}\n\n.AdminPage textarea {\n  margin-bottom: 10px;\n  display: block;    \/*Cause newline after*\/\n  font-size: 16px;   \/*min 16px for safari*\/\n}\n\n.AdminPage input&#91;type=\"checkbox\"] {\n  display: inline-block;\n}\n.AdminPage input&#91;type=\"checkbox\"] + label {\n  display: inline-block;\n  margin-bottom: 10px;\n}\n\n.AdminPage select {\n  border: 1px solid #f6f6f6;\n  margin-bottom: 10px;\n  padding: 2px;\n  display: block;    \/*Cause newline after*\/\n  font-size: 16px;   \/*min 16px for safari*\/\n}\n\n\n\/*----- BUTTON -----*\/\na.AdminButton, a.AdminButton:hover, a.AdminButton:visited,\n input&#91;type=\"submit\"].AdminButton {\n  background-color: #007cba;\n  border: 1px solid #007cba;\n  border-radius: 3px 3px 3px 3px;\n  min-height: 36px;\n  min-width: 80px;\n  margin-top: 8px;\n  margin-right: 8px;\n  margin-left: 0px;\n  margin-bottom: 8px;\n  padding-top: 6px;\n  padding-right: 6px;\n  padding-left: 6px;\n  padding-bottom: 6px;\n  font-size: 13px;\n  font-weight: normal;\n  line-height: 40px;\n  color: #fff;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n input&#91;type=\"submit\"].AdminButton {\n   line-height: 13px;\n}\n\n\/*----- Messages -----*\/\n.AdminPageMessage {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  text-align: left;\n  font-weight: bold;\n  color: #00B35F;\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>With PHP code and styling PHP CSS<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[289],"tags":[],"class_list":["post-3529","post","type-post","status-publish","format-standard","hentry","category-example-forms"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=3529"}],"version-history":[{"count":5,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3529\/revisions"}],"predecessor-version":[{"id":5179,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3529\/revisions\/5179"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=3529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=3529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=3529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}