Title: [Plugin: SimpleModal Contact Form (SMCF)] Tutorial: Adding custom form fields
Last modified: August 20, 2016
---
# [Plugin: SimpleModal Contact Form (SMCF)] Tutorial: Adding custom form fields
* [Dominor Novus](https://wordpress.org/support/users/dominor-novus/)
* (@dominor-novus)
* [13 years, 9 months ago](https://wordpress.org/support/topic/plugin-simplemodal-contact-form-smcf-tutorial-adding-custom-form-fields/)
* Hi all,
* Here are step by step instructions for adding custom form fields that validate.
The FAQ instructions seem outmoded so hopefully this will help.
* **1) Add the form field:**
– In wp-admin go to plugins > editor > simplemodal-
contact-form-smcf/smcf.php – Find the $output variable in function footer().
Inside the form tags add a label and a form field…
* e.g.
* Add this:
* ```
";
```
* (replace all instances of the word “gender” with whatever your form field is
called)
* …beneath this…
* ```
```
* – Fix the tabindex values of each of the form fields i.e. they should be in order:
1001, 10002, 1003 etc.
* **2) Add the error message details:**
– In wp-admin go to plugins > editor >
simplemodal-contact-form-smcf/smcf.php – Find the $output variable in function
footer(). Inside the block of JavaScript code that (var smcf_messages) add a
line to determine the error message:
* `gender: '" . addslashes(__("gender", "smcf")) . "',`
* (replace all instances of the word “gender” with whatever your form field is
called)
* …beneath…
* `name: '" . addslashes(__("Name", "smcf")) . "',`
* **3) Make sure your field is sent in the email:**
– In wp-admin go to plugins
> editor > simplemodal-contact-form-smcf/smcf_data.php
* Beneath:
* `$name = isset($_POST["name"]) ? $_POST["name"] : "";`
* …add…
* `$gender = isset($_POST["gender"]) ? $_POST["gender"] : "";`
* (replace all instances of the word “gender” with whatever your form field is
called)
* – Go to this line of code:
* `// make sure the token matches`
* and just beneath it replace…
* `sendEmail($name, $email, $subject, $message, $cc);`
* with
* ```
sendEmail($name, $email, $gender, $subject, $message, $cc);
```
* (note that only difference is that $gender has been added)
* (replace all instances of the word “gender” with whatever your form field is
called)
* – Go to this line of code:
* `// validate and send email`
* and just beneath it replace…
* `function sendEmail($name, $email, $subject, $message, $cc) {`
* with
`function sendEmail($name, $email, $gender, $subject, $message, $cc) {`
* (note that only difference is that $gender has been added)
* (replace all instances of the word “gender” with whatever your form field is
called)
* – Go to this line of code:
* `// filter name and subject`
* and just beneath…
* `$name = filter($name);{`
* add
`$gender = filter($gender);`
* (replace all instances of the word “gender” with whatever your form field is
called)
* – Go to this line of code:
* `// Set and wordwrap message body`
* and just beneath…
* `$body = "Name: $name\n\n";`
* add
`$body .= "Gender: $gender\n\n";`
* (replace all instances of the word “gender” with whatever your form field is
called)
* **4) Add your field to the jQuery validation process:**
– In wp-admin go to
plugins > editor > simplemodal-contact-form-smcf/js/smcf.js
* Beneath:
* ```
if (!$('#smcf-container #smcf-name').val()) {
req.push(smcf_messages.name);
}
```
* …add…
* ```
if (!$('#smcf-container #smcf-gender').val()) {
req.push(smcf_messages.gender);
}
```
* (replace all instances of the word “gender” with whatever your form field is
called)
* That’s it! I enjoy this plug-in so hopefully these instructions will keep it
alive.
* **\*\*\*NOTE! If you update this plugin to a newer version, your edits will be
lost! Save a copy!\*\*\***
* [http://wordpress.org/extend/plugins/simplemodal-contact-form-smcf/](http://wordpress.org/extend/plugins/simplemodal-contact-form-smcf/)
Viewing 8 replies - 1 through 8 (of 8 total)
* [Javier Ferraz](https://wordpress.org/support/users/javierferraz/)
* (@javierferraz)
* [13 years, 4 months ago](https://wordpress.org/support/topic/plugin-simplemodal-contact-form-smcf-tutorial-adding-custom-form-fields/#post-2994871)
* Very nice tutorial, but.. if the field we want to add is a radio button field?
* I´m afraid the last validation step is not possible.. in the jQuery validation
process is not possible to add this:
* if (!$(‘#smcf-container #smcf-gender’).val()) {
req.push(smcf_messages.gender);}
* Because the radio button does not suppor id=”#”… Any idea?
* Thanks in advance, good tutorial indeed!
* Thread Starter [Dominor Novus](https://wordpress.org/support/users/dominor-novus/)
* (@dominor-novus)
* [13 years, 4 months ago](https://wordpress.org/support/topic/plugin-simplemodal-contact-form-smcf-tutorial-adding-custom-form-fields/#post-2994872)
* Hi Javier,
* I believe that when I encountered this issue, I instead used a non-mandatory
single checkbox since I only required two choices for the user e.g. “Yes” or “
No”.
* Example: `$somecheckbox = isset($_POST["somecheckbox"]) ? $_POST["somecheckbox"]:"
No";`
* I’ve researched the non-WordPress version of the plugin but could not find anything
specifically of use regarding radio button validation: [http://www.ericmmartin.com/projects/simplemodal_v12/](http://www.ericmmartin.com/projects/simplemodal_v12/)
* Still, you have 3 work-arounds in making this work (personally, I’d go with work-
around 3):
1. Use a checkbox instead of radio buttons (this won’t work if you have more than
two radio options however).
2. Use a `