Web to Lead Form Integration is an important component of a website design and build project. We’ll assume that you have the perfect mix of modern design, responsiveness, professionally written copy and optimized user experience. Next, you need a convenient way to collect leads in a CRM so you can organize, prioritize and schedule follow-ups with these potential customers.

At Zen Den we have found the most qualified leads come through a web to lead form and not from phone calls or emails. Potential customers that take the time to complete a form and answer a few simple questions like budget and project description tend to be further along in the purchase process.

So if you are looking to build a web to lead form for your WordPress website without writing a single line of code then here are 4 easy steps.

At Zen Den Web Design we have been using Zoho for our CRM needs for years. There are plenty of other apps out there but we chose Zoho based on ease of use and price. It is also not bloated with features that we will never use or need. We upgraded from the free version in order to get some tracking features and still only pay $15/month.

1. Sign up for Zoho. We recommend the free version to see if it meets your needs. If not there are paid options for just about everything you will need.

2. Navigate to ‘Set Up’ in your account and choose Website Integration >>>> Web Forms.

3. Start building your form with the easy form builder.
– We have found a strong correlation between the number of fields required and the amount of spam we get through our Request a Quote form. No surprise, the fewer the fields the more spam. When we integrated a more thorough form the quality of our leads increased. Some of our clients are reluctant to include more fields in fear of turning off potential leads. Obviously you will need to find the right formula for your business.

4. Generate your form and embed it into the appropriate page of your website. We use WordPress and have had no issues simply copying and pasting directly into the page editor.

That’s it! Within minutes of a completed form you will receive an email notification with the details. You can even configure an auto responder so your potential clients receive an email with something like, “Thanks for contacting us. A member of our sales team will be in touch to schedule a phone call to discuss your project.”

The lead will auto populate in your leads so you can schedule follow ups, take notes and even assign the lead to different members of your sales team.

The proper web to lead integration for your website automates one more process in your sales cycle and can make your business run more efficiently. No more managing your leads in your email client or spreadsheet.

Zen Den Web Design  feels it is important to share the information we get regarding WordPress, particularly and security updates that may affect our customers or the WordPress community in general.

We’d like to bring to your attention a recent XSS vulnerability affecting multiple WordPress plugins and themes. The vulnerability is caused by a common code pattern used in WordPress plugins and themes available from ThemeForest and CodeCanyon, thewordpress.org website and other sources.

This issue is not limited to themes and plugins purchased from ThemeForest or CodeCanyon. Anyone using a WordPress website, regardless of where the theme or plugin was sourced, needs to be aware of this and take any necessary action to ensure it is secure.
What should you do?

As there is no simple way of knowing exactly which plugins or themes are affected, and the issue could be widespread, our best advice is to periodically check for updates to any WordPress themes or plugins you are using and apply those that are available as soon as possible.

Envato stated in a press release that it believes ThemeForest and CodeCanyon items will be continuously updated over the coming weeks, with the majority updated in the next few days. Updates may be downloaded from the Envato Downloads page as they become available. If you have an Envato account and would like to be automatically notified about new updates, simply activate “Item update notifications” in your email settings.

For updates to items obtained from sources other than Envato, you can simply check the Plugins and Themes pages in the WordPress Admin area or contact the source of the product.

We recommend continuing to check for updates, especially over the next few weeks, but also on an ongoing basis. It is important to always keep your WordPress installation and associated plugins and themes up to date. If you still have concerns, Zen Den is an experienced WordPress developer and can provide consulting on whether or not your site is affected.

More details are available via the following links:
1. XSS Vulnerability and WordPress Plugins

2. XSS Affects More than a Dozen WordPress Plugins

3. WordPress Plugin Updates to Address Security Vulnerability

We recently completed a project for a customer that required the development of a custom video carousel to show their YouTube videos by category. We wanted a large hero Video on the page and a carousel of other videos in a scroll bar below. It needed to look something like this:

