Wordpress Contact Form 7 Dynamic Mail To Email Content based on user input?

Question

The contact form I'm using has a "State/Province" drop-down menu that uses the pipe command to set a dynamic recipient. So for instance NJ will set the recipient of the email to "[email protected]" and CA will set it to "[email protected]".

But what I need now is for the content of the email to change dynamically depending on whether the recipient is [email protected] or [email protected].

Specifically, what needs to be added is more contact information such as CAEmail's phone number and full name (this email is being sent to the user). I'm using Contact Form 7 with the Dynamic Text Extension add-on. I think this is possible but since I'm new to Wordpress, I'm not sure if this is something I need to mess with the PHP with directly or if I can solve this using some fancy footwork with the Dynamic Text Areas (or Dynamic Hidden Text Areas).

From a programmer's perspective, I would simply use IF statements. If the submission is NY, then write "NY's contact info" and send the email. And I would just brute-force the possibilities (not every state has a unique recipient. There are only a few possibilities... around 10). But I'm not sure how to accomplish this in Wordpress using Contact Form 7. Can anyone point me in the right direction?

All help is much appreciated!

Answer 1

I would recommend following the guide from here: http://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery?replies=8

The guide is posted here in case that link disappears.

1. Add the JQuery script to your theme Download and save the jQuery script from the official source here, and save it into the /js/1.7.1/ folder for your theme. You may need to create the folders, if they aren't already there for your theme (example: ./wordpress/wp-content/themes/your-theme-name/js/1.7.1/)

2. Create a simple form using Contact Form 7 Here is the code for the form:

<div id="contactForm">
<h2>Send us an email...</h2>
  <ul>
    <li>
      <label for="senderName">Your Name</label>[text* senderName /40 id:senderName class:contactForm "Please type your name"]
    </li>
    <li>
      <label for="awesome">Are you awesome?</label>[select awesome id:awesome include_blank class:contactForm "Hell yes!" "Sometimes" "Nope"]
    </li>
    <li>
      <div class="hide" id="hide1">
      <label for="not-awesome">Tell us why not</label>[text not-awesome /50 id:not-awesome class:contactForm "Tell us why you aren't awesome"]
       </div>
    </li>
    <li>
      <label for="senderEmail">Your Email Address</label>[email* senderEmail /50 id:senderEmail class:contactForm "Please type your email address"]
    </li>
    <li>
      <label for="message" style="padding-top: .5em;">Your Message</label>[textarea* message 80x10 id:message class:contactForm "Please type your message"]
    </li>
  </ul>
  <div id="formButtons">[submit id:sendMessage class:contactForm "Send Email"]
  </div>
</div>

Source: http://pastebin.com/jQeQqRhj

To follow with my example, you'll need to create the same simple form I did. It doesn't matter what you call the form, but it needs to have the same fields and attributes.

3. Create a jQuery script to hide fields Create a script called hidefieldsScript.js using this code:

/*! jQuery script to hide certain form fields */

$(document).ready(function() {

    //Hide the field initially
    $("#hide1").hide();

    //Show the text field only when the third option is chosen - this doesn't
    $('#awesome').change(function() {
        if ($("#awesome").val() == "Nope") {
            $("#hide1").show();
        }
        else {
            $("#hide1").hide();
        }
    });
});

Source: http://pastebin.com/eUdEcHhC

Create it and save it directly into the js folder for your theme (example: ./wordpress/wp-content/themes/your-theme-name/js/.

4. Add some basic styling for the form

Add the following code to the end of your theme's style.css file:

/* =Custom Contact Form with jQuery
----------------------------------------------- */

/* Add curved borders to various elements */
#contactForm, .statusMessage, input[type="submit"], input[type="button"] {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  border-radius: 10px;
}

/* Style for the contact form and status messages */
#contactForm, .statusMessage {
  color: #666;
  background-color: #ebedf2;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) );
  background: -moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% );  
  border: 1px solid #aaa;
  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  opacity: .95;
}

/* The form dimensions */
#contactForm {
  width: 40em;
  height: 41em;
  padding: 0 1.5em 1.5em 1.5em;
  margin: 0 auto;
}

