ConvertPlus button changes

Hi there. I recently started using the ConvertPlus (amazing BTW) plugin - I’d like to change the location of the “submit” button. Is there a way to control it? Move it from left-est to right-est?

Thanks in advance,

Hello @liorgo81,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

Hi Prasant,
The website is not live yet, so I can send you the URL and you’d have to add it to the host. I can send it as a secure note…?

Thanks,

Hi,

Yes, you may sen the url in Secure Note. Thanks

Done!
Thanks in advance :slight_smile:

Hi There,

The Url provided lead us to which seems to be your old website.

Are you developing the website locally?

If developing online, ask your hosting company for the preview URL.

Thank you

Hi Joao, like I said, it would need to be added to the host. It’s still under development

Hi there,

How about the IP? We can only add it to our host file with the IP. For the meantime, you may add this CSS to your global custom CSS

.cp-all-inputs-wrap {
float: right;
}

The fields will be positioned to the right, hence, the submit button to the left.

Thanks!

My mistake about the IP; sent it as secure as well :slight_smile: and thank you!

Hi there,

Thanks, please add this :slight_smile:

.cp-all-inputs-wrap {
float: left !important;
}
.cp-submit-wrap {
float: right !important;
}

Hope this helps.

Hi Rad,
Thank you kindly for all your help, truly appreciated. In fact, the first script you sent worked well.
However, now I’m facing a different problem:
In the desktop the form is leaning to the left but in the mobile it’s adjacent to the right. It would be ideal if it was in the center in both cases.

Please advise, :pray:t2:

Hi,

You can try adding this in Custom CSS

.home .ult-content-box {
    margin-right:0 !important;
}

@media (max-width: 768px) {
    .home .cp-modal {
         width: 100% !important;
    }
}

Hope that helps

Hi there,
Sorry for the delayed response. You css worked great.
However I was wondering… how to go about doing it 90% and centered?

Thanks in advance,

Hi again,

Try replacing the code with this:

.home .ult-content-box {
    margin-right:0 !important;
}

@media (max-width: 768px) {
    .home .cp-modal {
         width: 90% !important;
         margin:  auto !important;
    }
}

Let us know how this goes!

Hello,
I’m facing the same issue, but I haven’t understood where should I place the codes

.cp-all-inputs-wrap {
float: left !important;
}
.cp-submit-wrap {
float: right !important;
}

And also this one:

.home .ult-content-box {
margin-right:0 !important;
}
@media (max-width: 768px) {
.home .cp-modal {
width: 90% !important;
margin: auto !important;
}
}

I have tried pasting it in “Custom CSS” in Modal editing (ConvertPlus). I also tried pasting in Custom CSS in page editor (Cornerstone), and lfinally also in Global CSS in “Appearance ->Customize”.

Also, there’s to much top and bottom padding (Maybe because of deleted template text?), how can I remove it?

Thanks.

Hi @carmitgeva,

Would you mind providing us with your website URL so we can take a closer look?

Thanks.

Hi @thai, Thank you for replying.
The webpage I’m working on is carmitgeva.com/home .
I don’t know if you need any further information / credentials.

The page is under construction, you can see the ConvertPLus widget at the bottom. The button is located on the right side instead on the left side

Many thakns.

Hi @carmitgeva,

May I know what you’re trying to achieve? There are multiple issues on this thread, I’m not sure which one is similar to yours. And your forms already inline with the button to the right.

As for the spacing, please add this CSS

.cp-desc-container, .cp-sec-title-container, .cp-title-container {
    margin: 0px !important;
    padding: 0px !important;
}
.cp-modal-every-design .cp-title, .cp-modal-every-design h1.cp-title {
    font-size: 25px !important;
    line-height: 25px !important;
    margin-bottom: 10px;
}

Thanks!

@Rad Thanks for your reply.
I’m actually trying to get the button to be on the left side.

The CSS code you added for the spacing works.
Thanks.

Hi @carmitgeva,

Ah, a different issue, in that case, it will need a different CSS. This one

.cp-all-inputs-wrap {
float: right !important;
}
.cp-submit-wrap {
float: left !important;
}
@media ( min-width: 992px ) {
.cp-module .col-md-9 {
    width: calc(75% - 10px) !important;
}
}

Thanks!

1 Like