© 2020 All rights reserved - WP super PlugIns
Made with the power of ❤
Today we’re going to walk through creating a form with Contact Form 7 and then populating some hidden fields in that form with vehicle data. This will give us the ability to drop a form onto a single vehicle page with a widget and pass the current vehicle data when it is submitted.
Let’s get started! The first two steps are easy, just install a couple PlugIns:
3. Create a new Form
Go to Dashboard->Contact->Add New
Give it a descriptive name. For example, if you intend to put this form on the single vehicle pages then you could name it “Contact Single Vehicle Page”
4. Insert the following code into the body of the form
To set up our form we’re going to create several standard fields, like name and email. We’ll also add a section at the end to store the vin, stock number, etc. We wrap the vehicle data in a div tag that has it’s CSS style set to none so the visitors won’t see them.
You can customize the form how you see fit, adding or removing any fields you require.
After saving and publishing your form you should copy the shortcode that you see at the top of the page so you can get the ID number from it to use later.
Insert the following as the Body of your form
<p>Your Name (required)<br />
[text* your-name] </p>
<p>Email (required)<br />
[email* email] </p>
<p>Phone (required)<br />
[tel* phone] </p>
<p>Your Message<br />
[textarea your-message] </p>
<div id="vehicle-wrap" style="display:none;">
<p>[text* vin default:shortcode_attr]</p>
<p>[text* stock_number default:shortcode_attr]</p>
<p>[text* vehicle_year default:shortcode_attr]</p>
<p>[text* make default:shortcode_attr]</p>
<p>[text* model default:shortcode_attr]</p>
<p>[text* price default:shortcode_attr]</p>
</div>
<p>[submit "Send"]</p>
5. Create a new Code Snippet
Now we need to get tricky and use the code Snippet PlugIn to add a little custom PHP code. Don’t worry, it’s easy to do.
Go to Dashboard->Snippets->Add New
Give the snippet a descriptive name like, “Contact Form 7 Default values filter”.
Now paste the following code into the “Code” box.
add_filter( 'shortcode_atts_wpcf7', 'custom_shortcode_atts_wpcf7_filter', 10, 3 );
function custom_shortcode_atts_wpcf7_filter( $out, $pairs, $atts ) {
//= create an array of vehicle specifications that we want to make available in Contact Form 7 as shortcode attributes
$attributes = array(
'vin',
'stock_number',
'vehicle_year',
'make',
'model',
'price',
'dealer-name',
'dealer-address',
'dealer-id',
);
foreach( $attributes as $attribute ) {
if ( isset( $atts[ $attribute ] ) ) {
$out[ $attribute ] = $atts[ $attribute ];
}
}
return $out;
}
What’s this code doing?
It’s registering attributes to be used with the Contact Form 7 shortcode.
Do you see the array that lists vin, stock_number, vehicle_year, etc.?
Those are fields we want the Contact Form 7 shortcode to recognize.
In the next step we’ll show you how to use them.
6. Add a widget to your Single Vehicle pages
There are several ways to add content to your single vehicle pages. But the easiest is to use one of the sidebar areas that are defined for us. You can find them by going to Dashboard->Appearance->Widgets
To make things simple let’s use the “Single Vehicle After” sidebar area.
Grab a “Custom HTML” widget and drop it into the “Single Vehicle After” sidebar area.
Remember earlier when we asked you to copy the shortcode for the form, because you’d need the ID from it later?
This is when you need to grab the id, let’s say it was 568.
Grab the following shortcode, replace the sample id (7576) with your id (568 is our example) and paste it into the “Custom HTML” widget you dropped into the “Single Vehicle After” sidebar area.
[contact-form-7 id="7576" title="Contact Single Vehicle Page (VDP)" vin="{vin}" stock_number="{stock_number}" vehicle_year="{year}" make="{make}" model="{model}" price="{price}"]
You see how we added each of the fields we registered earlier into the shortcode as attributes?
You’ll notice each field has a value which is the same as the field name, except it’s inside braces.
example: vin=”{vin}”
On single vehicle pages WPSuperDealer scans text and HTML widgets and looks for any vehicle specification slug wrapped in braces and replaces it with the value from the vehicle.
You can see this in action by adding another HTML widget and entering {year} {make} {model} into it.
When you view that on a single vehicle page it’ll show the values from the vehicle.
So when we drop the values into the shortcode they get replaced with actual values before the page is output.
This gives us a form on our page that will tell us what vehicle they were looking at when the filled out the form.
Now you know one of the easiest ways to integrate a form into your single vehicle pages and capture the vehicle details.
Bonus Points!
Using the above information can you pre-populate the comment field with something like:
I’d like more information on stock # ???
but with the ??? replaced with the actual value from the vehicle.
Hint: add your-message to the array in the code snippet that registers our other vehicle fields. Then add the following parameter to your shortcode:
your-message=”I would like to know more about stock # {stock_number}. “
Your shortcode should now look like this:
[contact-form-7 id="586" title="Contact Single Vehicle Page (VDP)" your-message="I would like to know more about stock # {stock_number}. " vin="{vin}" stock_number="{stock_number}" vehicle_year="{year}" make="{make}" model="{model}" price="{price}"]
© 2020 All rights reserved - WP super PlugIns
Made with the power of ❤