将重力形式嵌入到 wordpress 页脚答案

【问题标题】：Embedding Gravity form to wordpress footer将重力形式嵌入到 wordpress 页脚
【发布时间】：2017-06-24 19:17:13
【问题描述】：

我想在www.dynasteam.com（使用 wordpress）将我们的 mailchimp 嵌入表单切换为重力表单，但似乎无法使开关正常工作、正确调整大小以及看起来就像现在一样。我现在把它留给了mailchimp。另外，有没有办法让 ajax 工作，即使重力来自页脚？

重力形式是下面的php代码：

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

当前页脚代码如下：

   </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>

【问题讨论】：

标签： php html css wordpress

【解决方案1】：

使用短代码嵌入重力表单 (GF) 不允许您使用 CSS 框架类以相同的方式设置表单的样式和结构。您可以使用 GF 的 Helper Classes 作为一个好的开始。尤其是这一点会让你开始强大：

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

之后，您必须使用 GF 的元素类和 id 将样式应用于、和按钮。

我希望这能为您处理任务提供一个良好的开端。

【讨论】：