With PHP code and styling
PHP
if (isset($_POST['form_submit_id']) && ($_POST['form_submit_id'] == 'admin_store_settings'))
{
//------------------------------
//----- STORE NEW SETTINGS -----
//------------------------------
$CheckboxSetting1 = False;
if(isset($_POST['CheckboxSetting1']) && $_POST['CheckboxSetting1'] == 'Yes')
$CheckboxSetting1 = True;
$TextboxSetting1 = "";
if(isset($_POST['TextboxSetting1']))
{
$TextboxSetting1 = trim($_POST['TextboxSetting1']);
$TextboxSetting1 = stripslashes($TextboxSetting1);
$TextboxSetting1 = htmlspecialchars($TextboxSetting1, ENT_QUOTES);
}
$TextareaSetting1 = "";
if(isset($_POST['TextareaSetting1']))
{
$TextareaSetting1 = trim($_POST['TextareaSetting1']);
$TextareaSetting1 = stripslashes($TextareaSetting1);
$TextareaSetting1 = htmlspecialchars($TextareaSetting1, ENT_QUOTES);
}
$SelectBoxSettingA = 0;
if(isset($_POST['SelectBoxSettingA']))
$SelectBoxSettingA = intval($_POST['SelectBoxSettingA']);
}
//-----------------------
//-----------------------
//----- HTML OUTPUT -----
//-----------------------
//-----------------------
$HtmlOutput = '';
$OurNonceField = wp_nonce_field( 'cf_form', 'cf_form_nonce', true, false ); //Used to validate that the contents of the form request came from the current site and not somewhere else
//-------------------------
//----- SETTINGS FORM -----
//-------------------------
$CheckboxSetting1_Checked = "";
if (1)
$CheckboxSetting1_Checked = "checked";
$TextboxSetting1 = "";
$TextareaSetting1 = "";
$SelectBoxSettingA = 0;
$SelectBoxSettingA_Selected = array();
$SelectBoxSettingA_Selected = array_fill(0, 3, ""); //Fill an array from index 0, 3 items long, with default value ""
$SelectBoxSettingA_Selected[($SelectBoxSettingA)] = "selected ";
//(No form action="" specified so form will submit to same URI as this page)
$HtmlOutput .= <<<_END
<h3>Settings</h3>
<form method="POST">
<input type="hidden" name="form_submit_id" value="admin_store_settings" />
$OurNonceField
<input type="checkbox" name="CheckboxSetting1" $CheckboxSetting1_Checked value="Yes" /><label>Checkbox Setting 1</label>
<label>Textbox Setting 1:</label>
<input type="text" name="TextboxSetting1" style="width:100%; " value="$TextboxSetting1" />
<label>Textarea Setting 1:</label>
<textarea name="TextareaSetting1" style="width:100%; height:60px;">$TextareaSetting1</textarea>
<label>Select Box Setting 1:</label>
<select name="SelectBoxSettingA" style="width:200px">
<option value="0" $SelectBoxSettingA_Selected[0]>My Option 0</option>
<option value="1" $SelectBoxSettingA_Selected[1]>My Option 10</option>
<option value="2" $SelectBoxSettingA_Selected[2]>My Option 20</option>
<option value="3" $SelectBoxSettingA_Selected[3]>My Option 30</option>
</select>
<input type="submit" class="AdminButton" value="Save Settings" />
</form>
_END;
CSS
/*-----------------*/
/*-----------------*/
/*----- ADMIN -----*/
/*-----------------*/
/*-----------------*/
.AdminPage {
}
/*----- FORM FIELDS -----*/
.AdminPage label {
display: block; /*Cause newline after*/
}
.AdminPage input[type="text"] {
margin-bottom: 10px;
display: block; /*Cause newline after*/
font-size: 16px; /*min 16px for safari*/
}
.AdminPage input[type="file"] {
margin-bottom: 10px;
display: block; /*Cause newline after*/
font-size: 16px; /*min 16px for safari*/
}
.AdminPage textarea {
margin-bottom: 10px;
display: block; /*Cause newline after*/
font-size: 16px; /*min 16px for safari*/
}
.AdminPage input[type="checkbox"] {
display: inline-block;
}
.AdminPage input[type="checkbox"] + label {
display: inline-block;
margin-bottom: 10px;
}
.AdminPage select {
border: 1px solid #f6f6f6;
margin-bottom: 10px;
padding: 2px;
display: block; /*Cause newline after*/
font-size: 16px; /*min 16px for safari*/
}
/*----- BUTTON -----*/
a.AdminButton, a.AdminButton:hover, a.AdminButton:visited,
input[type="submit"].AdminButton {
background-color: #007cba;
border: 1px solid #007cba;
border-radius: 3px 3px 3px 3px;
min-height: 36px;
min-width: 80px;
margin-top: 8px;
margin-right: 8px;
margin-left: 0px;
margin-bottom: 8px;
padding-top: 6px;
padding-right: 6px;
padding-left: 6px;
padding-bottom: 6px;
font-size: 13px;
font-weight: normal;
line-height: 40px;
color: #fff;
text-align: center;
text-decoration: none;
cursor: pointer;
}
input[type="submit"].AdminButton {
line-height: 13px;
}
/*----- Messages -----*/
.AdminPageMessage {
margin-top: 12px;
margin-bottom: 12px;
text-align: left;
font-weight: bold;
color: #00B35F;
}
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.