Place a ‘Form’ within the top banner (overlay)

[Craig Chalmers]

Page in question: http://advisability.co.uk/index.php/adv1085/

So on this page – you can see a picture of ‘jars’ but i want to put a form in this section – overlaying the jars (i will probably change the photo) – how can I get a form within this section – I believe this is a widget kit section within banner bide.

I use ‘NEX-FORMs’ which produce shortcoides for easy placement, but can have html/php for the same forms where required.

Any assistance is helpful – see an example of what I’m thinking here: https://differentlife.co.za/

thanks

[Sushil Adhikari]

Hi Craig Chalmers,

You can use Banner Wide widget position placing text widget. And on the text widget content area you can place both php shortcode or form HTML .
@See for reference: How to use text widget?

If you get any problems on this , please let us know.

Thanks

[Craig Chalmers]

So can both the widget kit slideshow AND the form and this will overlay each other?

[Craig Chalmers]

I’m sorry but this doesn’t work. I have the slideshow by widget kit within the sites use banner widget, which is fine. As soon as I out another short code within the same text box it appears under the image. If I put another text box it also appears under the picture, not overplayed.

As per the example I gave id like the image on the banner wide as usual, with a form ON TOP of it, overlayed. How can this be done?

[Sushil Adhikari]

Hi Craig Chalmers,

If you are using shortcode for form , first you need to find wrapper ie. id or class of form add this css in child theme[style.css]:

#fr-banner #id or .class of form {
	position: absolute;
	margin-top: 5%;
	margin-left: 65%;	
}

Note: Ajust margin-top and margin-left value as per your requirement

If you are using form html , then just wrap with some html tag element along with specific id or class. and then take those id or class to make them overlay with banner image.

#fr-banner #id or .class of form {
	position: absolute;
	margin-top: 5%;
	margin-left: 65%;	
}

Don’t hesitate to ask a question if you got any doubt on this and also you can see the article as a reference Reference example on how to overlap html elements?.

Note: please add those css on child theme style.css file so your changes will be lost on theme update.

Thanks

[Author]

Posts