Contact-Form confirmation – Custom CSS

• 

  jrafinancial · Member · Apr 4, 2014 at 5:50 pm

  • Copy link
  • Add topic to favorites

  I have put together a contact-form, and it’s looking and working great. I was able to adjust the placement of the content of that form via CSS using this information.

  .contact-form {
  	margin-left: 125px;
  	margin-top: 20px;
  }

  However, when the contact-form confirmation page appears (http://portfoliopartner.wordpress.com/wp-admin/customize.php?url=http%3A%2F%2Fportfoliopartner.wordpress.com%2Fproposal-request%2F%3Fcontact-form-id%3D17%26contact-form-sent%3D1172%26_wpnonce%3D33250749eb), the margins are not retained.

  Would someone be willing to tell me what tag I need to add in CSS to move that confirmation text over 200px to the right using this CSS adjustment margin-left:200px; or padding-left:200px? I cannot seem to figure out what that tag should be or where a list of those tags could be found.

  Thanks in advance for the help!

  The blog I need help with is: (visible only to logged in users)

• 

  jeremeylduvall · Member · Apr 7, 2014 at 5:36 pm

  • Copy link

  Hi there,

  I just want to make sure I understand correctly. Here’s a current snapshot of the confirmation text:

  

  In that example, you’re looking for “Message Sent” to get moved over to the right? If so, you should be able to use the following div tag:

  div#contact-form-17

  Is that what you’re looking for? Please let me know if I’ve misunderstood!

• 

  jrafinancial · Member · Apr 7, 2014 at 6:49 pm

  • Copy link

  Oops, no. Sorry – my link must have contained some cookie information which did not transfer. Under the “message sent” the input text is returned, along with the field names.

  Depending on what’s entered into the form, it returns something similar to this:
  Advisor Name: jrafinancial
  Special Requests:
  Advisor Phone/Email: 123
  Client(s) Name: 456
  Client(s) State of Residence:
  Account Type: Please Select
  Account Value: 789
  Model: 123
  Distribution Details (amount, day, date, etc.):

  It is actually that block of text that I would like to move to the right. By chance can you give me the CSS tag I would need to set the margins for that?

• 

  jeremeylduvall · Member · Apr 7, 2014 at 9:52 pm

  • Copy link

  Hi!

  You should be able to use the following CSS:

  div#contact-form-17 {
  	padding-left: 200px;
  }

  Can you give that a try and let me know if it accomplishes what you’re looking for?

• 

  jrafinancial · Member · Apr 8, 2014 at 8:48 pm

  • Copy link

  Hmm… unfortunately, not quite. I don’t want the “Message Sent” header to move. Just the text underneath it, starting with “Advisor Name…”
  Thoughts?

• 

  jeremeylduvall · Member · Apr 8, 2014 at 10:15 pm

  • Copy link

  Can you give this a try?

  div#contact-form-17 blockquote {
  	padding-left: 200px;
  }

  That should move the text without moving the “Message Sent” header.

• 

  jrafinancial · Member · Apr 9, 2014 at 4:34 pm

  • Copy link

  That worked like a charm! Thank you so much for all your help.

• 

  jeremeylduvall · Member · Apr 9, 2014 at 6:00 pm

  • Copy link

  Not a problem! Let me know if you need anything else.