|Friday, April 28, 2017
[an error occurred while processing the directive]
[an error occurred while processing the directive]
[an error occurred while processing the directive] [an error occurred while processing the directive]
[an error occurred while processing the directive]
[an error occurred while processing the directive]
[an error occurred while processing the directive]

Contact Form 7: How to connect two forms 

Let’s assume you have a client that wants a two-step sign-up form (each step is a separate form, and each form sends it’s own email). He wants the visitor to enter his basic information (name, email, phone) in step one, and all the other less important information like sex and address in step two “but with a twist” step two should also contain basic information from step one. If you’re looking for a solution for this particular problem, you found it.

Contact Form 7

Contact Form 7

Your building blocks are two things: One is a Contact Form 7 feature, and another is an extension plugin for Contact Form 7.

The feature we’re talking about is called Additional Settings. It basically allows you to enter your own JavaScript, using different, already available hooks. So, if you wanted your visitor to be redirected to a thank you page after submitting a message, you’d use a on_sent_ok hook and a piece of JavaScript code that actually did that redirect.

You probably see where I’m going with this; we now have a way to connect the first form with a second one. We still have to figure out how to populate the second form with basic information from the first one.

Contact Form 7, Settings

Contact Form 7, Settings

And that’s where the Contact Form 7 Dynamic Text Extension steps in. As the name itself suggests, it extends Contact Form 7 with dynamic text capability, or to say it even clearer it gives you the capability to pre-populate input fields with dynamic values. Some example usage might be:

  • Auto-filling a URL
  • Auto-filling a Post ID, title, or slug
  • Pre-populating a Product Number
  • Referencing other content on the site
  • Populating with post info
  • Populating with user info
  • Populating with custom fields
  • Any value you can write a shortcode for

All this can be pre-populated based on PHP GET/POST variables, blog info, custom fields and so on.

Let’s assume we have “your-name” field on both forms, and we want them connected. On your second, step two form you’d have a field defined like this:

[dynamictext dynamictext-893 "CF7_GET key='your-name'"]

If you read that field definition, it literally sais fill dynamictext-893 field with your-name value from GET variables.

If you add the following line of code in Additional Settings part of your first, step one form, you will essentially add your-name variable to GET variables:

on_sent_ok: "location.replace('http://example.com/page-containing-form-two?your-name=John');"

Work done. If you have any questions, I’ll be glad to answer them.

[an error occurred while processing the directive]
[an error occurred while processing the directive]
[an error occurred while processing the directive]