Embeddable signup forms

Using Ghost
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
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.

Screenshot 2024-06-12 at 16.11.17
Screenshot 2024-06-12 at 16.11.171918×639 31.9 KB

3

Thanks Ravn, Ok nice that you found a workaround for styling. Do you have an example how you did this?

4

How about the translation of this button and placeholder? Any help would be very appreciated :-)

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)
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>