ActiveCampaign Forum

How To Customize Form Submit Button?


#1

Hi all! Thanks for your time. First time poster and member of Active Campaign.

I have figured out how to adjust the placement of the Optin Form “Submit” button through CSS, however I would like to change the text also.

Does anyone know how I can learn to do this?

Thank you.


How to Customize Form Submit Button With Image?
#2

Welcome Andre!

Are you unable to do it this way because of the CSS?


#3

Wow! I feel so stupid now, all this time I didn’t see that. :grinning: Thanks a lot for your reply.


#4

Ha! No reason to feel stupid. Come back and post another thread if anything else trips you up. We’re here to help.


#6

Thank you. I will contribute where ever I can also.


#7

Hello Andreddaniel, since this question is related to customizing the form submit button I thought I would ask you.

What CSS did you use to modify the button placement? I’m trying to center it, and also change the button font size.

Even with the CSS selection I can’t seem to identify the code for the button, only for the .submit function.

Thank you


#8

I actually figured it out…

._submit {text-align: center; font-size: 20px; display: block; margin: auto;}


#9

Hey guys and gals, does anybody know how to change the colour of a button when hovering over it?

I tried the usual css stuff and it doesn’t work :tired_face:


#10

Hi @earlybirdflightclub,

In order to change the color of the button within a form click on the “Style” tab and within the “Button” section you can edit the color. Here is a video of how to do this:

Hope this helps!

Perry


#11

Sorry, I need the button to change cover when hovering over it!!

I know how to change the colour.

I imagine this needed to be done in CSS?


#12

Aha got it, @earlybirdflightclub!

You are right CSS will be needed and I believe the CSS code would look something like this:

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

#13

Tried that, that doesn’t work…


#14

@earlybirdflightclub, you’ll need to edit the class on the ActiveCampaign form in order for this to work. Here is additional information I found on hoverable buttons as well: https://www.w3schools.com/css/css3_buttons.asp


#15

I have edited the class using the custom class section in the form editor. Could you try and do it your side and see if you get any results?


#16

Hi @earlybirdflightclub,

Yep, so tried it out and had to add an “important” criteria to the CSS and for the sake of simplification I took out the “color: white;” for the text color. So, this is what I was left with:

._submit:hover {
    background-color: #454545  !important; /* Gray */
}

#17

YAYAYAYAYAYA you absolute legend that works perfectly :raised_hands::grinning:


#18

Yay, awesome and thank you! :grin:


#19

Hi, I need to remove background color for submit button in vertical forms and then change background color as well as font color on mouse hover. I managed to do the same thing with horizontal forms but I spent hours trying to do the same for vertical forms but all in vain. Please help!


#20

I tried the CSS for changing background color when hovering a button.

It works while I’m in ActiveCampaign’s form editor, but doesn’t when the form is embedded on my page. I just copy-pasted the code as instructed. Any ideas?


#21

I have this problem too - has anyone resolved it?

I changed the hover colour and changed the text size for the submit button. It looks aok on the form editor preview, but is nowhere to be seen when I embed the code on my website.

Any ideas why or what I can do next?