Embedding Gravity form to wordpress footer

Question

I want to switch our mailchimp embedded form for a gravity form at www.dynasteam.com (using wordpress) and can't seem to get the switch to work, resize properly, and look just like the way it does now. I've left it with mailchimp for now. Also, is there a way to get ajax to work, even if the gravity from is in the footer?

The gravity form is the php code below:

<?php echo do_shortcode('[gravityform id=3 name=Sign Up for special discounts! 
title=false description=false]'); ?>

The current footer code is listed below:

   </div> <!-- content-wrapper -->
  <div id="footer-wrapper">
    <div id="footer" class="row">
      <footer class="small-12 columns">
            <div class="small-12 medium-6 columns footer-element footer-
     logo">
                <a class="footer-logo" href="<?php echo esc_url( home_url( 
    '/' ) ); ?>" rel="nofollor"><img src="<?php bloginfo('template_url'); ?
    >/images/dynasteam-footer-logo.png"></a>
            </div>
            <div class="small-12 medium-6 columns footer-element footer-
form">


<!--Mailchimp starts here I think-->

<div id="email-signup" class="row small-collapse medium-collapse large-collapse">
<form action="//dynasteam.us10.list-manage.com/subscribe/post?u=fda34961862c37e48e5a08f9c&amp;id=a53cd757a5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

    <div class="form-element form-label small-5 columns">
        <p>Let's keep in touch!</p>
    </div>
    <div class="form-element form-field small-5 columns">
        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;"><input type="text" name="b_fda34961862c37e48e5a08f9c_a53cd757a5" tabindex="-1" value=""></div>
    </div>
    <div class="form-element form-submit small-2 columns">
        <input type="submit" value="&nbsp;" name="subscribe" id="mc-email-subscribe" class="button">
    </div>

    </form>
</div>

<!--Mailchimp Ends here I think-->


            </div>
            <div class="small-12 medium-6 medium-push-6 columns footer-element footer-menu">
                <?php
                    wp_nav_menu( array(
                        'theme_location' => 'main-menu',
                        'container' => false,
                    ));
                ?>

                <p style="clear:both; padding-top:10px;">For More DYNAMIC Solutions Visit <a href="http://DynaTrap.com" target="_blank">DynaTrap.com</a>
            </div>
            <div class="small-12 medium-6 medium-pull-6 columns footer-element footer-copyright">
                <p><i class="fa fa-copyright"></i><?php echo date("Y"); ?> Dynamic Solutions Worldwide</p>
            </div> 

  </footer><!-- .site-footer -->



  <div class="row">

  <div class="columns large-12 medium-12">
    <?php
                    wp_nav_menu( array(
                        'theme_location' => 'footer-menu',
                        'container' => false,
                    ));
                ?>

  </div>

</div>

Answer 1

Using the shortcode to embed the Gravity Forms (GF) doesn't allow you to use your CSS framework classes to style and structure the form in the same manner. You can use GF's Helper Classes for a good start. This one in particular is going to get you started off strong:

https://www.gravityhelp.com/documentation/article/css-ready-classes/#horizontal-form-layout

After that you'll have to apply the styling to the , , and button using GF's element classes and ids.

I hope this gives you a good start on tackling the task.