Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass values from one Contact Form 7 form to another in Wordpress?

I have a site that has 2 forms - a short form and a long form. If you look at http://dforbesinsuranceagency.com you'll see the short form next to the masthead photo. The long form is at http://dforbesinsuranceagency.com/request-free-insurance-quotes/

When the user hits Submit on the short form, it kicks them over to the long form page, so that part works fine. The part that gives me fits is that I need the values entered into the short form fields First Name, Last Name, Email Address and Telephone passed to their equivalent fields on the long form.

How do I do this?

This is how I am redirecting the short form to the long form (I added it to the Additional Settings section for the short form):

on_sent_ok: "location = 'http://dforbesinsuranceagency.com//request-free-insurance-quotes';"

Any help would be appreciated.

like image 835
Cynthia Avatar asked Mar 14 '13 17:03

Cynthia


People also ask

How do I redirect a contact form in WordPress?

Usage. Simply go to your form settings, choose the “Redirect Settings” tab and set the page you want to be redirected to.

How do I save my contact form 7 data in WordPress?

After activating CF7 Database plugin, you will see a new Database menu nested under Contact menu. That's where you can view and manage your contact form database. What you can do in Database dashboard: Save all data from Contact Form 7 to database.

Can I use PHP in contact form 7?

The Contact Form 7 plugin is great, and works with PHP 8.0 without noticeable issues.


2 Answers

Hack, hack, hackety, hack hack hack... Without suggesting "not using a form-builder" I don't think there is an elegant solution - you can't use the other PHP method suggested without modifying the plugin itself (and that is a can of worms). I will propose a Javascript solution but there are some caveats (below):

jQuery(document).ready(function($){
  $('#quick-quote form:first').submit(function(){
    var foo = {};
    $(this).find('input[type=text], select').each(function(){
      foo[$(this).attr('name')] = $(this).val();
    });
    document.cookie = 'formData='+JSON.stringify(foo);
  });
  var ff = $('#container form:first');
  if(ff.length){
    var data = $.parseJSON(
      document.cookie.match('(^|;) ?formData=([^;]*)(;|$)')[2]
    );
    if(data){
      for(var name in data){
        ff.find('input[name='+name+'], select[name='+name+']').val(data[name]);
      }
    }
  }
});

What this will essentially do is: on submission, store your mini-form options in a cookie. On page load it will then look for a form in the main body of the page and apply any stored cookie data.

Notes

  • The jQuery selectors are deliberately ambiguous to avoid any future changes in your admin panel/plugin that will likely screw with the form IDs (thus breaking the script).
  • I'm not faffing about pairing field/option names - for example the select box in your mini-form is named insurance-type however the matching box in the main form is named ins-type - you will have to ensure they are of the same name.
  • This also applies to select box values - if there is no matching value, it will be ignored (eg. some of your values in the main form have » » characters in front (and so don't match).
like image 86
Emissary Avatar answered Nov 12 '22 17:11

Emissary


try this.

set the action of our first form to a php file named xyz.php

<form method="post" action="xyz.php">
    <input type="text" name="name">
    <input type="text" name="email_address">
    <input type="submit" value="Go To Step 2">
</form>

the file xyz.php will create a new form for you which in this case is your second form (the big one). Set the action of the form as required. the code of your xyz.php will look something like this.

<form method="post" action="form3.php">
   <input type="text" name="name" value="<?php echo $_POST['name']; ?>">
   <input type="text" name="email_address" value="<?php echo $_POST['email_address']; ?>">
   <input type="radio" group="membership_type" value="Free">

   <input type="radio" group="membership_type" value="Normal">

   <input type="radio" group="membership_type" value="Deluxe">

   <input type="checkbox" name="terms_and_conditions">  
   <input type="submit" value="Go To Step 3">
</form>

where the input fields of the first form will already be filled with the details given by the user in the first form.

You can create the first form by yourself and let the contact form create the second form for you providing the default values using the method above.

Hope this helps!

like image 30
Oscprofessionals Avatar answered Nov 12 '22 17:11

Oscprofessionals