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
LVL 11
Amanda WatsonWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

captainCommented:
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 DeveloperAuthor 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
captainCommented:
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
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Amanda WatsonWeb DeveloperAuthor Commented:
Yeah I can't find it in the css as it just pops in, so i was hoping for help here with it?
captainCommented:
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 DeveloperAuthor 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 DeveloperAuthor 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........
captainCommented:
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 DeveloperAuthor 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 DeveloperAuthor 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?
captainCommented:
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.
captainCommented:
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 DeveloperAuthor Commented:
I don't really want the green message to go away however?
captainCommented:
Ok

not sure how you want it to appear. Beforehand when I first tested it it would flash up right across two fields. Now it first does the same, then expands around the whole form.

How and where would you want to display this?

I am also a bit at a loss what you may have changed as initially all that should have changed is the border attribute but now it appears there is additional margin and padding, although I am not 100% whether that has been added to or not:
div.wpcf7-mail-sent-ok {
	border: 2px solid #398f14;
	margin-left: -20px;
    margin-right: -20px;
    padding-bottom: 40px;
}

Open in new window


capt.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Amanda WatsonWeb DeveloperAuthor Commented:
Thanks for all who helped.
It was hard to get a solution as I couldn't show how it was supposed to show
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft Word

From novice to tech pro — start learning today.