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:
- 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.
- Feel free to download this updated (sitemap) page template to see the updated footer code in action. (note: we’ve saved this file with a .php file extension for easy download – the page template you’re working on can still use a .html file extension)
- Here’s the HTML code for our custom contact form. This will replace the default MailChimp footer newsletter code:
<!-- ***************** - START Footer Contact Form - ***************** --></pre> <div><form action="contact-form/process.php?form=footer-form" enctype="multipart/form-data" method="post"> <div> <div> <div></div> <div><!-- Begin Email element --> <div><label for="email">Email Address:</label> <div><input id="email" type="text" name="email" /></div> </div> <!-- End Email element --> <!-- Begin Submit button --> <div> <input id="mc_signup_submit" type="submit" name="contact" value="Subscribe" /></div> <!-- END Submit button --></div> </div> </div> </form></div> <pre> <!-- ***************** - END Footer Contact Form - ***************** -->
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: ?form=
<form action="contact-form/process.php?form=newsletter" method="post" enctype="multipart/form-data">
- 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