I see the document on the url: PopupOptions | Feathery Docs of the popup usage but where does this code go. How do you install it? Thanks
Hi @Heritage , If you are building your app in React, then installing the feathery react package should help you get started.
You can use : npm install @feathery/react to install the package.
For more details about the installation and setup, you can refer to: React SDK | Feathery Docs
If your project is not react based, please let us know more about the framework / library you are using. We also have a JavaScript SDK available.
That doesn’t tell me anything more than that SDK document page. I jave no idea what npm install @ feathery/react means. I don’t know what installing the feathery react package means as well. Your documents do not do a good job of explaining. You are assuming I should know. I have no idea how to install popup usage and when I click on the Javasc ript usage and put it in a popup plugin for wordpress, the form does not show. I have tried it with every popup plugin I can find. I have even hard coded a modal on my wordpress page but still the form does not show.
Hello @Heritage . I sincerely apologise for not being helpful with my earlier response. Here is a more detailed response with relevant code snippets that you can use to test the form.
In your WordPress website, please add this code into the header:
<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
- You can use the following code and place it anywhere in the website’s
<body>:
<div id='popup' style='display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);' onclick="document.getElementById('popup').style.display='none'">
<div id='container' style='position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);'>
<!-- Feathery form will be rendered here -->
</div>
</div>
NOTE: I have assumed there is no other id='popup' on the website. If you are unsure, you can try adding a random string to ensure this element has a unique ID.
- Add this button in your website where you want the user to click and open the pop-up:
<button onclick="document.getElementById('popup').style.display='block'">Open Form</button>
NOTE: You will need to update the id='popup' if you use a different value in step #2.`
- Now, in the website footer, you can add the following code:
<script>
(() => {
Feathery.init('SDK_KEY');
Feathery.renderAt('container', { formName: "FORM_NAME" });
})();
</script>
By following these steps, your feathery form should be loaded in a pop-up modal. The modal supports closing when the user clicks on the gray background region.
I installed exactly but now the form closes no matter where you click on it. It looks like the form is on a layer that is underneath the content. And it won’t accept any input
Can you share the webpage where you have hosted the form? I can check why this is happening and be able to share a fix!
Sure. https://multiunitpropertyloans.com/ . Its the red, “Get Started” button. I have styled the button and then applied a z-index to the container to move it above the content.
On this site: https://multiunitprdev.wpengine.com/ I have just installed your code without any styling. If you open the blue “Open Form” button, you’ll see how it falls underneath the content when you scroll down the page. And it still closes when you click anywhere in the form
Hi @Heritage , thanks for sharing the webpages. I have tested the pages and was able to figure out a fix. In the code that was shared above, we need to make a change.
Here is the updated code:
<div id='popup' style='display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);' onclick="document.getElementById('popup').style.display='none'">
<div id='container' style='position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);' onclick="event.stopPropagation()">
<!-- Feathery form will be rendered here -->
</div>
</div>
<button onclick="document.getElementById('popup').style.display='block'">Open Form</button>
We have added a new onclick attribute to the container div (the child div). This will help us prevent the popup div (the top-level div) from responding to any click event on the container.
Please add this change and let me know if it is working as expected.
Everything works fine now. I did have to keep the z-index on the container to keep it above the other content. Thanks for your help
Hi. I have another issue with this. I am creating a dropdown with a few options the user can choose from to open different forms. Each option will open a popup of a different form. Using your code below, I am changing the popup id for each form in the drop down. The only way this works is if I change the container id as well. But when I do that, the popup renders where the container id is and then if you select another option in the dropdown when the dropdown is still open, I get another form that renders on top of the first one. Then when you click off the form popup, the other form popup is still there. I want to be able to click on an option and only have one form open no matter what option you click on.
Thanks
I am adding the header code and then the footer code and then here’s my code for the buttons that open the different forms:
<div id='purchasepopup' style='display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);' onclick="document.getElementById('purchasepopup').style.display='none'">
<div id='purchasecontainer' style='position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);'>
<!-- Feathery form will be rendered here -->
</div>
</div>
<div id='refinancepopup' style='display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);' onclick="document.getElementById('refinancepopup').style.display='none'">
<div id='refinancecontainer' style='position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);'>
<!-- Feathery form will be rendered here -->
</div>
</div>
<button class="featherybuttons" onclick="document.getElementById('purchasepopup').style.display='block'">PURCHASE A HOME</button>
<button class="featherybuttons" onclick="document.getElementById('refinancepopup').style.display='block'">REFINANCE MY HOME</button>
Hi @Heritage , I have tried to recreate the setup that you have shared in your message. A dropdown with multiple forms in the page. I have created a toy example of the code. Sharing it below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<main>
<section>
<h1>Dropdown Demo</h1>
</section>
<!-- Single Popup for all forms -->
<div id='popup'
style='display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);'
onclick="closePopup()">
<div id='container' style='position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);background-color: white;'>
<!-- Dynamic form will be rendered here -->
</div>
</div>
<!-- Dropdown for selecting form type -->
<select id="formSelector" onchange="handleSelectChange()">
<option value="">Select Form Type</option>
<option value="form1">Purchase a Home</option>
<option value="form2">Refinance My Home</option>
<!-- Additional options can be added here -->
</select>
</main>
<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
<script>
(() => {
Feathery.init('SDK_KEY'); // Replace 'KEY' with your actual Feathery SDK key
const formMap = {
'form1': 'Form 1 Name', // Replace 'Form 1 Name' with the actual name of the form
'form2': 'Form 2 Name' // Replace 'Form 2 Name' with the actual name of the form
// Additional form names can be mapped here
};
function handleSelectChange() {
const formType = document.getElementById('formSelector').value;
if (formType) {
openPopup(formType);
}
}
function openPopup(formType) {
const popup = document.getElementById('popup');
const existingContainer = document.getElementById('container');
// Remove the existing container if it exists
if (existingContainer) {
existingContainer.parentNode.removeChild(existingContainer);
}
// Create a new container and append it to the popup
const newContainer = document.createElement('div');
newContainer.id = 'container';
newContainer.style.position = 'absolute';
newContainer.style.top = '50%';
newContainer.style.left = '50%';
newContainer.style.transform = 'translate(-50%, -50%)';
popup.appendChild(newContainer);
// Render the form in the new container
Feathery.renderAt('container', { formName: formMap[formType] });
popup.style.display = 'block';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
window.handleSelectChange = handleSelectChange;
window.closePopup = closePopup;
})();
</script>
</html>
The <scrip> section at the end of the document does the heavy lifting. It takes care of loading and unloading the forms correctly. Feel free to use this script and let us know if you have any other issues happening!
Looks good and works. The only confusion I had is when you said "Replace ‘KEY’. I think you meant "Replace ‘SDK_KEY’. Thanks much.
After working with your code I realize that you created a selection with options and there is no good way to style the options because select and options are system generated, Is there a way to use <ul> and <li> for the options rather than select?
I also noticed that the first form works just fine but when you open the second and third form and click on it, the form closes. I didn’t see any onclick="event.stopPropagation()" in this last code you sent like you added before.
Sorry another issue. When I click on an option, the form opens up, then I click off the form, it closes as it should but then when I click on the same option to open the same form, the form does not open.
sorry, we won’t be able to help further with custom code. I’d recommend getting a contract developer or someone to help with fine-tuning your website code since this isn’t related to the feathery system
Yes but it was your code that you gave me to use so please correct it. I can live with the select and options but the code for that still is not working correctly. Please see my note above. Thank you