CSS for opt-in message on Contact Form

  • Resolved evollo

    (@evollo)


    3 years, 1 month ago

    We are using this plugin for a Contact Form. We have not overwritten the plugin default css and the opt-in message is enabled. We have 2 style issues on the front end:

    1) The Message (large text area) field appears very small on the front end. Can we make the message box display larger?

    2) The opt-in message font is too tiny to read. What is the CSS to make it larger?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Constant Contact

    (@constantcontact)

    Hi @evollo

    Not sure if you have solved it since, but I’m not seeing any real issues with #2 there. All the font generated by the form is looking to be matching.

    Regarding item #1, the following CSS should help out a bit. It’ll set the width for all the inputs, except the submit button to 100%, and also increase the textarea height to 100px to make it a bit more workable vertically. Lastly it’ll put the character limit message below the textarea as well.

    .ctct-form-field input[type="tel"],
.ctct-form-field input[type="email"],
.ctct-form-field input[type="text"] {
    width: 100%;
}
.ctct-textarea {
	height: 100px;
	width: 100%;
}
.ctct-textarea-warning-label {
	display: block;
}
    Thread Starter evollo

    (@evollo)

    Your CSS to expand input box size works great. Thanks.

    Yes, we were able to enlarge the teeny-tiny label text with this CSS:

    .ctct-form-wrapper .ctct-input-container label {
    color: #aaa;
    font-size: 100%;
    Plugin Author Constant Contact

    (@constantcontact)

    Any other detail touchups needed? or are we good at this point?

    There should be a number of good classes/IDs for helping with styling purposes but sometimes just needs a touch of extra help. ??

    Thread Starter evollo

    (@evollo)

    Thank you for the help. We are good for now.

    Plugin Author Constant Contact

    (@constantcontact)

    Sounds good, thanks @evollo.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS for opt-in message on Contact Form’ is closed to new replies.