ziggy
June 11, 2024, 8:32pm
1
Hi There, I was searching on how to translate the embeddable signup forms. The button and the placeholder are in english but I need dutch. Also how to theme the input and button? The input and the button are to big so how can I resize it?
Kind regards,
Ziggy
1 Like
Ravn
June 12, 2024, 2:12pm
2
I am just solving embeddable signup forms styling on client’s landing page.
It is rendering content of form in iframe so classic CSS can’t be used.
I was able to restyle it using Javascript. Very ugly solution but it works.
ziggy
June 13, 2024, 8:52am
3
Thanks Ravn, Ok nice that you found a workaround for styling. Do you have an example how you did this?
ziggy
June 13, 2024, 12:53pm
4
How about the translation of this button and placeholder? Any help would be very appreciated :-)
Raki
June 20, 2024, 8:25am
6
This is possible, two ways:
The Hard way: edit theme as shown in the official guide
Easy(dirty) way: change through code injection, but this requires inspecting your page code(I can’t tell which theme you are using)
Ravn
June 28, 2024, 11:35am
7
Hi Ziggy,
I am sorry for the very late reply. I had to accommodate the code a little bit for the Safari browser. I have to warn you, it is a really horrible solution, but I assume there is no other way around it. Basically, the HTML nodes in the iframe are not present at the time the iframe is injected into the page. So, when we traverse the iframe HTML nodes, we have to check the presence of each node several times.
Code:
<div id="iframe_wrapper" style="min-height: 58px; max-width: 440px;width: 100%;position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);">
<script src="https://cdn.jsdelivr.net/ghost/signup-form@~0.1/umd/signup-form.min.js" data-label-1="workspace-made-easy" data-button-color="#E6007C" data-button-text-color="#FFFFFF" data-site="https://your-ghost-website.com/" defer></script>
</div>
<script>
const style_signup_form = async(iframe) => {
let children_check = 0;
let content_document = null;
let counter = 0;
do{
content_document = iframe.contentDocument;
children_check = content_document.all.length;
await new Promise(resolve => setTimeout(resolve, 50));
counter++;
}while(children_check < 5 || counter > 10000)
for(let item of content_document.all){
if(item.tagName == 'BODY'){
let form_ = undefined;
let count = 0;
do {
console.log(item.chidren)
count++;
if(item.children[0]){
form_ = item.children[0].lastChild ?? undefined;
}
await new Promise(resolve => setTimeout(resolve, 50));
}
while (form_ == undefined || count > 10000);
//console.log('[ form ] -> ', form_);
form_.style.borderRadius = '2px';
form_.style.boxShadow = '0px 4px 18px 0px rgba(0,0,0,0.12)';
form_.style.fontWeight = '300';
form_.style.padding = '0px';
let form_button = form_.querySelector('button');
form_button.style.borderRadius = '2px';
form_button.style.height = '3.9375rem';
form_button.style.paddingLeft = '2.375rem';
form_button.style.paddingRight = '2.375rem';
}
}
}
const catch_iframe = (node) => {
const iframe = node.querySelector('iframe');
const observer_2 = new MutationObserver((mutationsList, observer) => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(node => {
if(node.tagName == 'IFRAME'){
console.log('Iframe added:', node);
style_signup_form(node);
}
});
}
}
});
observer_2.observe(node, {childList: true, subtree:false});
}
const iframe_wrapper = document.getElementById('iframe_wrapper');
const observer = new MutationObserver((mutationsList, observer) => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(node => {
console.log('Added div node:', node);
catch_iframe(node);
});
}
}
});
observer.observe(iframe_wrapper, {childList: true, subtree:false});
</script>