Customizing sign up form on page

Hello,

I’ve searched but haven’t found enough answers to apply what I’d like to do. I’d like to customize the sign up form on this page to apply the style of button I saved in my presets (yellow button at the bottom of page).

Thank you!

Hi @tats86,

Thanks for reaching out.

That’s just a button without a form, are you referring to the form it’s linked to? It’s not possible since it’s outside your site. It could be customized if you have access to that, but we can’t provide custom development here in the forum.

Thanks!

No… if you look a bit above on the page, there’s the sign up form. I showed you the button as I wanted it to look like…

Hi again,

Please add the following code in the Theme Options > CSS:

.x-subscribe-form fieldset {
  margin-right: 10px
}

.x-subscribe-form input[type="submit"] {
    background: rgb(245,195,41);
    border-color: rgb(245,195,41);
    padding: 18px;
    color: #fff !important;
    text-shadow: none;
    font-weight: 500;
    box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25);
}
.x-subscribe-form input[type="submit"]:hover {
  background: rgb(198, 157, 27);
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

Thank you, one last thing. Why is it not applying the font? It’s a custom font added through CSS.

Thanks for your help, it’s very much appreciated. I try to learn as much as I can on CSS, but not being a developer, I’m limited in my knowledge.
Best,

Hi There,

Can you please confirm how you are using the custom font?

Here is a . article would help you on custom font.

Thanks

I was actually helped by one of your colleagues.

Now, weirdly, the font doesn’t work anywhere on the site.

Hey @tats86,

The usual cause of that is adding custom code in your site that has a syntax error. The issue could also be due to code minification which I see you’re using in your site.

In the other thread, my colleague instructed that you add the @font-face code in the child theme. That could break for several reasons so please try moving the code to Theme Options > CSS. Add the code at the very top or before all other custom CSS.

Generally, custom codes could break. That is why we do not have support for them even if you got the codes here in the forum as they require custom work. Custom codes here in the forum does not take into account other important factors such as site speed. They could also be poorly written due to numerous reasons. With that said, they just serve as a guide. It’s still best that you consult with a third party developer for custom needs or for features that are not yet offered in the theme.

Though it also works, the use of custom fonts are generally not recommended without the user understanding its consequences and the most common negative effect of it is increase in page load time.

If it’s still broken in your site, please consult with a third party developer. The use of custom fonts is currently not a part of the theme. It might be possible in the future but for now, it is outside the scope of our support.

Thank you for understanding.

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