Docs

[John Michael]

Hi, how to format please the optin form on this page: http://johnmichaelmarketing.com/home-3/
to look like the optin form on the side menu here please? http://johnmichaelmarketing.com/category/blog/

Note please the original page I wish to edit is http://johnmichaelmarketing.com/home
but created a copy to test first, till I get it working.

Thanks,
John

[John Michael]

Also will add same exact form here too: http://johnmichaelmarketing.com/ddt-application-lp/

[Rupok]

Hi there,

Is that your current form? – http://prntscr.com/cwqcg1

You can add the below CSS under Custom > CSS in the Customizer.

#x-content-band-1 .wpb_content_element.wpb_raw_html {
  border: 5px dotted #f00;
  clear: both;
  display: block;
  padding: 20px;
}

#x-content-band-1 .wpb_raw_html .af-form-wrapper > input {
  display: block;
  height: 40px;
  line-height: 1;
  width: 230px;
}

Note that the code is tailored for the page http://johnmichaelmarketing.com/home-3/

So if you want to use it on another page, you need to change the selector properly. I would suggest you to use a custom class for the container (maybe the RAW HTML element you are using). So that the code will be more specific for this section and clean.

Let’s update us if you need help to adjust the code on other page. Make sure to add the custom class.

Thanks!

[John Michael]

ok great thanks! As described above that’s just a test page I created.

The page I wish to change is http://johnmichaelmarketing.com/home

Please give me the updated code for that page.

Thanks 🙂

[John Michael]

And apart from the new code I’ll copy paste any thing else I need to do please? Got confused a bit with this: “Make sure to add the custom class”.
Guess the new code will have the new class and all should be good right?

Thanks

[Friech]

Hi There,

It seems you already got the border for the form here: http://johnmichaelmarketing.com/

Would you mind to clarify?

Thanks.

[John Michael]

That’s an old form, I got a a new form code and I don’t know how the old one works with the red line, since a developer did that for me.

I need the content / webform on this sample page: http://johnmichaelmarketing.com/home-3/
here on this page http://johnmichaelmarketing.com/home with the red dotted line around it.

Hope it’s clear now.

Thanks,
John

[Lely]

Hello John,

Feel free to move the form and then to add dotted and above CSS use the following instead:

.home #x-content-band-1 .wpb_content_element.wpb_raw_html {
    border: 5px dotted #f00;
    clear: both;
    display: block;
    padding: 20px;
}
.home #x-content-band-1 .wpb_raw_html .af-form-wrapper > input {
  display: block;
  height: 40px;
  line-height: 1;
  width: 230px;
}

Hope this helps.

[John Michael]

Hi, tried it but didn’t work well, here’s what I got: http://screencast-o-matic.com/watch/cD6riXjpRI

Once we sort that out need the exact same form on this page please http://johnmichaelmarketing.com/ddt-application-lp/
to replace the existing one.

Thanks

[Lely]

Thank you for the video.

On the raw content element where you have added the form code, add class on it’s class field. Let say add form-box. Then update the CSS to this:

.form-box {
    border: 5px dotted #f00;
    clear: both;
    display: block;
    padding: 20px;
}
.form-box .af-form-wrapper > input {
  display: block;
  height: 40px;
  line-height: 1;
  width: 230px;
}

With this approach, every time you want to apply those changes, we just need to add the class form-box.

Hope this helps.

[John Michael]

ok much better thanks just needs some fine tuning please: http://screencast-o-matic.com/watch/cD6riCjpSn

[Paul R]

Hi John,

You can add this under Custom > Edit Global CSS in the Customizer.

.form-box {
    max-width: 350px;
    margin:0 auto;
}

You may change 350 to adjust the width.

Thanks

[John Michael]

ok great all set! Just need this please: http://screencast-o-matic.com/watch/cD6rjbjpSL

[John Michael]

ok found how to do that, now need to remove the entire header, navigation bar etc and footer and just leave disclaimer, privacy policy.

Thanks

[John Michael]

Actually found that too 🙂

Just want to keep only this part of the footer: Privacy Policy / Earning Disclaimer / Term of Use / Affiliates

Only option I see is to add all of it or remove it completely.

Here’s the page: http://johnmichaelmarketing.com/dlt-application-lp/

Thanks!

[Author]

Posts