Ecommerce Shopify WordPress Discussion

How do I make a popup contact form button in WordPress with a specific text in the message field (I'm using Contact Form 7 and Popup Maker)?

How do I make a popup contact form button in WordPress with a specific text in the message field (I'm using Contact Form 7 and Popup Maker)? That text would different. Example: in post are 10 pictures, below each picture is button “more info”. When you press button popup contact form appears and in message I want to be written corresponding picture name or number. User only have write email address and question. Subject is already written. Popup works but I can't find how to make that corresponding text appear.
You need to prefill your message field. My susggestion would be to have a single instance of your form on your page, hidden in the footer for example. In addition each of your post has a hidden message container with the specific message to be displayed in the form. When your popup button is clicked, use a js script to move your hidden form to the popup modal, and display your custom message associated with the clicked button. The following is an example of how to go about achieving this, first the HTML markup with your posts and footer, <main> <article id="post1> <figure> <img/> <figcaption> <button class="popup">Contact</button> <span class="hidden"> Custom message text </span> </figcaption> </figure> </article> <article id="post2>...</article> <article id="post3>...</article> ... </main> <footer> <form class="hidden popup">...</form> </footer> and the js/jQuery script $('main').on('click', 'button.popup', (e)=>{ let $button = $(e.target), $text = $button.siblings('span.hidden'), $form = $('form.popup').clone(); $('#your-modal-popup').append($form); //now the form is in the DOM, fill the message field. $form.find('textarea[name="your-message"]').value($text.html()) });

December 30, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.