Gravity forms css infering layout - css

I'm migrating the contact form from here: http://www.niclaims.co.uk/ to the new Wordpress version using Gravity Forms (the original ASP site).
However, I am unfamiliar with the way it controls the CSS of the form output. I have turned it off in the options, but the widget seems to add extra padding on the one I am making here: http://niclaims.webdeveloperbelfast.com/ . It's the contact form on the home page side bar I need help with. How can I remove this extra padding?
Also, I need to know, with Gravity Forms is there a way that I can have the labels inline in the text boxes and disappear on focus?

i am not a css prodigy and have never used gravity forms before. But you can try this plugin http://wordpress.org/extend/plugins/dropifi-contact-widget/ which offers a much easier way to create contact forms without touching any code. Hope it helps!

Related

Is it possible to edit the CSS of a Google-generated CAPTCHA?

I'm in the process of adding Google CAPTCHAs to 3 different Gravity Forms on a Wordpress website. I've integrated everything successfully and all appears to be working, but I am running into problems overriding Google's CSS in order to customize the CAPTCHA appearance. This is particularly problematic when it comes to sizing, as the CAPTCHAs aren't mobile responsive and in one instance it spills over my sidebar and into the site content (which I've removed for now, while troubleshooting).
Any guidance you can offer about how to go about changing the style/size of the CAPTCHA would be much appreciated!

Burger menu from wordpress template

I'm just starting my programming but I need help.
I built my site from wordpress template. Made a lot of customization on my own but I have trouble by creating BURGER MENU on mobile devices.
I'm not sure how I can rewrite chosen template navigation bar menu to burger. Let me know if anyone could help me.
You could do it a few different ways, but personally, it's easier to place it with javascript and hide it with css...
Usually, you would create an element with javascript and attach it to a location on your page. For the burger itself, you've got the option of using drop-shadows, three divs or the unicode character for it. You can read more about those options here: https://css-tricks.com/three-line-menu-navicon/
Finally, if you want to add animation to your menu items (for opening / closing ) here's something that you can read to understand how it's possible to achieve: https://jonsuh.com/hamburgers/

Gravity Forms - Organizing a conditional logic, two column layout with section breaks

I'm creating an online ordering system using Gravity Forms for a restaurant. Most of the menu choices on the menu give the ability to select different add-ons or options.
I have configured the menu items as radio buttons, so once they are clicked they open a section where you can select the options you want. I have a couple rows of menu items that are two by two, and another couple that are three by three.
The issue I am running into is that when the options sections are opened up, they open on top of eachother. I would like them to stay in their columns underneath the menu items that they are linked with.
Is this possible using standard gravity forms or do I need to make some CSS modifications? If so, how to do?
You'll need to make some CSS modifications. What I do is remove all default gravity forms styling and change the elements to HTML5. This is all in the settings and then you can recreate the form styling.
This github is a really great resource and has everything you will need to help you with the styling.
https://github.com/thatryan/gravity-forms-sass

Page layout messing up when introducing new CSS over Bootstrap templates

So having a real issue. I'm trying to input a responsive newsletter form into my website, the site is using a bootstrap template.
I can successfully put the form in and in the right place but it completely messes up the rest of the layout on the site.
Is there anything specific I should be taking / removing / inserting into my CSS or index file.
Any help much appreciated. Thanks

responsive autoresponder on iframe

I am building an autoresponder for my own website. I thought to put it inside an iframe to decouple it's style from the theme style (i'm on wordpress), but this gives me two collateral effects.
The first one is that the iframe is not much friendly with the responsiveness, and I'm trying to address it's behaviour to always show the content of the autoresponder.
the second one is that the form inside the iframe has a "thank you" page after the submit, but with the iframe the thank you page will open inside the iframe.
There is a way to open the thank you page on the host page? Am I doing this the right way? there is maybe a better way to insert a piece of web page in a way that stay indipendent from the theme around it?
I wouldn't use an iframe to de-couple styling to be honest, they can prove far more trouble than they are worth.
I would just override any theme styles I didn't want with CSS targeted at the component. It sounds a lot more involved than it actually would be and you'd have better control over the responsive layout of the component.

Resources