Note: The bottom of this tutorial also contains developer notes for those of you interested in copying this functionality elsewhere throughout your web template.
In this tutorial we’re going to discuss how to add additional contact forms to your Karma HTML Web Template. Specifically, we’ll be replacing the default MailChimp footer newsletter signup with a custom contact form.
- Add required contact form scripts to the top of each page
- Grab the HTML code to be used for the new form
- Download custom config file to process the new form
Step 1: Add required contact form scripts to the top of each page
- Each page that is going to contain your new contact form will need a few scripts added to the top of the page in order to ensure proper functioning.
- These scripts are identical to those found within Karma’s included contact page templates.
- Simply grab the code below and add before the closing [head] tag of every page that is going to contain the new form: View code on pastie.org
- Here’s a screenshot to ensure you’ve placed the scripts in the correct place: (click screenshot for full-size view)
Step 2: Grab the HTML code to be used for the new form
- In this step we’ll be replacing the default MailChimp footer newsletter form with our own custom contact form.
- Here’s the HTML code for our custom contact form. This will replace the default MailChimp footer newsletter code: View code on pastie.org
Step 3: Download custom config file to process the new form
- Download this custom config file which will process the new form
- Place this file within the “contact-form” folder of your Karma Web Template
- Open up this file in your favorite code editor and modify to suit your needs. (ie. update the success message and update the recipient email address)
- Save the file and you are all good to go.
- Repeat Steps 1 and 2 for every page on your website that you’d like to display the new contact form
Outlined below are more in-depth technical notes for developers:
- You can add an unlimited amount of contact forms throughout your website.
- Each page that is going to have a contact form requires the scripts to be added to the [head] as per outlined in Step 1 of this tutorial.
- The custom config file we’ve provided is a stripped down copy of Karma’s default config file located within: /contact-form/config.php
- Each new form will needs it’s own config file. Simply copy config.php and re-save it with a new name (ie. config-newsletter.php)
- The HTML code for each new form can be copied from one of Karma’s contact page templates. (ie. template-contact-iphone.html)
- The action on each new form must point to the correct config file. This can be done be adding a new variable to the default action of the form.
- Let’s say our new config file is named: config-newsletter.php
- We will update the action field in our form to point to this new config file. (Take note of the new variable after: ?form=) …. View code on pastie.org
- So…contact-form/process.php?form=register would load config-register.php contact-form/process.php?form=subscribe would load config-subscribe.php
- We can repeat this process for as many forms as are required