How can I make email form horizontally aligned

Support
#1

Hey guys!

Recently just installed the email form plugin. After setting it up with MailChimp, it looks like this:

I was wondering if there was a way to place the text boxes horizontally instead of placing them vertically…

Thanks,
Alec

#2

Hey Alec,

You should be able to do so by adding some custom CSS on the site. To get you started, please add this following code in X > Theme Options > CSS:

.mc4wp-form .mc4wp-form-fields > div {
    display: flex;
}

.mc4wp-form .mc4wp-form-fields > div .titlewrap:last-child {
    display: flex;
}

.mc4wp-form .mc4wp-form-fields > div .titlewrap:last-child p:last-child {
    margin-bottom: 0;
    align-self: center;
}

.mc4wp-form .mc4wp-form-fields > div .titlewrap:last-child p:last-child input {
    font-size: 0.9em;
    padding: 7px 10px;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Hope this helps.

1 Like
#3

Hey @Jade

Thanks so much for that, worked a charm.

Just another CSS question regarding this…

I was able to position everything as shown in this photo, including the subscribe button.

However, when changing the font colour/size or background colour of the button in the x theme css, no changes occur.

As shown above, I was able to position the button, but when adding the CSS just mentioned, no change occurs.

Thanks in advance!
Alec

#4

Hi Alec,

Please use the selector: .mc4wp-form .mc4wp-form-fields > div .subscribebutton input

Hope this helps.

#5

Ah perfect, thanks so much Jade :smile:.

Also, any idea of the selector I’d use if I wanted to change the position/font of the success message?

Thanks Jade,
Alec

#6

Hey @Jade,

Additionally, when the subscribe button is pressed and the page reloaded, the page has moved down quite a bit, from this:

To this:

Thanks Jade :smile:
Alec

#7

Hi Alec,

Please check the link the I provided you as it has some steps and tutorials on how to get the correct CSS Selectors.

Also, I tried to check the site that is attached to your license but there is a coming soon page active now which stops me from accessing the site and checking for the CSS selectors.

#8

Hey @Jade

Okay thanks for that, followed along and fixed it :smile:

The page still rolls down quite a bit when subscribing…I have disabled the coming soon page as well…

Thanks Jade,
Alec

#9

When reloading the page as well after subscribing, this box appears…anyway to disable it?

#10

Hi Alec,

There is still a coming soon page active:

#11

Sorry, should all be up now.

#12

Hi Alec,

That is actually a browser message to prevent browsers from accidentally duplicating POST actions on forms.
Though I tried it on my end and can’t seem to replicate it. Please check your browser version and make sure it’s the latest.

https://www.google.com/search?rlz=1C1CHBF_enPH819PH819&ei=3ZDeXP7xN8K4mAXGmZvQDw&q=confirm+resubmission+browser&oq=confirm+resubmission+browser&gs_l=psy-ab.3..0i22i30.57794.59344..59652...0.0..0.461.1947.0j5j2j1j1…0…1…gws-wiz…0i71j0i67j0.JbOM3okMh1g

Thanks

#13

Hey @paul.r

Ok all good, will look into it and see what I can do,

Thanks so much :smile:
Alec

#14

You’re always welcome Alec.

Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.