Integrating simpleContact Pro with Wordpress is quite straight forward, you just need to know what bits of code to copy and paste.
There are a few things that might trip you up and turn a quick install into a frustrating experience! This brief guide will help you bypass all that.
Once you have installed simpleContact Pro you need to make a few modifications, this involves moving some code around and creating a new Wordpress page template.
To keep things simple I will be using the default Wordpress theme.
Create a new Wordpress page template:
We need to create a custom page template that contains all of the required simpleContact Pro code.
1. Open your Wordpress theme folder, remember we’re using the default theme for this tutorial.
2. Find a file called page.php
3. Duplicate this file and rename it simplecontactform.php
Grab the simpleContact Pro code:
1. Inside the simplecontact_pro folder locate a file called contact.php
2. Highlight lines 1 – 5, copy this to your clipboard.
Modify simplecontactform.php:
1. Open simplecontactform.php paste the contents of your clipboard to line one.
2.IMPORTANT Change the sc_sdmin paths from:
’sc_admin/include/common.php’
to
‘wp-content/themes/default/sc_admin/include/common.php’
Make sure you change the word default to the name of your theme folder.
2. On line 11 write add this Wordpress template code:
Wordpress will now recognise this as a page template
3. Save these changes
Grab more simpleContact Pro code:
1. For the last time, go back to contact.php (located in the simplecontact_pro folder) and copy the code on lines 19 – 24.
Modify simplecontactform.php:
1. Open simplecontactform.php and paste the code you copied in the last step on to line 15
2. To help with positioning of the form wrap the code in a div, I always use a
div called SimpleContact, this can be styled with CSS.
3. Save simplecontactform.php
4. Upload simplecontactform.php to your server, make sure it’s the correct theme folder, in this case we need to upload it to the default theme folder.
5. You are now ready to apply your new page Template in Wordpress.
Activate the simplecontactform page template:
1. Login to the Wordpress dashboard
2. Create a new page and call it contact (or anything you want).
3. Under Attributes (on the bottom right of the page) click on the Templates drop down menu, here you will see a page template called SimpleContactForm.
4. Select this template and press Publish.
You have successfully integrated simpleContact Pro into Wordpress. If you haven’t already installed/activated simpleContact Pro your new template won’t work.
Please refer to my previous tutorial for a detailed guide to installing simpleContact Pro for Wordpress.
Your new template will require a bit of tweaking to get it looking right, you may want to hide the page title by removing the relevant code from the simplecontact.php template. Positioning and other styling can be controlled with CSS.
[...] a talented designer and personal friend of mine. He’s wrote a tutorial on his blog explaining how to add the simpleContact Pro contact form to a WordPress page template. It involves a bit of copying and pasting, but there’s nothing to intimidate someone [...]