A recent post we discussed Member Owl’s Automation Library and showed how quick and easy it was to get set up. During that article we discussed how easy it was to setup automated tasks to occur when the lead generation form is submitted. Just how do we integrate that form into our website? That’s what we’ll cover today. Here is where we want to end up:

The above is a screenshot from a WordPress site with the Member Owl lead generation form installed. This WordPress site has not been modified in any other way than what we’ll describe below. Your site may not be WordPress, but the process will be similar.

First, from inside Member Owl you can navigate to your location’s web options. It will look something like this:

Member Owl provides to you the code you need to copy and paste into your website. Advanced users may recognize this code as HTML and CSS. But the most important thing is that this code defines the lead generation form and how it looks. It also defines what happens when the “submit” button is pressed.

Copy and paste this code into your website. In WordPress, login as the admin and add a “Text” sidebar widget that contains the code you copied. It should look something like this:

After saving the widget, update the page an you should see something like:

Note at this time, this widget is fully functional:

• All fields are required
• The email field must be a valid email format
• Submitted data directly populates Member Owl

For example, a submitted form will look like the following:

Now the Member Owl dashboard page shows a new lead (Walter White on the bottom row):

Now any configured automations will get applied and your staff can begin the process of converting this inquire into a member.

The default style of this lead generation form is to inherit its style from your site. In the WordPress case, the “Twenty Sixteen” theme is pretty clean. The form contains a CSS section where you can override the default theme to add a bit of pizazz. The HTML <style> tag provides this flexibility. For example, if we replace the default <style> with the following:

<style type='text/css'>
  /* change or add custom styles here */
  #memberowl_lead {
    padding: 10px;
    background-color: #333333;
    color: #e2e2e2;
  }
  #memberowl_lead button {
    background-color: #ff6600;
  }
  #memberowl_lead div{
   margin-bottom: 10px;
  }
  #memberowl_lead input{
   width: 100%;
  }
</style> 

Now your lead generation form will have a darker background with an orange button:

The person who takes care of your website will know what to do with this <style> tag.

If you have any questions on integrating Member Owl into your website, please feel free to contact us.