Skip navigation
Currently Being Moderated

Web form autoresponder CSS styling

Apr 26, 2012 1:42 AM

Tags: #html #css #emails #email_notifications #web_forms #auto_responder

Hi all,

 

I am currently trying to style the html of a notification email sent by the autoresponder when a user submits a web form. I am able style most elements using CSS but cannot find the correct ID for credit card information i.e. CardName, CardType, CardNumber etc.

I am able to style other elements of the form by targeting the ID associated to that form element, like so:

 

            #CAT_Custom_245448 strong {

            font-size:18px

            }

            #CAT_Custom_245448 {

            font-size:36px

            }

            #Name strong {

            font-size:18px

            }

            #Name {

            font-size:36px

            }

 

Where "#Name strong" targets the title of the field, this works because BC outputs the "strong" tag systematically and "#Name" targets the body of the field. The "#CAT_Custom_245448" fields are my custom form fields in which I created in the web form builder.

 

This styling works a treat and gives me complete control over the fields, however I am not too sure what the ID is for the credit card details, I would assume they would be the same as the above, being: #CardType, #CardName, #CardNumber, etc. but this does not work.

 

Has anybody been able to execute this styling before? If not, could a BC staff member please inform us of the correct ID's to target? I'm surprised there is nothing on the knowledge base for this as it should be so very simple, but unfortunately there are no tools for viewing elements of an Email like the very useful Firebug for Firefox, or is there?

 

Thanks

 
Replies
  • mario_gudelj
    1,679 posts
    Oct 13, 2010
    Currently Being Moderated
    Apr 26, 2012 9:18 PM   in reply to The Bowery

    Hey there,

     

    If you look at the HTML code in your Email client you will find the following:

     

    <td id="paymentcc">
              <table class="tabledefault">
              <tbody>
                        <tr>
                                  <td><strong>Name on Card</strong><br>Mario Gudelj</td>
                        </tr>
                        <tr>
                                  <td><strong>Card Number</strong><br>***************1111</td>
                        </tr>
                        <tr>
                        <td><strong>Card Expiry</strong><br>1/2010</td></tr><tr><td><strong>Card Type</strong>
                        <br>Visa</td>
              </tr>
                        <tr><td><strong>Amount</strong><br>$10</td>
                        </tr><tr><td><strong>Invoice Number</strong><br>1149</td></tr>
              </tbody>
              </table></td></tr><tr>
    <td id="customfields">
              <table class="tabledefault"></table>
    </td>

    As you can see, the payment info is rendered in it's own table. Those are the ID's you need to use.

     

    Cheers,

     

    Mario

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points