Customise Form Block

  • Author
    Posts
  • #3393374

    Hi,

    I have put a form block onto my site, however it seems to be doing it’s own thing when it comes to fonts and font colour with no options for me to adjust these.

    To keep a clean, consistent look to the website and keep every part of it ‘on brand’ it’s important to be able to make these adjustments.

    Is there any way, either through the editor or through css coding, to format things such as fonts, font colour and other general things like this that you can adjust literally anywhere else on a page?

    If you were to look at the website I am customising you’ll see on the ‘contact us’ page that the form does not use the same formats as the rest of the site. Particularly in the case of the button at the bottom, which is using Ariel and clashes horribly with the other fonts on the site.

    Thanks!

    Sam

    The blog I need help with is danceflooreduk.com.

    #3393803

    kokkieh
    Staff

    Hi Sam,

    It looks like this is a problem with your theme – for some reason it’s not applying the base font set for the theme to the submit button text, causing that button to revert to the system font instead. You’re seeing Arial because that’s the system font on your computer, I’m guessing Windows? I’m seeing it in the San Fransisco font, as that’s the system font on MacOS.

    I’ve reported this to the theme’s developer so they can fix it on their end. Swell is a premium theme made by another company, and we’ll have to wait on a fix from them, so I’m afraid I cannot give you a timeline on when that will be.

    But meanwhile you can use the following CSS to change the font for the Submit button text to match the base font you currently have set for the theme:

    /* Contact Form button font */
    .wp-block-button__link {
        font-family: "PT Sans",sans-serif;
    }

    You mention color as well – you should be able to modify the button’s color from within the editor. The button is in its own block nested inside the bigger contact form block, so just click on the button itself in the editor to select that block, and you should be able to change the text and background color of the button using the block options in the sidebar on the right.

    If you also want to change the colors of the form field labels, you can use this:

    /* Contact Form label color */
    .contact-form label {
        color: #fff;
    }
    .contact-form label span {
        color: #aaa;
    }

    Let us know if you need help with any other changes.

The topic ‘Customise Form Block’ is closed to new replies.