Link to home
Start Free TrialLog in
Avatar of Amanda Watson
Amanda WatsonFlag for Australia

asked on

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

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
Avatar of captain
captain
Flag of United Kingdom of Great Britain and Northern Ireland image

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.
Avatar of Amanda Watson

ASKER

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
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
Yeah I can't find it in the css as it just pops in, so i was hoping for help here with it?
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.
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
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........
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.
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
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?
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.
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.
I don't really want the green message to go away however?
ASKER CERTIFIED SOLUTION
Avatar of captain
captain
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for all who helped.
It was hard to get a solution as I couldn't show how it was supposed to show