Can’t reduce width of ‘Message’ box

  • Resolved SaraLuisa

    (@saraluisa)


    7 years, 8 months ago

    Hi, I have set up a simple contact form but the ‘message’ box spans the whole page. I would like the whole form to take up one side of the page. My page is set to 100% width so I also need it to have padding on the left side. I have inserted the form in a 2 column but this hasn’t changed it.

    Also if it is easy can I change the colour of the * for the required fields?

    I am a beginner at CSS.

    I would appreciate any help.

    Thanks

    Sara

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi Sara,

    I’d be happy to help! For the width issue, could you please share the URL of the page where your form is embedded? With that, I’ll be able to create CSS that will only change the width for this one form on your site (rather than accidentally altering the width of all other current and future forms).

    For the asterisk color, here’s the CSS you’ll need:

    div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: #ff0000;
}

    The current hex code, #ff0000, is the default red color. You can replace this with any other hex code (if you’re not sure what to use, a hex generator such as https://htmlcolorcodes.com/ could be a good resource).

    The easiest way to add small amounts of custom CSS like this is the WordPress CSS Editor, in the WordPress admin menu under Appearance > Customize > Additional CSS.

    And in case you’d like to create more custom styles for your forms, here’s our tutorial with a ton more details on how you can do that ??

    Thread Starter SaraLuisa

    (@saraluisa)

    Hi Jess,

    Thank you for the code for the asterisk colour and link to tutorials.

    The web page is weddings.trueshotphotography.ie/weddings (it’s a work in progress). I would love to have the message box the same width as the others ie so the fields line up right and left.

    Really appreciate your help, thank you.

    Hi Sara,

    Thanks for passing that URL along!

    Ok, so there are two ways you could go about making those fields the same width:

    1) You could make Name, Email, and Wedding date larger. These fields are currently set to the Medium field size, which is 60% of their container’s width. If you’d like to make them the same width as the Message box, you can open the form builder, click the field, open the Advanced section, and change the field size to Large (here’s a screenshot of that setting).

    2) You could add CSS to make the Message box smaller, matching the others:


    div.wpforms-container-full .wpforms-form textarea {
    max-width: 60%;
    }

    I hope one of these options helps! ??

    Thread Starter SaraLuisa

    (@saraluisa)

    Hi Jess,

    Thank you very much. I used the CSS and it worked perfectly!

    Thanks again, much appreciated.

    Sara

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can’t reduce width of ‘Message’ box’ is closed to new replies.