Modify Notification Message CSS

  • Resolved swamparoo

    (@swamparoo)


    8 years, 5 months ago

    First off, thanks for an awesome plugin. Just rated it five stars. Had migrated from Fast Secure Contact From as it’s no longer supported. WPForms does all that I need for a simple contact form. It was quite easy to setup and customize my form with the free version. The only thing I would like to see is the ability to include the IP address without the use of extra tags.

    Currently, the way I’m handling the sending of the IP address is via a custome message for notifications. Currently, I have the message text as such:

    {all_fields}

<strong>Sender's IP:</strong>
 {user_ip}

    While this works, there is one issue: style formatting. The style/formatting of the text “Sender’s IP:” and the user’s IP is different from the rest of the email. What I’d like is for the text of “Sender’s IP” to be the same as the rest of the labels in the email (i.e. First Name, Last Name, Email, etc). I would like the same for the text of the IP address to be the same font and font style as the other text (i.e. the actual text of the person’s name, email, etc).

    The only way I can think of that is to see what the CSS is for the notification message sent out. Along those lines, is there a way that I can modify the default template of the message that’s sent out? Would be nice if creating the notification message sent to me was drag and drop like the form creation. If CSS modification is required, then that’s not an issue.

Viewing 1 replies (of 1 total)
  • Jess Quig

    (@jquigam)

    8 years, 4 months ago

    Hi swamparoo,

    We don’t have any built-in way to modify notification CSS, but you can do this with a bit of custom code if you’re willing.

    If you’d like to take a look, here’s the code you’d need. This particular snippet is meant to change the email’s background color from grey to white, but you can make any changes you like or just use it as a reference. If you decide to add this code to your site, the comments at the top share instructions on how to do that.

    Since the {all_fields} Smart Tag outputs a table format it may take a bit of experimenting to get the spacing, etc just right (on case it helps, I really like Chrome Dev Tools for quickly creating and testing CSS — here’s a tutorial from WPBeginner on how to use that).

    The only other thing I’d note is that CSS in emails, as a whole, is well behind regular website CSS. So if you make any style changes, I’d recommend testing them out by sending submissions to a couple different email providers. That way you can be sure the styles render correctly for each.

    I hope this helps! If you have any questions, please let me know 🙂

Viewing 1 replies (of 1 total)

The topic ‘Modify Notification Message CSS’ is closed to new replies.