New to the community? Start here

Setting Up Custom Form with Hustle

Hello,

We would like to replace our website’s current ‘request a quote’ process with a simple form embedded on each product listing page requiring users to fill out the usual info such as name, phone, email, company, etc.

I checked out the Hustle plugin but wasn’t sure how to set it up to have the 2 following necessary characteristics:

1. To show up on every individual product listing page (we have about 300 of them)

and..

2. Having a field that’s pre-populated with the product listing’s SKU or URL, so we know which specific product they’re referencing.

What would be the best plugin or way to accomplish this task?

As always, thank you for your help!

Kindly,

Matthew

Fri, 7 Jul 2017 19:23:31
More Hustle Pro discussions
Hustle Pro
  • JMorris
    • I do geek stuff

    Hello Matthew,

    I hope you are well today.

    Hustle is definitely up to the task, but you’ll need to add just a tiny little bit of jQuery to your theme to pre-populate the URL of the product. (Trying to populate the SKU would require custom PHP.)

    First, you need to setup a form that will allow you to collect the information you want. In my example, I used Contact Form 7 so I could drop the shortcode in a Hustle Custom Content modal.

    See screenshot: http://storage7.static.itmages.com/i/17/0708/h_1499506974_2810087_df4e74751c.png

    After setting up my form, I added it to a Hustle Custom Content slide-in modal and set the conditions to only display on products. Be sure to set your display conditions for posts, pages, categories, tags and products appropriately.

    See screenshots: http://storage9.static.itmages.com/i/17/0708/h_1499507044_6802551_f933cacfa5.png

    http://storage3.static.itmages.com/i/17/0708/h_1499507117_6471939_3982c256bc.png

    Next, I added the following jQuery to the Simple Custom CSS & JS plugin: 

    jQuery(document).ready(function( $ ){
    
$('input[name="product-url"]').val(window.location.href);
    
});

    See screenshot: http://storage6.static.itmages.com/i/17/0708/h_1499507245_7618952_72675e44d2.png

    The above steps gave me a slide-in modal that displayed with inputs for name and email and a read-only field with the current product’s URL.

    See screenshot: http://storage1.static.itmages.com/i/17/0708/h_1499507285_1512618_58f13e7718.png

    I hope this clarifies a bit. Let us know if you have any further questions. We’ll be happy to help! :slight_smile:

    Best regards,

    James Morris

  • Matthew
    • Recruit

    Hello, James!

    I apologize for the delay in responding; just wanted to thank you for the recommendations you provided in the previous post. We actually just began using the Google Product Feed plugin for WooCommerce just last week and have been very pleased with it thus far.

    As far as the data collection form I previously mentioned, I'm rather stuck on determining how to embed the form's shortcode into the theme .php file(s) so we don't have to add the shortcode to every single new listing. We would like it to appear where it is currently located, on every product listing page.

    See below for an attached screenshot and URL for a product listing page from our website. I've also included the shortcode for the form, made via our 'Brilliant Web to Lead for Salesforce' plugin. In addition to embedding the form as described, we would also like a line of text to appear at the top of the form to serve as a descriptive form title (see attached screenshot).

    Example Product Listing URL and shortcode:

    https://cncmachines.net/product/mazak-integrex-i-150-2015-2047/

    [salesforce form="2"]

    As always,

    Thank you kindly for your help in this matter!

    All the best,

    Matthew

  • JMorris
    • I do geek stuff

    Hello Matthew,

    I hope you are well today.

    As far as the data collection form I previously mentioned, I’m rather stuck on determining how to embed the form’s shortcode into the theme .php file(s) so we don’t have to add the shortcode to every single new listing. We would like it to appear where it is currently located, on every product listing page.

    To add a shortcode to your theme’s template files, all you need is the do_shortcode() template tag. For example:

    <?php echo do_shortcode( '[salesforce form="2"]' ); ?>

    Just drop the above code where you want it in your theme and style it to suite. :slight_smile:

    Using this method, it’s a fairly simple matter to add content before/after your shortcode and do just about anything you want to customize the surrounding area. For example:

    <div id="my-salesforce-form">
    
<h3>Please complete the following form...</h3>
    
<?php echo do_shortcode( '[salesforce form="2"]' ); ?>
    
<p>
    
<a href="https://yourdomain.com/privacy/" title="Privacy Policy">Privacy Policy</a> | <a href="https://yourdomain.com/terms/" title="Terms">Terms</a>
    
</p>
    
</div>

    Then, using the following CSS selectors added to the WordPress Additional CSS:

    #my-salesforce-form{
    
...
    
}
    
#my-salesforce-form h3{
    
...
    
}
    
#my-salesforce-form p{
    
...
    
}
    
#my-salesforce-form a{
    
...
    
}
    
#my-salesforce-form a:hover{
    
...
    
}

    I hope this clarifies a bit. Let us know if you have any further questions. We’ll be happy to help! :slight_smile:

    Best regards,

    James Morris