Karma HTML: Add multiple contact forms, custom footer form, etc.

Posted in: ,
The bottom of this tutorial also contains developer notes for those of you interested in copying this functionality elsewhere throughout your web template.

Overview:

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.

General Instructions:

  1. Add required contact form scripts to the top of each page
  2. Grab the HTML code to be used for the new form
  3. 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:
    <script type="text/javascript" src="contact-form/js/iphorm.js"></script><script type="text/javascript" src="contact-form/js/plugins.js"></script>
    <script type="text/javascript" src="contact-form/js/scripts.js"></script>
    
  • Here’s a screenshot to ensure you’ve placed the scripts in the correct place:
    (click screenshot for full-size view)
    Karma HTML - footer contact form

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

Developer Notes

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.

For Example:

  • 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