Return to previous page

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

This topic has 4 replies, 3 voices, and was last updated 1 years, 10 months ago ago by Awais Ahmed

Niddy

Participant

June 23, 2022 at 10:50

Hi

Do you have a guide anywhere to allow me to use a button on a product that when clicked will open a custom modal – specifically, I want to open a custom contact form but do not want to use the built in option as it is specific to 3 products and need a modal so I can capture the product name as it must load on the actual product page and I do not want it to be visible until clicked.

I can add the modal, but it’s not a button clickable one – it just appears on the page when I add the static block.

Second query – is it possible to add icons before the output of variable options; example on product when you click into additional information where it displays the variable options – we have one for wash care and created a custom product attribute and added code for icon to render before each option; but it doesn’t render – see image -> https://i.imgur.com/qBHskZb.png

It’s as if html is being stripped from the additional information variable table…

Any help please?

Thanks

#326741 Copied Theme version: 8.2.1 WooCommerce version: 6

3 Answers

Rose Tyler

Support staff

June 23, 2022 at 12:12

Hello,

1/ Try to use our Fancy button element > On click action – Promo popup (Use static block instead of content ?)
2/ Provide URL of the product and temporary wp-admin access, so we can take a closer look.

Regards

#326745 Copied
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 Copied
Awais Ahmed

Participant

June 24, 2022 at 06:10

Hello, @Niddy,

Thanks for your contact.

1) Great, Thanks for your suggestion and we are really glad that you solve your issue by yourself, your solution might help some other people as well having the same sort of issue, It is highly appreciated.

2) Thanks to understand our limitations, I really appreciate that. Let us know if you have any issues related to the theme we would love to help our customers. Always Available.

Have a nice day 🙂

Regards 8Theme Team.

#326798 Copied
Tagged: create, custom contact form, massive panel, modal, open, woocommerce, wordpress
Viewing 4 results - 1 through 4 (of 4 total)