https://legacy.forums.gravityhelp.com/topic/how-can-i-replicate-a-form-done-with-contact-form-7-as-a-gravity-form Gravity Support Forums Topic: How can I replicate a form done with Contact Form 7 as a Gravity Form? en-US Sun, 19 Apr 2026 23:50:00 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/how-can-i-replicate-a-form-done-with-contact-form-7-as-a-gravity-form#post-19028 Sat, 19 Feb 2011 22:40:08 +0000 Kevin Flahaut 19028@https://legacy.forums.gravityhelp.com/ <p>Sorry, No. I didn't see it. I just checked my spam folder too for the past week or so - nothing there. Please resend if you will and I'll make a point to look for your message. </p> https://legacy.forums.gravityhelp.com/topic/how-can-i-replicate-a-form-done-with-contact-form-7-as-a-gravity-form#post-19021 Sat, 19 Feb 2011 19:53:23 +0000 Elena 19021@https://legacy.forums.gravityhelp.com/ <p>I did, did you get it? </p> https://legacy.forums.gravityhelp.com/topic/how-can-i-replicate-a-form-done-with-contact-form-7-as-a-gravity-form#post-17923 Tue, 08 Feb 2011 12:35:09 +0000 Kevin Flahaut 17923@https://legacy.forums.gravityhelp.com/ <p>you can send me the login information or password for the protected page to <a href="mailto:kevin@rocketgenius.com">kevin@rocketgenius.com</a> and I'll take a look at it as soon as I can </p> https://legacy.forums.gravityhelp.com/topic/how-can-i-replicate-a-form-done-with-contact-form-7-as-a-gravity-form#post-17919 Tue, 08 Feb 2011 11:37:13 +0000 Elena 17919@https://legacy.forums.gravityhelp.com/ <p>Hi Kevin,<br /> Not live url for the GF form, bcs it doesn't look nice and if leads see that...:S So, right now it's only showing the CF7 form..<br /> I could give you access to the wp-admin/or private contact page with GF form, instead.<br /> Cheers</p> <p>e. </p> https://legacy.forums.gravityhelp.com/topic/how-can-i-replicate-a-form-done-with-contact-form-7-as-a-gravity-form#post-17860 Mon, 07 Feb 2011 17:46:17 +0000 Kevin Flahaut 17860@https://legacy.forums.gravityhelp.com/ <p>Thanks for the kind words. Do you have a live URL for the new form yet? I'll be happy to look at it if you're still having problems with it. </p> https://legacy.forums.gravityhelp.com/topic/how-can-i-replicate-a-form-done-with-contact-form-7-as-a-gravity-form#post-17837 Mon, 07 Feb 2011 15:50:03 +0000 Elena 17837@https://legacy.forums.gravityhelp.com/ <p>Hi Kevin,<br /> I did what you said, but the background &amp; submit pngs aren't showing (will check the path again...but...) (<a href="http://cl.ly/1F1o0F3d1q0W0m3V2f1x" rel="nofollow">http://cl.ly/1F1o0F3d1q0W0m3V2f1x</a>) &amp; the additional comment box isn't as aligned as the original (<a href="http://cl.ly/1c0q1y0s1f0L3U1d1Y3h)" rel="nofollow">http://cl.ly/1c0q1y0s1f0L3U1d1Y3h)</a>. So I don't really want you to waste your time here, it's an excellent support and I understand this is more than support :S<br /> Gracias!<br /> E. </p> https://legacy.forums.gravityhelp.com/topic/how-can-i-replicate-a-form-done-with-contact-form-7-as-a-gravity-form#post-17808 Mon, 07 Feb 2011 09:08:36 +0000 Kevin Flahaut 17808@https://legacy.forums.gravityhelp.com/ <p>You should be able to remove the old CSS for the previous form </p> <pre><code>div.entry-content-contact-form { width:550px; float:left; } div.contact-form-container { -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; border: 1px solid #dcdcc8; padding:70px 25px 25px 25px; margin-bottom:25px;background: url(&quot;images/stripes.png&quot;) repeat-x scroll 0 15px #FFFFFF;} div.contact-sidebar { float:left; border-left:1px dotted #dcdcc8; width:270px; margin-left:75px; padding-left:75px; } div.contact-col-one { float:left; width:210px; margin-right:40px; } div.contact-col-two { float:left; width:230px }</code></pre> <p>You don't need that anymore.. just the new styles for your Gravity Form.</p> <p>As far as embedding the form, you don't need to use the "do_shortcode" method as Gravity Forms has it's own function call.</p> <p><code>&lt;?php gravity_form(1, false, false); ?&gt;</code></p> <p>You would just replace the "1" with the actual ID of your form.</p> <p>Note: When using a Gravity Form in a sidebar widget or embedding it anywhere using the function call, you need to manually enqueue the scripts and CSS by placing a short script block in your theme's functions.php file.</p> <pre><code>wp_enqueue_script(&quot;gforms_ui_datepicker&quot;, WP_PLUGIN_URL . &quot;/gravityforms/js/jquery-ui/ui.datepicker.js&quot;, array(&quot;jquery&quot;), &quot;1.4.5&quot;, true); wp_enqueue_script(&quot;gforms_datepicker&quot;, WP_PLUGIN_URL . &quot;/gravityforms/js/datepicker.js&quot;, array(&quot;gforms_ui_datepicker&quot;), &quot;1.4.5&quot;, true); wp_enqueue_script(&quot;gforms_conditional_logic_lib&quot;, WP_PLUGIN_URL . &quot;/gravityforms/js/conditional_logic.js&quot;, array(&quot;gforms_ui_datepicker&quot;), &quot;1.4.5&quot;, true); wp_enqueue_style(&quot;gforms_css&quot;, WP_PLUGIN_URL . &quot;/gravityforms/css/forms.css&quot;);</code></pre> <p>Without this, the conditional logic scripts, datepicker script, form CSS and other elements needed for the full form functionality aren't loaded.</p> <p>You can find more information at the URL below</p> <p><a href="http://www.gravityhelp.com/documentation/embedding-a-form/" rel="nofollow">http://www.gravityhelp.com/documentation/embedding-a-form/</a> </p> https://legacy.forums.gravityhelp.com/topic/how-can-i-replicate-a-form-done-with-contact-form-7-as-a-gravity-form#post-17806 Mon, 07 Feb 2011 06:33:23 +0000 Elena 17806@https://legacy.forums.gravityhelp.com/ <p>wow, kevin, thanks a lot, I'm impressed! Just to check I got it right...I took the theme's style.css and where the CF form was, I pasted your code. Like this: <a href="http://www.pastie.org/1536477" rel="nofollow">http://www.pastie.org/1536477</a> and got this <a href="http://cl.ly/2S1J2N2i2n212a0z3U2f" rel="nofollow">http://cl.ly/2S1J2N2i2n212a0z3U2f</a><br /> QS: Now there seems to be 2 calls to the background image, is that ok?<br /> Sorry for being such a loss at CSS!<br /> PD: And I guess I need to change the shortcode at the contactpage.php of the theme. Bcs I realized the shortcode of the contact form is placed there <a href="http://pastie.org/1536535" rel="nofollow">http://pastie.org/1536535</a>. Am I right? </p> https://legacy.forums.gravityhelp.com/topic/how-can-i-replicate-a-form-done-with-contact-form-7-as-a-gravity-form#post-17802 Mon, 07 Feb 2011 00:48:59 +0000 Kevin Flahaut 17802@https://legacy.forums.gravityhelp.com/ <p>I created a sample form to emulate yours, then grabbed the form styles from your theme stylesheet. I applied some of the CSS Ready Classes from the 1.5 release candidate to create the column layout, then targeted the fields properly and applied the existing theme form styles. </p> <p>NOTE: the Ready Class styles are only in the 1.5 RC version. If you don't want to upgrade to the 1.5 release candidate version right now, you can copy the ready class styles from the link below and add those to your theme stylesheet. Then you can apply the classes to your field as described in the documentation.</p> <p>Ready Class CSS: <a href="http://pastie.org/1443282" rel="nofollow">http://pastie.org/1443282</a></p> <p>I did this in the default 2010 theme so the fonts &amp; some of the other elements are a bit off, but when you add it them to your theme, you should be pretty close. From there, you can tweak a little and should be good to go.</p> <p>test screenshot: <a href="http://grab.by/8Opa" rel="nofollow">http://grab.by/8Opa</a></p> <p>Here's the custom CSS to add to your theme. You'll need to get your form ID and replace the "gform_wrapper_XX" with your actual form ID - example" "gform_wrapper_10""</p> <pre><code>body #gform_wrapper_XX {width:555px} body #gform_wrapper_XX label, body #gform_wrapper_XX input, body #gform_wrapper_XX select { font:14px &#39;Droid Sans&#39;, serif; color: #4b4b4b; line-height:20px } body #gform_wrapper_XX form#gform_78 { -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; border: 1px solid #dcdcc8; padding:70px 25px 25px 25px; margin-bottom:25px;background: url(&quot;http://www.ubikuos.com/wp-content/themes/Ubikuos/images/stripes.png&quot;) repeat-x scroll 0 15px #FFFFFF;} body #gform_wrapper_XX input, body #gform_wrapper_XX textarea { background-color:#fafaf2; padding:7px; border:1px solid #dcdcc8; } body #gform_wrapper_XX input {width:200px; } body #gform_wrapper_XX textarea {width:230px; height:330px } body #gform_wrapper_XX select { width:200px; } body #gform_wrapper_XX .gform_footer input[type=submit] { width:109px; height:36px; background:url(http://www.ubikuos.com/wp-content/themes/Ubikuos/images/submit.png) no-repeat; text-indent:-9999px; border:none; float:right; cursor: pointer; } body #gform_wrapper_XX .gform_footer input[type=submit]:hover{ background-position:-109px 0; } body #gform_wrapper_XX .gform_body .gform_fields .gfield .gfield_label .gfield_required {color:#F70094}</code></pre> <p>I exported the test form so you can grab it and use it as a starter for your new form.</p> <p><a href="http://dl.dropbox.com/u/688846/gravityhelp/gravityforms-export-2011-02-07.xml" rel="nofollow">Download Sample Form (XML)</a></p> <p>Okay, so that's like 95% done for you. Let me know if you need anything else. </p> https://legacy.forums.gravityhelp.com/topic/how-can-i-replicate-a-form-done-with-contact-form-7-as-a-gravity-form#post-17795 Sun, 06 Feb 2011 19:01:23 +0000 Kevin Flahaut 17795@https://legacy.forums.gravityhelp.com/ <p>I'll take a look at this and post some CSS snippets to get you started in a little while. </p>