Using Gravity Forms with the Permatex Theme for WordPress

Using Gravity Forms with the Permatex Theme for WordPress

This post assumes you’re familiar with WordPress and WordPress Child Themes as well as html, css, and php.

Switching Permatex Landing Page Theme Forms

If you’re using the Permatex landing page theme (Webfactoryltd via ThemeForest) — and want to switch out the default forms for Gravity Forms — there are a few things you’ll need to do.

Why Would You Switch?

Permatex comes with a nicely styled form entitled Request A Quote Now! and an equally nice newsletter subscription form. So why would you want to mess with them? Good question.

On the project I deployed, the theme’s default forms didn’t fit the client’s needs. Instead of the main Request a Quote Now form, there was a requirement for a custom 18 field form that would update a Velocify CRM on the back end. I’d already implemented a Gravity Forms solution to do that on other landing pages and the same solution was required here.

The second reason we needed to switch forms is that Permatex’s default Newsletter Subscription form is integrated with MailChimp — which is cool — but this client uses Constant Contact. This post covers replacing the Request A Quote Form. I’ll tackle the slightly more involved switch out of the email subscription form for a Gravity Forms/Constant Contact solution in a subsequent post.

Replacing the Request a Quote Form

Assuming you’ve already created your Gravity Form, you’ll need to edit the Permatex page-front-page.php file (child theme version of course).

1. Remove the form code shown below from page-front-page.php, starting at about line 48:


<!-- start: delete default Permatex form -->

<form id="contact_form" action="<?php echo get_permalink(); ?>" method="post">
<div class="form-section">
<input id="name" name="name" type="text" placeholder="<?php echo esc_attr(wf_theme_get_option('contact_form_name')); ?>">
</div>
<div class="form-section">
<input id="email" name="email" type="text" placeholder="<?php echo esc_attr(wf_theme_get_option('contact_form_email')); ?>">
</div>
<?php
if (trim(wf_theme_get_option('contact_form_type_values'))) {
?>
<div class="form-section">
<select id="type" name="type">
<option value=""><?php echo esc_html(wf_theme_get_option('contact_form_type')); ?></option>
<?php
$tmp = wf_theme_get_option('contact_form_type_values');
$tmp = explode("\n", $tmp);
$list = '';
foreach ($tmp as $line) {
$line = rtrim(rtrim(rtrim(trim($line), "\r"), "\n"));
if ($line) {
$list .= '<option value="' . esc_attr($line) . '">' . $line . '</option>';
}
}
echo $list;
?>
</select>
</div>
<?php
}
?>
<div class="form-section">
<textarea id="message" class="removetext" name="message" cols="50" rows="3" placeholder="<?php echo esc_attr(wf_theme_get_option('contact_form_details')); ?>"></textarea>
</div>
<?php
if (wf_theme_get_option('contact_form_extra_field')) {
echo '<div class="form-section">';
echo '<input id="extra" name="extra" type="text" placeholder="' . esc_attr(wf_theme_get_option('contact_form_extra_field')) . '">';
echo '</div>';
}
?>
<div class="form-section">
<div class="captcha-question">Are you human?</div>
<div class="captcha-task">
<strong id="captcha-img">2 + 2 = </strong>
<input type="text" class="captcha-input-field" id="captcha" name="captcha" placeholder="?">
</div>

<div class="clear"></div>
</div>
<br>
<input type="submit" name="submit" class="btn" value="<?php echo esc_attr(wf_theme_get_option('contact_form_button')); ?>">
</form>

<!-- end: delete default Permatex form -->

 

2. And add this code in its place (note: This example assumes the Gravity Form id is “1″; replace the “1″ with the id of your gravity form if different):

 


<!-- start: replace default Permatex form with Gravity Form -->
<?php gravity_form(1, false, false, false, '', false); ?>
<!-- end: replace default Permatex form with Gravity Form -->

<!--start: replace default Permatex form with Gravity Form--> 
<!--?php gravity_form(1, false, false, false, '', false); ?--> 
<!--end: replace default Permatex form with Gravity Form--> 

Once you complete the above two steps you’re almost there. Display your Permatex landing page and you should see your Gravity Form in the place of the default form at the top of the page. You may need to do some final styling to make the form look like you want, but at this point it should look a lot like the Permatex demo page.

One last tip about styling

I assume you’re using a child theme. If so, your form related edits to style.css will be ignored since this theme is structured to read its own customized css styles after your styles.css. You can accept this and put your css edits into the css area of the theme customization function in WP Admin ( Appearance > Customize Theme > Colors, Fonts & CSS ) but I didn’t find that very practical. For one thing, the CSS box is very short and narrow and edits can total many lines of code. Another thing I don’t like about using the theme’s edit space is that it takes me out of my normal workflow and tools. That almost never results in improved efficiency.

Instead, create another stylesheet in your child theme, call it something like my-form-styles.css, and place the following code between the head tags in your header.php file:


<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/my-form-styles.css" media="screen" />

 

So there you have it. A two step process for swapping the default Permatex form with your own custom Gravity Form. Good luck and let me know how your project goes.

 

4 Responses to “Using Gravity Forms with the Permatex Theme for WordPress”

  1. Alex

    2013-12-16T10:00:13+00:00

    Hi Stephen:

    We are using Permatex and are having a hard time finding a way to track Adwords conversions once someone clicks the submit button on the default form. I am not familiar with Gravity forms, is there an easy way to track a conversion with Gravity forms?

    Thanks.

    A

    Reply
    • spkane

      2013-12-16T10:36:34+00:00

      Yes, Alex. A conversion tracking code can be added to your form confirmation page, or if you don’t use a separate confirmation page for some reason, place the code in the Thank You message confirmation text for your form. If this does not work in your situation, submit a ticket to Gravity Forms with your specific details.

      Reply
  2. Rochelle

    2014-03-06T16:07:15+00:00

    Hello! Thanks for the informative post. Would this also work with other types of forms? I want to use the form from our Salesforce CRM but want it to look like the one in the template.

    Thanks in advance :)

    Reply
    • spkane

      2014-03-06T16:24:21+00:00

      Hi Rochelle – If you’re handy with code, chances are yes – though I haven’t done it myself. However, if it were my task, I wouldn’t go with the Salesforce form. I’d use gravity forms as outlined in the post and install the free Forms 3rd Party Services plugin to map the gravity form to Salesforce. But that’s just me. Good luck!

      Reply

Leave a Reply