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, 9 months ago ago by Awais Ahmed

  • Avatar: Niddy
    June 23, 2022 at 10:50


    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 ->

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

    Any help please?


    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 23, 2022 at 12:12


    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.


    Avatar: Niddy
    June 23, 2022 at 15:47


    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.

    	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%;

    Here is form with above edits added ->

    And here is the new success – hiding the form to show success ->

    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.

    Avatar: Awais Ahmed
    Awais Ahmed
    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.

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

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