Email forms custom button and custom title

Support
#1

Hello

Using the email forms extension

How can I do the following:

  1. customize the fonts family and font size of the Title, form text, and Submit button (each individually please)

  2. change the type of button, no matter if I select TRANSPARENT, or FLAT, it will not change- it only really wants to do 3D even if other choices are selected

Here is a link to the main page, you can find the email form in the right column

http://bedstuyloveaffair.us/wordpressdemo/

Attaching my login in a note

Thanks!

#2

HI there,

Thanks for posting in.

For the button, something is overriding it. Please add this CSS to your global custom CSS to override it again

>

.tco-subscribe-form fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

.tco-subscribe-form {
  position: relative;
}

.tco-subscribe-form h1 {
  font-size: 1.75em;
  margin: 0 0 0.5em;
}

.tco-subscribe-form label {
  margin: 0 0 0.375em;
  font-size: 0.85em;
  line-height: 1;
}

.tco-subscribe-form label > span {
  position: relative;
}

.tco-subscribe-form label .required {
  position: absolute;
  top: -0.1em;
  font-size: 1.5em;
}

.tco-subscribe-form select,
.tco-subscribe-form input[type="text"],
.tco-subscribe-form input[type="email"] {
  width: 100%;
  margin-bottom: 1.25em;
  font-size: inherit;
}

.tco-subscribe-form input[type="submit"] {
  display: inline-block;
  width: 100%;
  margin-top: 0.25em;
  font-size: inherit;
}

.tco-subscribe-form input[type="submit"]:focus {
  outline: 0;
}

.tco-subscribe-form .tco-subscribe-form-alert-wrap {
  margin-top: 1.25em;
  font-size: inherit;
}

.tco-alert{
  margin:0;border-left:4px solid #f6dca7;padding:0.915em 2.25em 1.15em 1.15em;font-size:14px;line-height:1.6;color:#c09853;background-color:#fcf8e3;border-radius:3px;
}
.tco-alert.tco-alert-block{
  padding:0.915em 1.15em 1.15em
}
.tco-alert .h-alert{
  margin:0 0 0.5em;padding:0;font-size:18px;letter-spacing:-0.05em;line-height:1.3;text-transform:none;color:inherit;clear:none;
}
.tco-alert .close{
  float:right;position:relative;top:-10px;right:-26px;border:0;padding:0;font-size:18px;line-height:1;text-decoration:none;color:#c09853;background-color:transparent;background-image:none;opacity:0.4;box-shadow:none;cursor:pointer;transition:opacity 0.3s ease;-webkit-appearance:none;
}
.tco-alert .close:hover{
  opacity:1
}
.tco-alert .close:focus{
  outline:0
}
.tco-alert p{
  margin-bottom:0
}
.tco-alert p+p{
  margin-top:6px
}
.tco-alert-muted{
  color:#999;border-color:#cfcfcf;background-color:#eee
}
.tco-alert-muted .close{
  color:#999
}
.tco-alert-info{
  color:#3a87ad;border-color:#b3d1ef;background-color:#d9edf7
}
.tco-alert-info .close{
  color:#3a87ad
}
.tco-alert-success{
  color:#468847;border-color:#c1dea8;background-color:#dff0d8
}
.tco-alert-success .close{
  color:#468847
}
.tco-alert-danger{
  color:#b94a48;border-color:#e5bdc4;background-color:#f2dede
}
.tco-alert-danger .close{
  color:#b94a48
}
.tco-map .tco-map-inner{
  overflow:hidden;position:relative;padding-bottom:56.25%;height:0
}

As for other stylings, all I could see is email field and submit button, the title above is not part of the form. You added it as a separate text element, and you’re correct with its styling.

For the email field and button’s font styling, please add this CSS to your global custom CSS

/* for the button */
.tco-subscribe-form input[type="submit"] {
    font-size: 25px;
    color: #ffffff;
    font-family: "Rubik Mono One";
}

/* for labels */
.tco-subscribe-form label {
    font-size: 25px;
    font-family: "Rubik Mono One";
}

/* for input fields */
.tco-subscribe-form select::-webkit-input-placeholder, 
.tco-subscribe-form input[type="text"]::-webkit-input-placeholder, 
.tco-subscribe-form input[type="email"]::-webkit-input-placeholder,

.tco-subscribe-form select::-moz-placeholder, 
.tco-subscribe-form input[type="text"]::-moz-placeholder, 
.tco-subscribe-form input[type="email"]::-moz-placeholder,

.tco-subscribe-form select:-ms-input-placeholder, 
.tco-subscribe-form input[type="text"]:-ms-input-placeholder, 
.tco-subscribe-form input[type="email"]:-ms-input-placeholder,

.tco-subscribe-form select:-moz-placeholder, 
.tco-subscribe-form input[type="text"]:-moz-placeholder, 
.tco-subscribe-form input[type="email"]:-moz-placeholder {
    font-size: 25px;
    font-family: "Rubik Mono One";
}

Hope this helps.

Trying to use global.css to change Email form
#3

Thank you for this

I tried pasting the top chunk of code into the bottom of my css but it did not seem to have any effect so I removed it.

What is the simplest way to change the button style to Transparent and override whatever is forcing the button to render as 3d?

Thanks!

#4

Hi,

You can try adding the following in Custom CSS

body .tco-subscribe-form .submit {
   border-color:transparent;
   box-shadow:none;
   background-color: red;
   color: #fff;
}

Hope that helps

#5

This worked perfectly thank you so much

What is the CSS to change the font family for the text in the Submit/Subscribe button?

#6

Hello @whitelobster11,

You can use following CSS to change font of Submit button:

body .tco-subscribe-form .submit {font-family: 'Open Sans', sans-serif;}

Thanks.