[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:

<label for='smcf-gender'>*" . __("Gender", "smcf") . ":</label>
<input type='text' id='smcf-gender' class='smcf-input' name='gender' value='' tabindex='1002' />";

(replace all instances of the word “gender” with whatever your form field is called)

…beneath this…

<label for='smcf-name'>*" . __("Name", "smcf") . ":</label>
<input type='text' id='smcf-name' class='smcf-input' name='name' value='' tabindex='1001' />

– 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/