将重力形式嵌入到wordpress页脚

时间:2017-06-24 19:17:14

标签: php html css wordpress

我想在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>

1 个答案:

答案 0 :(得分:2)

使用短代码嵌入Gravity Forms(GF)不允许您使用CSS框架类以相同的方式设置和构造表单。您可以使用GF的助手类来获得良好的开端。特别是这个会让你开始强势:

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

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

我希望这为你解决这个任务提供了一个良好的开端。