We help IT Professionals succeed at work.

help with a green "thank you for your submission" line that covers my entire

Amanda Watson
on
171 Views
Last Modified: 2018-03-10
Hi,
On this site here
http://superequity.com.au/win-red-balloon-1000-voucher/
if you fill in the form,
you get a green line surrounding the form (its the usual green line that goes around the saying"your submission was successful")
However, because it was doing this I redirected the form to a thank you page instead, HOWEVER for a brief moment you see a big green line around the whole form.

Does anyone know to get rid of that message?
A
Comment
Watch Question

captainTechnical Director

Commented:
Hi

I just tried this but the display changeover to the new page is too quick.

I suggest the following:
  1. Disable the custom page momentarily in your form flow
  2. Go to your site in your default browser
  3. Complete the form so that the unwanted message is displayed
  4. Right-click the message and go into 'Inspector' mode
  5. Identify the CSS class or ID that relates to the message DIV
  6. Make a custom CSS entry using the class/ID and put display:none as the only entry, with the !important attribute
  7. Save CSS and reinstate the custom page in your form flow

so for example, a class "form-thankyou-message" would be:
.form-thankyou-message {display:none!important;}

Open in new window


If it is an ID:
#form-thankyou-message {display:none!important;}

Open in new window


hth
capt.
Amanda WatsonWeb Developer

Author

Commented:
Hi thanks,
I know how to use the developer tools, I was just hoping someone could figure it out without me having to go through all of that
captainTechnical Director

Commented:
Hi Amanda

Sorry I am traveling and am not on here as often as usual.

You will need to make the changes in CSS if there is no obvious way of blocking the display in your form plugin.
If there is a switch or a tickbbox somewhere that suppresses the confirmation, great but otherwise the simplest is to make a change in CSS

thanks
Tom
Amanda WatsonWeb Developer

Author

Commented:
Yeah I can't find it in the css as it just pops in, so i was hoping for help here with it?
captainTechnical Director

Commented:
Hi

I am back at my desk. Looking into your CSS, the file that is driving the contact form is the CF7 style sheet:
contact-form-7/includes/css/styles.css

this should be available to edit from the WP dashboard 'Plugins> Editor', then select contact form 7 from the drop-down top right and look for styles.css in the list.

In there locate the following:
div.wpcf7-mail-sent-ok {
	border: 2px solid #398f14;
}

Open in new window


Change to:
div.wpcf7-mail-sent-ok {display:none;
}

Open in new window


Save the changes.

I am not sure if this is correct, but it is the most logical. Let me know what happens

hth
capt.
Amanda WatsonWeb Developer

Author

Commented:
Yes, makes sense,but then all the other forms lose that green border too don't they which I am not sure is what they want.
However you answered the question so thank you
Amanda WatsonWeb Developer

Author

Commented:
Acutually display none didnt work....for some strange reason.
If you look at the contact form you get the same green border which I have now changed as much as I can to look decent. but it needs work, and of course the one that flashes up is not looking great........
captainTechnical Director

Commented:
Acutually display none didnt work....for some strange reason.

Can you confirm if the CSS edit is still active? I just retested the form and the styles.css still says
div.wpcf7-mail-sent-ok {
	border: 2px solid #398f14;
}

Open in new window


capt.
Amanda WatsonWeb Developer

Author

Commented:
Yes sorry I added it back it as I didn't want it to disappear completely.
I just need it do look decent now for the contact form.
If fills the whole form now instead of just a small message and I don't  understand why?
Do you know what I can add to make the green box land around the entire form?
Its just not behaving right....
maybe I should just delete it completely?
A
Amanda WatsonWeb Developer

Author

Commented:
On normal contact 7 forms, it just goes around a little successuful submission message, why is it going around the entire form....how do I fix this back to normal?
captainTechnical Director

Commented:
Hi

I have worked with CF7 in the past and only had small messages in green frames pop up so I am not sure why it would go around the whole form.

I will have another look.
capt.
captainTechnical Director

Commented:
I just found another way of getting the success message to 'disappear' using some simple code

Log in to WP and go to the CF7 settings. Select the Form you want to edit and look for the 'Additional Settings' in the form settings.

Enter this code:
on_sent_ok: "$('.wpcf7-mail-sent-ok').ajaxComplete(function(){$(this).delay(2000).fadeOut('slow');});"

Open in new window


I have no way of testing it, but it creates a function that creates a 2seconds delay and a slow fade effect, which causes the success message to not display in time using the same class.

can you try this?

capt.
Amanda WatsonWeb Developer

Author

Commented:
I don't really want the green message to go away however?
Technical Director
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Amanda WatsonWeb Developer

Author

Commented:
Thanks for all who helped.
It was hard to get a solution as I couldn't show how it was supposed to show
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.