/* Position the form in the middle of the window (if JavaScript is enabled) */
#contactForm.positioned {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: auto;
  margin-bottom: auto;
}


/* The header at the top of the form */
#contactForm h2 {
  font-size: 2em;
  font-style: italic;
  letter-spacing: .05em;
  margin: 0 0 1em -.75em;
  padding: 1em;
  width: 19.5em;  
  color: #aeb6aa;
  background: #dfe0e5 url('images/stamp.jpg') no-repeat 15em -3em; /* http://morguefile.com/archive/display/606433 */
  border-bottom: 1px solid #aaa;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;  
  border-radius: 10px 10px 0 0;
}

/* Give form elements consistent margin, padding and line height */
#contactForm ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#contactForm ul li {
  margin: .9em 0 0 0;
  padding: 0;
}

#contactForm input, #contactForm label {
  line-height: 1em;
}

/* The field labels */
#contactForm label {
  display: block;
  float: left;
  clear: left;
  text-align: right;
  width: 28%;
  padding: .4em 0 .0 0;
  margin: .15em .5em 0 0;
  font-weight: bold;
}

/* The fields */
#contactForm input, textarea , select {
  display: block;
  margin: 0;
  padding: .4em;
  width: 67%;
  font-family: "Georgia", serif;
  font-size: 1em;
  border: 1px solid #aaa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;    
  border-radius: 5px;
  -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  background: #fff;
}

#contactForm textarea {
  height: 13em;
  line-height: 1.5em;
  resize: none;
}


/* Place a border around focused fields, and hide the inner shadow */
#contactForm *:focus {
  border: 1px solid #66f;
  outline: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

/* The Send and Cancel buttons */
#contactForm input[type="submit"], #contactForm input[type="button"] {
  float: right;
  margin: 2em 1em 0 1em;
  width: 10em;
  padding: .5em;
  border: 1px solid #666;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  border-radius: 10px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  color: #fff;
  background: #0a0;
  font-size: 1em;
  line-height: 1em;
  font-weight: bold;
  opacity: .7;
  -webkit-appearance: none;
  -moz-transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

#contactForm input[type="submit"]:hover,
#contactForm input[type="submit"]:active,
#contactForm input[type="button"]:hover,
#contactForm input[type="button"]:active {
  cursor: pointer;
  opacity: 1;
}

#contactForm input[type="submit"]:active, input[type="button"]:active {
  color: #333;
  background: #eee;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}

#contactForm input[type="button"] {
  background: #f33;
}


/* Some IE7 hacks and workarounds */

<!--[if lt IE 8]>
/* IE7 needs the fields to be floated as well as the labels */
#contactForm input, textarea {
  float: right;
}

#formButtons {
  clear: both;
}

/*
  IE7 needs an ickier approach to vertical/horizontal centring with fixed positioning.
  The negative margins are half the element's width/height.
*/
#contactForm.positioned, .statusMessage {
  left: 50%;
  top: 50%;
}

#contactForm.positioned {
  margin-left: -20em;
  margin-top: -16.5em;
}
<![endif]-->

Source: http://pastebin.com/7fMA4nDn

I recommend doing this, so you can see the example correctly. The CSS I have made is all specific to the id element "contactForm" so it doesn't pollute your theme design.

5. Add the scripts to your header.php Add the following lines within your <head> class inside the header.php file for your theme.

<!-- Add jquery script to support Conditional Forms-->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/1.7.1/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/hidefieldsScript.js"></script>

6. Test out the form! Paste the form code from Contact Form 7 into a page or post, then view the page. You should see a form but one of the fields will be hidden.

To see the hidden field, simply answer "Nope" to the question "Are you awesome?". An extra line will appear asking you to explain why!

How do you modify the example? To make this work for your own specific needs, you need to modify steps 2 and 3 so that the form and jQuery work together to hide the fields you want them to. You will also need to modify step 4 to get CSS styling you prefer.

I suggest doing what I did and reading about what jQuery functions mean what. There are loads of tutorials to explain jQuery functions, so get Googling.

With a little reading, you can adjust the script I wrote to to handle responses to checkboxes, radiobutton, etc.