PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Inserting Gravity Form into existing wordpress theme

  1. Hello,
    We have created a new gravity form that we would like to embed into our wordpress site. The Theme originally came with a contact form or table- the code below is the structure and content.

    We would like to keep the original styling of the the contact page but use our new form as the content / criteria.
    Where in the code below would we add the shortcode or Function Call to get our form to appear on the page.
    Thanks!
    <?php
    /*
    Template Name: Contact Form
    */

    $error = true; if(isset($_POST['email'])) { include(THEME_FUNCTIONS . '/sendmail.php'); }

    get_header();

    ?>

    <div class="content">
    <div class="secondary_pages_content">

    <?php if (have_posts()) : $count = 0; ?>
    <?php while (have_posts()) : the_post(); $count++; ?>

    <?php the_content(); ?>

    <div class="contact_box">
    <div class="contact_box_top"></div>
    <div class="contact_box_middle">

    <form action="" method="post" class="ajax_form">

    <input type="hidden" name="temp_url" value="<?php bloginfo('template_directory'); ?>" />
    <input type="hidden" id="tempcode" name="tempcode" value="<?php echo base64_encode(get_option('admin_email')); ?>" />
    <input type="hidden" id="myblogname" name="myblogname" value="<?php bloginfo('name'); ?>" />

    <?php if (!isset($error) || $error == true){ ?>

    <table class="contact_form" cellpadding="0" cellspacing="0">
    <tr>
    <td style="width:461px" class="<?php if (isset($the_nameclass)) echo $the_nameclass; ?>">
    <label for="name"><?php _e('Your Name (required)', 'tfuse') ?>:</label>
    <div class="form_input odd">
    <div class="input_left"></div>
    <input name="yourname" class="text_input input_middle required" type="text" id="name" value='<?php if (isset($the_name)) echo $the_name?>'/>
    <div class="input_right"></div>
    </div>
    </td>

    <td style="width:461px" class="<?php if (isset($the_emailclass)) echo $the_emailclass; ?>">
    <label for="email"><?php _e('Your email (required)', 'tfuse') ?>:</label>
    <div class="form_input">
    <div class="input_left"></div>
    <input name="email" class="text_input input_middle required" type="text" id="email" value='<?php if (isset($the_email)) echo $the_email ?>' />
    <div class="input_right"></div>
    </div>
    </td>
    </tr>

    <tr>
    <td style="width:461px">
    <label for="phone"><?php _e('Your phone number', 'tfuse') ?>:</label>
    <div class="form_input odd">
    <div class="input_left"></div>
    <input id="phone" name="phone" class="input_middle" type="text" />
    <div class="input_right"></div>
    </div>
    </td>

    <td style="width:461px">
    <label for="company"><?php _e('Your company', 'tfuse') ?>:</label>
    <div class="form_input">
    <div class="input_left"></div>
    <input id="company" name="company" class="input_middle" type="text" />
    <div class="input_right"></div>
    </div>
    </td>
    </tr>

    <tr>
    <td style="width:461px">
    <label for="budget"><?php _e('Your budget', 'tfuse') ?>:</label>
    <div class="form_input odd">
    <div class="input_left"></div>
    <input id="budget" name="Budget" class="input_middle" type="text" />
    <div class="input_right"></div>
    </div>
    </td>

    <td style="width:461px">
    <label for="deadline"><?php _e('Deadline', 'tfuse') ?>:</label>
    <div class="form_input">
    <div class="input_left"></div>
    <input id="deadline" name="Deadline" class="input_middle" type="text" />
    <div class="input_right"></div>
    </div>
    </td>
    </tr>

    <tr>
    <td style="width:922px" colspan="2" class="<?php if (isset($the_messageclass)) echo $the_messageclass; ?>">
    <label for="deadline"><?php _e('Your message (required)', 'tfuse') ?>:</label>
    <div class="form_textarea">
    <div class="textarea_left"></div>
    <textarea name="message" class="text_area textarea_middle required" rows="5" cols="103" id="message" ><?php if (isset($the_message)) echo $the_message ?></textarea>
    <div class="textarea_right"></div>
    </div>
    </td>
    </tr>

    <tr>
    <td style="width:922px" colspan="2">
    <input name="Send" value="" type="submit" title="send" class="contact-submit submit" id="send" />
    </td>
    </tr>
    </table>

    <?php } else { ?>

    <h2 style="width:100%;"><?php _e('Your message has been sent!', 'tfuse') ?></h2>
    <div class="confirm">
    <p class="textconfirm">
    <?php _e('Thank you for contacting us,', 'tfuse') ?>
    <?php _e('We will get back to you within 2 business days.', 'tfuse') ?></p>
    </div>

    <?php } ?>

    </form>

    </div>
    <div class="contact_box_bottom"></div>
    </div>
    <!-- contact_box -->

    <?php endwhile; else: ?>

    <div class="contact_box">
    <div class="contact_box_top"></div>
    <div class="contact_box_middle">

    <p><?php _e('Sorry, no posts matched your criteria.', 'tfuse') ?></p>

    </div>
    <div class="contact_box_bottom"></div>
    </div>
    <!-- contact_box -->

    <?php endif; ?>

    </div>
    <!-- secondary_pages_content -->

    <div class="clear_container"></div>

    </div>
    <!-- .CONTENT -->

    <?php get_footer(); ?>

    Posted 13 years ago on Tuesday November 1, 2011 | Permalink
  2. Hi SnapCubby,

    I'd recommend creating a new WordPress page and using the standard Gravity Forms shortcode to embed the form on the page. If you post a link to a page using the above template and the newly created page with your Gravity Form, we can give you some tips on styling. Additionally, here is some information on embedding Gravity Forms:

    http://www.gravityhelp.com/documentation/page/Embedding_A_Form

    Posted 13 years ago on Tuesday November 1, 2011 | Permalink
  3. Hi Thanks for your reply.
    We have now embedded our form into a page on our site. The format of the form is vertical but we would like to reformat certain text fields to align side by side, as well as create a border or background around the entire form. How do we change the styling of our form now that we have created it?
    Thanks for your support!

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink
  4. You should be able to find styling and formatting pointers here:

    http://www.gravityhelp.com/frequently-asked-questions/faq-styling-formatting/

    and here:

    http://www.gravityhelp.com/documentation/page/Design_and_Layout

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink
  5. Hello, those links are all very helpful and I found the elements I need but where in my form do I add the desired code?
    Thanks!

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink
  6. You're going to need to add your customized css to your theme's stylesheet.

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink
  7. Hi again, I searched around but I'm still not sure what .php or .css file to reach into to formatt my text fields like I want to. can you give me a file name that I should look for or should I be doing this adjustment with-in my wordpress admin for the form.
    Thanks!

    Posted 13 years ago on Thursday November 3, 2011 | Permalink
  8. Can you post a link to your form so I can view the source and see which file you should look for.

    Posted 13 years ago on Thursday November 3, 2011 | Permalink
  9. Hi Sorry for the delay
    here is the link to the current contact page: http://69.89.31.141/~snapcubb/TEMPLATE/?page_id=292&preview=true

    The site is not live and I am not sure if you can view the page without being logged in.

    Thanks for your help!

    Posted 13 years ago on Thursday November 3, 2011 | Permalink
  10. Yeah, can't view it without being logged in. If you'd like you can email me a login to rob@rocketgenius.com

    Posted 13 years ago on Thursday November 3, 2011 | Permalink
  11. Hello just sent you an email with our info, let me know if you need anything else and thanks again for your help!

    Posted 13 years ago on Thursday November 3, 2011 | Permalink
  12. Becky, there is a css file in your theme called custom.css. This is where you would put custom styles (so you can update both your theme and the gravity form plugin without any styles being overwritten when updates are released).

    If you want columns, you can use CSS ready classes, information on that is available here:

    http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

    Posted 13 years ago on Thursday November 3, 2011 | Permalink
  13. Hi Rob Thanks for all your help we have it figured out now :)
    Cheers!

    Posted 13 years ago on Friday November 4, 2011 | Permalink
  14. Great news! Enjoy!

    Posted 13 years ago on Friday November 4, 2011 | Permalink

This topic has been resolved and has been closed to new replies.