WordPress.org

Ready to get started?Download WordPress

Forums

SimpleModal Contact Form (SMCF)
Tutorial: Adding custom form fields (9 posts)

  1. Dominor Novus
    Member
    Posted 1 year ago #

    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/

  2. Javier Ferraz
    Member
    Posted 1 year ago #

    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!

  3. Dominor Novus
    Member
    Posted 1 year ago #

    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/

    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 <select> element instead of radio buttons (this will allow for unlimited options).
    3. Use radio buttons but instead of following the above tutorial, create a hidden text box (http://www.echoecho.com/htmlforms07.htm). Using jQuery, you can then set the radio buttons to dynamically change the value of the hidden text box ( here's the full code and a live example: http://jsfiddle.net/jcoc611/rhcd2/1/ ). Then, you simply have to apply the above tutorial steps to the hidden text box. The end user knows no different. Problem solved.

    If you're absolutely insistent on forcing the plugin to validate radio fields rather than using my above recommendations, post a question on http://www.stackoverflow.com. Include an example of the default code of the "last validation step" and ask how to modify it to validate radio fields.

    If you need further help on any of the above, please elaborate on what you're trying to achieve. i.e. How many radio options do you require? Is your radio group a mandatory field? Provide the HTML mark-up of your radio field.

    Good luck. Let me know what approach you've taken.

  4. Javier Ferraz
    Member
    Posted 1 year ago #

    Thanks for your quick and accurate reply!!!

    I agree with you the best method is third one. I´m trying to implement it, but I am having a minor issue (Im sure its my fault, Im not very good with js..).

    I´ve included the hidden text field in the form in this website. The form is, of course, simple modal contact form - it can be shown clicking in the button with the calculator icon just above the blue footer zone.

    BUT: Althoug Ive included the js code in a new js file, and linked it, see below, the code gives no new values to the hidden input field while we click in the radio buttons. I ve testing it using a normal "text" field to know if everything were working properly.. and doesn´t.. :(

    <script type='text/javascript' src='http://www.acquajet.com/wp-content/plugins/simplemodal-contact-form-smcf/js/smcf2.js'></script>

    I am afraid Ive included badly this code, because of my js unexperience... Surely including it in a different way, or in other place, everything work..

    Moreover, the rest of the validation works perfectly, so if we can make this little issue works, everything will be ok!!

    If not, I will try with the select option, but this one seems to be much more elegant and complete..

    Can you give it a try? Thanks in advance!! Regards!

  5. Javier Ferraz
    Member
    Posted 1 year ago #

    EY! EVERYTHING IS WORKING PROPERLY NOW!

    In the meantime I was writing to you, I decided to review the new js file, and found some errors on my side..

    Thank you very much for your help, you can see it working in this link, just clicking in the button with the calculator icon just above the blue footer zone.

    Thanks, kind regards,

  6. Dominor Novus
    Member
    Posted 1 year ago #

    Thanks for confirming what approach worked for you. Well done on persisting and resolving the issue. The end product and the overall website is well designed.

  7. gdisalvo
    Member
    Posted 1 year ago #

    Hello,

    I tried to add two new fields to the modal.
    Placement below the email field. Are now Phone and Activity.
    These are not required or I am not concerned if they are even filled in properly.

    I followed the above instruction and now the syntax is stating that I have an extra < sign somewhere and getting an error on the new additions/lines. The FOR and CLASS are highlighted. If I remove them and save it is working when I add them back it give the error message.

    The other two files are changes and no issues.
    Data and JS changed and look good according to the instructions only the PHP is giving the issue.

    Can you identify what could be the cause? Around FOR and Class having the issue?

    Thanks,

  8. Javier Ferraz
    Member
    Posted 1 year ago #

    Seem to be, as you have just said, a syntax error.. can you check you don´t have any extra "<", o any non-closed ", or ''.. ?

    Copy here the php code, in order to double check it.

    Thanks, regards,

  9. artbyjacqui@gmail.com
    Member
    Posted 1 year ago #

    I had the same issue gdisalvo, but I found that I had an extra "; after

    <input type='text' id='smcf-phone' class='smcf-input' name='phone' value='' tabindex='1003' />

    Just make sure "; comes after the last field in your list.

    I deleted the extra one and it worked great.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic