How To Customize Form Submit Button?

Ask a question Email Marketing
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.

2 Likes
2

Welcome Andre!

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

Screen Recording 2016-11-29 at 10.12 AM.gif1530×1009 299 KB

3

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

1 Like
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.

1 Like
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;}

4 Likes
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:

12 AM
12 AM1483×1027 741 KB

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:

1 Like
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?

1 Like
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?

1 Like