a) Definitely achievable – likely will require some custom CSS based on your theme.
b) Yes. In fact there is a “global” CSS box as part of the plugin settings which is applied to all forms when Custom CSS is enabled. There is also a Custom CSS box for each form to include form specific CSS.
c) If you don’t do anything special you’ll end up with the Goolge confirmation page after submitting the form.
Hmm okay, so it’s my theme that’s causing the fields not to display inline with the asterisks? Any idea on what CSS might fix that?
I tried entering the custom CSS in the ‘CSS Class’ box on the form but it didn’t work and ended up editing the core CSS file.
Any thoughts? Thanks for the quick response as well!
The appearance is almost always due to the WordPress theme currently being used because none of Google’s CSS is brought through the process, just the HTML that makes up the form.
If you can post a URL to your page, I can look at it for you and make some suggestions. If you don’t want to post it here on the forum you can fill out my Help and Support form and I’ll take a look when I see the email.
There really is no reason to edit the plugin’s core CSS file.
Okay, the code I entered was:
div.ss-form-entry > input { width: 50%; }
div.ss-form-entry > textarea { width: 100%; }
div.required-message {
display: none;
}
and when I put that in the CSS Class box nothing happened so I edited the .css file.
URL: http://www.talonx.com/website-starting-checklist/
Thanks,
You need to add this to the custom CSS file:
div.ss-q-title label {
display: inline;
}
Your theme has “display” set to “block” for “label” elements. The above will override it within the context of a Google Form.
Thanks, much appreciated!
Is there any way to add a space between the field and the question below or a br tag? The option on the back end put it between question and answer, I’d like it below the answer and the next question.
Cheers,
You can mess with the margin and/or padding properties. Something like this will make it spread out.
.ss-q-title {
margin-top: 10px;
}
The Google Forms have a slew of CSS classes so if you know CSS pretty well, there isn’t much you can’t do to affect the appearance of your form. I find a tool like Firebug invaluable for figuring these things out. It lets you make changes inline and see the result so you don’t have to update your CSS, re-render the page, etc. You’ll know right away if you have the right CSS selector.
Another thing I do is use things like “border: 1px dashed red;” in my CSS temporarily to ensure I am selecting the thing I want to modify.
Thanks for all your help — much appreciated!
