One-click inquiry button
Hello, can my website(https://www.betacnc.com/) have buttons of this kind of website-https://forsuncnc.com/atc-wood-cnc-router-machine-with-siemens-controller/ (after clicking the button, a message form can appear on the current page), this is the code called by this website:
<p style="text-align: center;"><span style="color: #ffffff; font-size: 150%;"><a class="button" style="color: #ffffff;" data-fancybox="" data-src="#hidden-CF7">What is The Best CNC Router for My Business?</a></span></p>
But I use this code on my website, It doesn’t work. The inquiry forms used by these two websites are all contact form 7 plug-ins. How can I have such a button? Do I need to add another code?
There are many types of buttons on this website, can I add them too?
If possible, please tell me how to modify it. if I need to write code to modify, please send me the modification location and code notification, thank you.
Another type button
Comments
Hello,
To achieve that, you can use the Popup shortcode placed in the column item.
You can find it under the following link:
https://themes.muffingroup.com/be/theme/shortcodes/typography/#popup
Instead of content text, please, put there the contact form shortcode.
Thanks
Thank you for your answers, now I can make the type of button I want, but can I change the color of the button? What code do I need to add to achieve it?
This is the color before and after the button is clicked now.
Can I get the following button form?
1.
2.
3.
Can I replace the button & text with a picture, and click on the picture to pop up the inquiry form on the current page?
1,2) You can style the button in Betheme -> Theme options -> Global -> Buttons.
3) If you want to use the image instead of the button for the popup, please, use the following code:
Thanks
“If you want to use the image instead of the button for the popup, please, use the following code:
<a href="#popup" rel="lightbox">
<img class="scale-with-grid" src="https://themes.muffingroup.com/be/theme/wp-content/uploads/2018/01/betheme-new-retina.png" />
</a>
<div id="popup" style="display:none;">content</div>”
Sorry, I don’t know much about the code. I want to know, for the third method (picture pop-up window), where do I need to put the code of the form, I only know the shortcode is:[contact-form-7 id="6" title="Contact form"], but I don’t Learn how to place.
Looking forward to your reply, thank you.
There is no other way to have an image popup, but check the following screenshot for clarification.
Thanks
Hello, I tried to use your code and replaced the picture address you marked and the shortcode of the “contact form 7” plug-in, but the contact form does not pop up. may I know what is the reason?
This is the code I used:
<a href="#popup" rel="lightbox">
<img class="scale-with-grid" src="https://www.betacnc.com/wp-content/uploads/2021/04/tuandui1.png" />
</a>
<div id="popup" style="display:none;">[contact-form-7 id="6" title="Contact form"]</div>
Hello, I have another question, can I add a button pop-up form to the introduction of the product details page, this is a product details page of the website:https://www.betacnc.com/index.php/product/multi-tool-cnc-router/
This is where I want to place:
Do I need code to achieve it? How should I do it? Please tell me the detailed steps, thank you!
Can you send me a link to the page that contains this image with a popup, please?
I want to take a look at the source of this page.
Thanks
Hello, you can take a look at this page: https://www.betacnc.com/index.php/product/linear-atc-cnc-router-1/
I have modified it according to the code you provided, but the window cannot pop up, please check what caused it, thank you. This is the code I used:
<a href="#popup" rel="lightbox">
<img class="scale-with-grid" src="https://cn.betacnc.com/wp-content/uploads/2021/04/BETA-CNC-ROUTER-50.png" />
</a>
<div id="popup" style="display:none;">[contact-form-7 id="6" title="Contact form"]</div>
Note: 1 is a picture-style pop-up window, 2 is a button-style, and 3 is a text-style
3 in the screenshot, how can I make the example in the following figure, what kind of code do I need to add, thank you.
In addition, I hope you can help answer this question:
I have noticed that you are using an Elementor for your products, and unfortunately, this code will not work in that builder because it considers href="popup" as a link.
If you want to make it work you will have to switch to WP editor.
Please, put the popup shortcode in the short description, and check if it is what you wanted to achieve.
Thanks
Thanks.