How To Customise More Email Forms Parameters

Support
#1

Hi,

There are a few parameters I would like to customise in my Email Form that don’t appear as options in the Email Forms applications. Perhaps some of these are controlled by the Customise menu but I couldn’t figure it out.

To illustrate my request I have included a picture of what my form currently looks like:

I would like to change:

  1. Font colour before the user types in their details i.e. ‘Last Name’ font colour
  2. Font colour after the user types in their details i.e. ‘David’ font colour
  3. The colour of the form boxes from black/dark grey to another colour.

Many thanks in advance for your great support team. Reading through forum posts has been very useful to me this week.

Kind regards,
Filip

#2

Hey Filip,

There’s no options to design the Email Forms. It get’s it’s style from the Stack you’re using. Before I give you the CSS to style the form fields, please note that overriding the design of the Stack’s design is not a part of our support service. We only give codes to help users get started. By using the code that I post here, you understand that it is your responsibility to fix issues arising from the use of it and further enhance it. With that said, you should learn CSS. This site can help you get started. To aid you with working with CSS, you also should learn how to use the browser’s developer tools. Here’s a guide for Chrome.

Put this code in Theme Options > CSS

.tco-subscribe-form select::placeholder,
.tco-subscribe-form input[type="text"]::placeholder,
.tco-subscribe-form input[type="email"]::placeholder {
	color: yellow !important;
}

.tco-subscribe-form select,
.tco-subscribe-form input[type="text"],
.tco-subscribe-form input[type="email"] {
	color: white;
	background: maroon
}

Hope that helps and thank you for understanding.

#3

Hi @christian_y,

Thanks for your help and all the extra information. The snippet worked and the additional website link is very useful.

How might I go about finding out the specific objects to call? For example, you use tco-subscribe-form. Where might such objects be documented?

Kind regards,
Filip

#4

Hi Filip,

You can use Chrome developer tools or Firefox inspect elements options to see your site’s underlying elements. Then you can create your own CSS rules to target those elements.

Please check this example video walk-through to understand it better (https://www.youtube.com/watch?v=RBinFeVZz0E).

Hope that helps.

#5

Hi @mldarshana,

Cool! Thanks very much for your help.

Kind regards,
Filip

#6

You’re welcome, Filip.

#7

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