Gravity Forms Styling With PREMISE Plugin

Hi:

I'm using the PREMISE plugin for landing pages. When creating one of these "posts," there is an in-page editor that allows the insertion of a Gravity Forms box. I've tried the editor's functions to center to Gravity Form, or to indent it -- but these don't work. (That's probably no surprise to you. ;=)

The PREMISE Tech Support folks tell me that any CSS editing should be done in their "Styles" box -- essentially a template for landing pages. But what CSS to enter?

I've reviewed the terrific GravityForms examples for creating multiple columns and other sophisticated designs. But what I haven't found is a simple CSS code that allows me to center a column of uniform fields on the page and surrounding these with a gray-scale "container" box. Can you point me in the right direction -- or provide a code samples where I can adjust padding and position for these elements? (It goes without saying that I'm clueless about CSS!)

Sorry I don't have "live" pages for you to analyze. But pLease see the four sample images on this page https://www.archetypecommunications.com/sample-image-for-gravity-forms-support/ . If there is some way you can provide code to get me "in the ballpark," I'm happy to experiment with plugging in different values for padding, etc.

Thanks for your help!

Hi Chris:

Thanks for your prompt response!

Although I had found that very useful samples page you suggested, I didn't see a relatively simple example for centering a column of uniform fields. (IMAGE 3 on the link I previously sent shows my experiment in using your CSS snippets to isolate and identify the fields; now I just need to know how to style them.) But now you've given me a code sample to "kick start" my experiment. Very much appreciated...

When I get time to work on this today, I'll see how close I can come to a workable solution. If it needs "fine-tuning," I'll send you a link to that live page.

Meanwhile, can you offer any counsel about using GravityForms with the Premise plugin? Did you understand my question about where to enter code when using BOTH Gravity Forms and Premise for the same landing page? (Does one CSS entry box override the other?)

I also am integrating MailChimp with some of my landing pages and contact forms. Although the MailChimp design works well enough, some of its code (such as the button text) is "hard-wired" -- so I'd prefer to have the flexibility that GravityForms offers. Can I take the CSS created in Premise/GravityForms and drop that into MailChimp as a custom design? (I'd try it myself -- but when attempting a custom design in MailChimp, that program automatically wipes out any previous templates; so I'd like to know that there's a good possibility of this working.)

Again, I really appreciate your responsiveness. In just a few hours you've given me more useful information than I've received in several DAYS from other sites.

Hi:

The live page is viewable here:
https://www.archetypecommunications.com/call-at-617-8581376/

Also, FYI, this is the message that shows up in the PREMISE editor window when I toggle the inclusion of a GravityForms form:

VISUAL:
[gravityform id=1 name=CONTACTUS... ajax=true]

HTML:
[gravityform id=1 name=CONTACTUS... ajax=true]

Any red flags here? (For example: Since the code generated here calls itself "id=1" does that mean I should replace "1" with all the places where "32" appeared in the code you provided?)

As you suggested, I plugged in the code from your post above. I stripped out the references to #32." (As shown below.) But still the code is not "expressing" on the page. I also have tried clearing my browser's cache, and also the WordPress cache.

I'd very much appreciate your taking a look at the live page -- as I very much want to activate some landing pages this weekend. Thanks!

01
body #gform_wrapper {
02
width:598px;
03
border:1px solid #C2C2C2;
04
padding:5px;
05
}
06
body #gform_wrapper .gform_heading span.gform_description {
07
color:red;
08
display:block;
09
text-align:center;
10
}
11
body #gform_wrapper .gform_body ul li.gfield {
12
text-align:center;
13
}
14
body #gform_wrapper .gform_footer input[type='submit']  {
15
color:#FFFFFF;
16
background:red;
17
float:none;
18
display:block;
19
width:140px;
20
margin:0 auto;
21
}

Any suggestions as to why the form isn't centering here: http://aquaviews.net/fbtab/contest-entry/

Thanks!

Getting closer, but the check box is over to the left instead of next to the associated text. I guess the radio options in the original example site are like that too, now that I look at it.

My hero! :)