Pass Inputted Values from Form 1 to Form 2 Using Contact Form 7



  • Submit data from one form to another form contact form 7
  • Pass Values From One Form To Another with Contact Form 7 Dynamic Text Extension
  • How To Get Value from the First Form to Another Form Contact Form 7
This tutorial is created by Kazukiyan Tutorial (Formerly Bryizz07 but now change to our official channel) which gives you a simple solution on how you can pass value from 1 form to 2nd form.

So for example you have two pages to use for your 2 forms, and these are;
yoursite.com/form1 and yoursite.com/form2

Form 1:

In the first form, you will need a non-contact form 7 form built in HTML so it should look like this below.

<form class="form-inline" action="/form2/" method="GET"><label class="sr-only" for="inlineFormInputName2">Postcode</label>
<input id="inlineFormInputName2" class="form-control mb-2 mr-sm-2" name="post_code" required="" type="text" placeholder="Enter Your Postcode" />
<button class="btn btn-primary mb-2" type="submit">Go</button></form>

Assuming that that form is on the first page (yoursite.com/form1) and we have a method using GET (method="GET") and the action form of another page (yoursite.com/form2) in which the 2nd form is built using Contact form 7.

Form 2:

On the second page make sure that you install these two plugins called (1) Contact form 7, (2) Contact Form 7 Dynamic Text Extension.

Now, create a page (yoursite.com/form2) then create a contact form same to the screenshot provided below;
A form code in Contact Form 7
click to zoom picture
Example Code:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Post Code
    [dynamictext post-code "CF7_GET key='post_code'"] </label>

[submit "Send"]

As you can see on the shortcode of contact form 7 it uses Dynamictext with a name of a post-code and then following this code "CF7_GET key='post_code'" the name 'post_code' is grabbed from the first form (name="post_code") this way it will identify the input type name of the values inputted by the users so it will display on the field use by the contact form 7.

When users input their postcode (example: 8105) on the first-page form it will create a link something like this in the second form page;
yoursite.com/form2/?post_code=8105
This way the contact form 7 will get the value from the query string and display it to the input field of contact form 7 name post-code.

Note: You can try different inputs such as email, name, address, or any data you want to pass to another form, a post-code is just an illustration of how you can do it in WordPress.

To understand more watch the video we provided above so you can see how it works. Cheers!

Actual Example in Passing Values to Another Form

These kinds of simple tricks are very useful especially if you don't want your user to retype the data to another form, so in our case we let the user input a postcode which we post the data to another page of the form, that way the user can continue adding other data, most especially if you have this kind of idea, there are lots of forms which has already this kind of feature, but as you can see we are using Contact Form 7, since this WordPress plugin is very much popular free plugin to build a contact form page.

Post a Comment

Previous Post Next Post