Return to previous page

Reply 326769 to: How to create a modal using massive panel to open custom contact form

Avatar: Niddy
Niddy
Participant
June 23, 2022 at 15:47

Hiya,

Thanks for replying – have sorted point 1 – basically I set a contact form inside a custom block and then used the fancy button. However, due to the positioning of the popup it was super-slim on mobile devices (only 50% width) and the success message gets hidden behind the form upon submission.

For the benefit of others, just add the following css under the contact form within Contact -> Contact Forms -> Your Pop-Up Form

What this css will do is position it better on mobile devices and also hide the form upon submission, replacing it with a white background that will echo the success message. Its much nicer.

<style>
	form.wpcf7-form {
      position: relative;
    }
    .wpcf7-response-output {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: white;
      font-size: 20px;
      text-align: center;
      vertical-align: middle;
      padding-top: 25%!important;
   }
	.mfp-close-btn-in .mfp-close {
	  color: #c62828 !important;
	}
	@media screen and (max-width: 991px) {
	  #etheme-popup-holder {
		width: 100%;
	  }
	}
</style>

Here is form with above edits added -> https://i.ibb.co/hBcjzQ9/mess-before.png

And here is the new success – hiding the form to show success -> https://i.ibb.co/TRQR42p/mess-success.png

Point 2 – will come back to you. It’s basically adding an icon to the individual variables as added in product -> variations -> custom variation. This wash labels next to Cool Wash / Do not Iron etc.

I’ll come back to this as I don’t think it’s possible – will need to add functions most likely which isn’t part of the theme so I’ll sort it I guess.

#326769
Go To The Whole Conversation In Topic

Useful links WooCommerce & WordPress

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.