Adding Custom OpenCart Contact Forms For Quotes, Leads and Marketing

OK, so a lot of people are asking about changing the Contact Page in the default OpenCart system so it doesn’t so…well, crap! I was going to write a short blog post about redesigning the page with stuff that is already there but I thought I would do it properly and show you a method of creating several different contact forms which you could use throughout your OpenCart website.

So, I will be creating three different contact forms:

• Lead Generation Form
  This will be a form which sits on the homepage and encourages visitors to sign up to your Newsletter, RSS Feed or some other Lead Gen method.
• Request A Quote Form
  Another popular request for OpenCart users, this will be a form which sits next to the product description which usrs can fill out for more information, or a quote, to be sent to them by the Store Owner.
• A Bespoke Contact Form
  I will be replacing the original OpenCart contact page with a bespoke Information page with a new contact form. By doing it this way, we can define exactly how the contact page looks!

We will build up the forms individually and then build a PHP file to handle the different requests with an “IF” statement so we keep it all together. You will be able to customise the emails that get sent in the forms of confirmations to fit with your branding.

Adding a Sign Up form to the OpenCart homepage for Lead Generation

So, first we are going to be making up the form which will sit on the OpenCart homepage and allows your customers to sign up and for you to start getting leads from your store. In this example I will creating a Newsletter Form which only requires the visitors full name and email address.

The form itself is pretty standard and you only need a bit of HTML knowledge to make one up, the form I will make will be unstyled but remember you can give each input type a different class to style them with the OpenCart CSS file to make it look how you want!

Building The Lead Generation Form

Open us this file:

• catalog/view/theme/[YOUR THEME]/template/common/home.tpl

And add in your form wherever you want it to appear on the home page. Simply follow the structure as shown below:

Join Our Mailing List
Right, so now we have a very basic form which just asks for a few details off our visitor to sign up for the OpenCart Store Newsletter. Remember to keep the input names otherwise it won’t work later on!
Processing The Lead Generation Form With PHP
Open up a blank file in your Text Editor and name it “phpForm.php“. This is the file we will be making to process the data when the user submits the Newsletter Sign Up form on your homepage. The add the following:
Thanks for joing our mailing list!
We're glad to have you on board and hope you really enjoy the newsletter!
Kind Regards,
The OpenCart Store Team
";

$headers2 = "Content-type: text/htmlrn";
$headers2 .= "From: [email protected]";
mail($to2, $subject2, $theEmail2, $headers2);

//Redirect Customer Back To Store
header("location: http://www.youropencartstore.com/thanks");
}

?>
Adding A Quote request Form To Your OpenCart Store
In this section we will be building up the Quote Request Form to be placed on product pages where customers can ask for more information or a bespoke price for the product. We will be following a similar process to the Lead Generation form but changing the following file instead:

                  
catalog/view/theme/[YOUR THEME]/template/product/product.tpl
                
Again, just choose where you want the form to be shown and go ahead!
Building The OpenCart Quote Request Form
Build another HTML for for the user to fill out but this time we will be getting some hidden details from the page so the admin knows which product the potential customer is talking about.

Get A Quote / More Information

//Get The Product Name
" />



First Name



Last Name



Email Address







                
                
                
                
                
                
                
                
                
                
                
Adding The Quote Request Form Handling To Your PHP File
Now this needs to be added to the phpForm.php to handle the form when someone requests a quote through the OpenCart product pages.
Thanks for asking for a quote!
We will be back to you soon with some more details!
Kind Regards,
The OpenCart Store Team
";

$headers2 = "Content-type: text/html\r\n";
$headers2 .= "From: [email protected]\r\n";
mail($to2, $subject2, $theEmail2, $headers2);

//Redirect Customer Back To Store
header("location: http://www.youropencartstore.com/thanks");
}

?>
Building A Custom Contact Page In OpenCart
I’ve saved the biggest and baddest for last in this blog post! Now we will be looking at how to develop a custom contact page for your OpenCart store and there is a little bit of prep before we build the actual form. First thing to do is set a new information page which we can use as our contact page!
Building Your New OpenCart Contact Form
Log into your OpenCart admin panel and hover over the “Catalog” tab and choose “Information“. Then click the “INSERT” button to create a new Information page. For SEO purposes, as well as being more user friendly, I would recommend having the SEO keyword just set to “contact”, that way your contact page will simply be “www.youropencartstore.com/contact” rather than having all the route rubbish which is in the default contact page.
Then you will need to add your form onto the information page directly through the OpenCart admin panel. Remember to make sure you have selected “HTML” in the content field so your form gets put in correctly! Then add the following form:

Contact Us


First Name



Last Name



Email Address



Details







                
                
                
                
                
                
                
                
                
Nice and easy right? Now we just need to build up the final PHP handle to process the contact form when it is sent!
Processing The OpenCart Contact Form
This is actually very similar to the Lead Generation form we sent in the first part of this tutorial, we just need to change a few words around and we have the final addition to our phpForm.php file which processes when your new contact form is submitted.
Thanks for your message!
We're reading it now and will be in touch shortly!
Kind Regards,
The OpenCart Store Team
";

$headers2 = "Content-type: text/html\r\n";
$headers2 .= "From: [email protected]\r\n";
mail($to2, $subject2, $theEmail2, $headers2);

//Redirect Customer Back To Store
header("location: http://www.youropencartstore.com/thanks");
}

?>
Finishing Up
Remember to put in your details where you can, and the emails are set as HTML so a reasonable amount of tags can be used buit always remember that different people will have different email programs which means your emails may look different to different people. It is always important to try and cater to all technologies when Marketing and try and include your logo if you can for branding!
You will also need to upload your phpForm.php file to the root folder of your OpenCart store or there will be nothing there to process the submitted form. If you have a store on a subdomain you will need to edit the form action tag and the redirect function in the PHP file to reflect this.
By having your bespoke contact form it means that you not only have an SEO friendly contact page URL, but you can also style the page to fit in with the rest of your website without having to deal with the contact page template. You may have to remove the old “Contact” link from the Nav Bar and replace it with your new contact URL, if you don’t know how to do this then have a look at another one of my blogs which shows you exactly how it is done here.
Apart from that, we’re all done. If you have a good working knowledge of PHP then you will be able to edit the form for different requirements. If you don’t you can hire me to work on your project, just send me a message from the Contact Page. If you have any questions as always just leave me a comment and I will get back to you!

                  

                    
Share this:
                    

                      

                        

                          Click to share on Twitter (Opens in new window)
                        
                        

                          Click to share on Facebook (Opens in new window)
                        
                        

                          Click to share on Google+ (Opens in new window)
                        
                        

                      
                    
                  
                

                  
Like this:
                  

                    Like Loading...
                  

                

                  
Related
                

                
              

                

                  
Leave a Reply Cancel reply

                  

                    
                  
                

              

              
            

        
      

        
      

    

      
    
  

    

      %d bloggers like this:
    
    

  


First Name



Last Name



Email Address



Message