We were surprised to not find one that was flexible enough to suit our design needs, so we decided to build our own.

To display the videos we used the awesome Slick carousel by Ken Wheeler. You can find it here.

Then we organized the clients videos into separate playlists in the YouTube manager.  Doing this creates a unique key for each playlist that we could access. Here is a quick video that shows how to find a YouTube Channels playlist. The playlist ID is the string starting with PL.

To create the initial Hero Video we created a iframe to hold the video. We added controls=0 and shoinfo=0 to hide all of the YouTube controls overlay. Sadly its against YouTube’s use policy to remove the large play button.

[js]$(‘#hero’).html(‘<iframe name=”videoFrame” width=”560″ height=”315″ src=”https://www.youtube.com/embed?listType=playlist&list=”Your playlist ID here”&controls=0&showinfo=0″ theme=”none” modestbranding=”1″ rel=”0″ frameborder=”0″allowfullscreen=””></iframe>’);[/js]

We created navigation buttons for each playlist at the top of the hero video and associated each with a playlist ID.  If the tab is clicked, the event is captured and some javascript does an api call to the corresponding YouTube playlist. That looks something like this:
[js]
$(‘.tabs nav ul li a:not(:first)’).click( function(e){
e.preventDefault();
$(‘.tabs nav ul li’).removeClass(‘tab-current’);
$(this).parent(‘li’).addClass(‘tab-current’);
var htmlString = ”;
var htmlEmbed = ”;
var channelname = $(this).attr(‘href’).substring(1);
var ytapiurl =’https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&playlistId=’+channelname+’&key=”Your YouTube API key here”&maxResults=20′;
var requestAjax = $.ajax ({
dataType: ‘json’,
url: ytapiurl,
type: ‘GET’
});

requestAjax.done(getYouTubeData);
requestAjax.fail(showErrors);
[/js]

If the ajax request works, it then works through all the individual videos in the playlist. We then took those videos and stuffed each one into its own Iframe. But first we needed to change out the Hero video with the first video from the new list.
[js]
function getYouTubeData(data){
var arr = data.items;
var firstVid = arr[0].contentDetails.videoId;
htmlEmbed += ‘<iframe name=”videoFrame” width=”560″ height=”315″ src=”https://www.youtube.com/embed/’+firstVid+’?controls=0&showinfo=0″ rel=”0″ frameborder=”0″ allowfullscreen=””></iframe>’;
$(‘#hero’).html(htmlEmbed);
[/js]

We then looped through the playlist and grabed each video individually, parsed its information and stuffed the results in its own div element. (The Slick Carousel uses div instead of List Items.)
[js]
for(var i = 0; i < arr.length; i++){
var snipid = arr[i].contentDetails.videoId;
var xtapiurl = ‘https://www.googleapis.com/youtube/v3/videos?part=snippet&id=’+snipid+’&key=”Your YouTube API key here”‘;
var requestAjax2 = $.ajax ({
dataType: ‘json’,
url: xtapiurl,
type: ‘GET’
});
requestAjax2.done(getVideoData);
requestAjax2.fail(showErrors);

function getVideoData(vid){
var vidEmbed = vid.items[0].id;
var vidTitle = vid.items[0].snippet.title;
var vidThumb2 = ‘http://img.youtube.com/vi/’+vidEmbed+’/0.jpg’;
var vidSrcUrl = ‘//www.youtube.com/embed/’+vidEmbed+”;

htmlString += ‘
‘;
[/js]

All those new divs then get stuffed into a parent div.
[js]
$(‘#videos’).html(htmlString + ‘

‘);
[/js]

Finally after a short wait for the DOM to finish loading we called the Slick Slider carousel and displayed all of the videos.
[js]
setTimeout(function(){
$(‘#videos’).show();
createSlider();
}, 1000);
[/js]

All in all it worked out very well.  The finished product on the clients website can be viewed here.