Description
* Gallery Section with caption, Inquiry button
* Click on Inquiry button > Open Popup Form
#1. First, you can add a Gallery Section and enable Gallery Caption
#2. Next, create a Page in Not Linked with name: Contact Form – URL: /contact-form
#3. Add some Form Blocks, like this
with Caption text, you can use Text Field
enter your caption text in Placeholder
#4. Find ID of these Form Blocks
#5. Edit Gallery Images > Enter this syntax into Caption
Product One Hundred <br/><a href="#wm-popup=/contact-form#block-yui_3_17_2_1_1750908673306_2403">Enquiry</a>
Note: replace #block…with corresponding form block ID in step #4
Product Ninety-Nine <br/><a href="#wm-popup=/contact-form#block-9c48b2c0b0ef53de8890">Enquiry</a>
Note: replace #block…with corresponding form block ID in step #4
#6. Add this code to Page Header Injection (Page where you use Gallery Section). Code will change style of Caption Text Field in Form Popup + Turn Enquiry text to button
<style>
.field.text label {
display: none !important;
}
.field.text input {
background-color: #fff !important;
border: none !important;
pointer-events: none !important;
padding-left: 0px !important;
}
.field.text input::placeholder {
color: red !important;
font-size: 30px !important;
}
p.gallery-caption-content a {
background-color: #000;
color: #fff;
padding: 5px 20px;
display: inline-block;
margin-top: 10px;
border-radius: 50px;
}
</style>
#7. Install WM Popup Plugin.
#8. Done
If you have any problems, you can comment below/send me a message/send me an email