Embed html form - format issue - css fix?

Classic
1

I’m trying to embed a form into a site using the html embed code (from groove funnels). Adding the code to a html stack using a ‘Blank’ theme (PURE) it works perfectly.

When I do the same to the site with the theme I’m using, the formatting is all over the place… Is this something I can fix with CSS ? - guess I need to clear the theme formatting for the html stack - is the possible?

Problem themed test page here
https://hdstherapy.com/formtest/

Grateful for any advice
Thanks - Keith

2

You’ll need to be more specific when you say ‘all over the place’. What’s wrong the form from your point of view? I can see it spans the full width of the site - is that the issue or something else?

If you can demonstrate how you’d like it to look, that would help us to help you.

Rob

3

Hi Rob - fair point…

This is what the form looks like in simple theme (the theme is called Pure) and is basically what it should look like - only full width, I can change width ok if I can loose the overlapping etc.
www.hdstherapy.com/formtest2

Thanks - Keith

5

Try this in the Custom CSS panel

.groovemail-form-raw-html-embed-border {
border-width: none; 
}
1 Like
6

Hi Rob, Thanks for the suggestion. I’m afraid it didn’t change anything but it made me look at CSS commands on W3schools.com and try a few in the custom CSS panel.
This seems to be going in the right direction:

.groovemail-form-raw-html-embed-border div {

width: 350px;
padding: 0px;
margin: 0px;
}

Not sure why I’m seeing extra boxes behind the input fields, guess I need to look at the groove funnels code… Updated page:
https://hdstherapy.com/formtest/

Groove funnels also provide Java script but not sure how to use this, will do a search.
Thanks again for your help

7

Sorry about that. Any particular reason you want to use this form as opposed to the built in RW one or a Stacks-based on like Doobox’ HTML form?

Rob

8

I don’t think none is valid.

try:
border-width: 0;

2 Likes
9

In addition if you want to make the form 350px wide try this:

form {
    width: 350px;
    margin: 0 auto;
}

The margin will center in availble space.

2021-07-16_14-14-30
2021-07-16_14-14-30838×501 16.7 KB

1 Like
10

I want to use the Groove forms as Groove provide an automated sales funnel, auto responder, membership sites, webinar function, video hosting etc. A lot of services under one roof - https://www.clickmelink.com/free-sales-funnels

11

Thanks

.groovemail-form-raw-html-embed-border div {
border-width: none;
width: 350px;
margin: 0 auto;
}

Thats now looking better - still need to work out where the background boxes are coming from

Thanks Teefer and Rob for your help… getting there slowly and learning along the way :slight_smile:

12

none is not valid.
2021-07-16_15-10-15

2 Likes
13

Awesome…!!!
Thats fixed it, Brilliant thanks so much guys for your help.
Cheers - Keith

14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.