Changing text on submission page of contact form

• 

  stephenjohnson2014 · Member · Jan 7, 2015 at 8:28 pm

  • Copy link
  • Add topic to favorites

  Hello. I would like to add some text to the submission page of my contact form and I am wondering if by using some CSS this would be possible. When someone submits the contact form, I’d like to also display a bit of text with a discount code. Thanks for your help!

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

• 

  staff-happychia · Staff · Jan 8, 2015 at 8:04 am

  • Copy link

  div#contact-form-33 blockquote:after {
      display:block;
      font-weight: bold;
      color:red;
      content: "Thank you for contacting us. This is your promo code XYZABC";
  }

  Please add this code to the CSS Editor.
  Submit a contact form and see the result.

  Please feel free to let me know if you need anything else :-)

• 

  stephenjohnson2014 · Member · Jan 8, 2015 at 9:13 am

  • Copy link

  Thanks chaitanyamsv! That’s really helpful.

  I haven’t used CSS before so perhaps I am doing something wrong? I go to Customise, select the page I want (Offers page), click CSS, add the text and save. When I submit the contact form however I only see the default message. Did I miss something? Many thanks.

• 

  stephenjohnson2014 · Member · Jan 8, 2015 at 9:18 am

  • Copy link

  I now see the change – but on the contact page. Can I change this to the contact form on my offers page (maybe change form-33 to a different number)?

  Also I missed the message as the visitor has to scroll down the page to see the voucher code so they might not see it. I’m using the Business Identity theme. Is there a way to move the message further up the page? Thanks again.

• 

  staff-happychia · Staff · Jan 8, 2015 at 5:44 pm

  • Copy link

  div#contact-form-33 blockquote:before {
      display:block;
      font-weight: bold;
      color:red;
      content: "Thank you for contacting us. This is your promo code XYZABC";
  }

  Try this to display message on the Offer form. This also moves the message to a bit top because we are using “before” pseudo element rather than “after”.

  I don’t think we can move it any further to the top.

• 

  staff-happychia · Staff · Jan 8, 2015 at 5:56 pm

  • Copy link

  We can move the message to the top. Try this:

  Contact form:

  div#contact-form-33 blockquote:before {
      display:block;
      font-weight: bold;
      color:red;
      content: "Thank you for contacting us. This is your promo code XYZABC";
      position:absolute;
      left:0px;
      top:15px;
  
  }
  
  .entry-content {
      padding-top: 20px;
  }

  Offer form:

  div#contact-form-39 blockquote:before {
      display:block;
      font-weight: bold;
      color:red;
      content: "Thank you for contacting us. This is your promo code XYZABC";
      position:absolute;
      left:90px;
      top:130px;
  }

• 

  stephenjohnson2014 · Member · Jan 9, 2015 at 8:51 pm

  • Copy link

  This works perfectly – thank you!!! The message can now be clearly seen at the topic of the section.