Streaming live at 10am (PST)

Webflow export - how to connect your forms, remove and hide Webflow code references & add GTM!


#1

Hey everyone! We’ve been working hard the past few months (and last few days) on building a solution that would solve some of our main pain points when exporting Webflow websites.

It’s finally here today just in time for the discontinuation of forms on exported sites :sweat_smile:.

You can access it here: https://jinglebell.io/

Here’s what you can do with it:

1. Connect your forms with a backend system that was made specifically for Webflow websites.

2. Automatically change or delete the parts of your site’s code that traces back to Webflow for true anonymization

3. Add your Google Tag Manager code and minify the code

You can go ahead and try it for free!

Please don’t hesitate to provide feedback and ask any questions you might have about using the platform right here in this thread!

Btw, just to be extremely clear, we are not part of the Webflow team, nor associated in any way. We do love Webflow though and have been using it since 2013 :balloon:

Also, feel free to reach out to me if you have any other questions at micheal (at) jinglebell.io or PM me.

Micheal Reno


#2

Why only for Pro-Plan?

This would mean I’ve to pay for Pro instead of Lite and would loose CMS because of the export. Not that good deal for $19/month/extra.

I think you should offer a small plan for $5/month without forms, just the anonymization and GTM, because the most people who uses exported code uses their own form-script. But I think an automated anonymization would be a nice feature, which I would pay around $5/month instead of doing it manually with some offline-tools.


#3

Thanks for the feedback!

We’re working to eventually have anonymization for Lite Plans too, it’s coming up! Obviously if your website needs Webflow’s CMS then there’s no point in exporting it.

And I hear you for the small plan. Based on your feedback and others, we will review our plans.


#4

That sounds great :slight_smile:

And for people who want’s to use your form service: Please make the mails editable, so the user can customize the mails with own colors/brands for the own customers. Make it white-labled.

I think this would be a big plus in comparison to other form-services.

And does your form-service sends a success-message?

If no: Add it!
If yes: Show your users how to use it to show Webflows build in success/fail-message.

<script type="text/javascript">
     
$('form[action^="https://mydomain.com"]').each(function(i,el){
  form = $(el);
  form.submit(function(e){

    //stop the form from submitting
    e.preventDefault();
    form = $(e.target);
    
    //submit the form via ajax
   $.ajax({
     method: "POST",
     url: form.attr('action'),
     data: form.serialize(),
      
      success: function(data){
        if(data.success){
          //successful submission - hide the form and show the success message
          parent = $(form.parent());
          parent.children('form').css('display','none');
          parent.children('.w-form-done').css('display','block');
        } else {
          //failed submission - log the output to the console and show the failure message
          parent.find('.w-form-fail').css('display','block');
          }
      },
      error: function(){
        //failed submission - show the failure message
        parent.find('.w-form-fail').css('display','block');
      	}
    });
  });
});
</script>

#5

Yes the notification email template is completely editable in HTML as you can see here:

The way we’ve built the confirmation message right now is that you specify a URL to redirect your site’s visitor after the completion of the form. This is especially useful if you want to track conversions on a form’s landing page.

We’ll look into also offering to use Webflow’s built-in success/fail message, that’s a good idea!

Thank you @DeepShader!


#6

Hi again,
customizable mail for the forms is a big plus for your service, I think. Is it fully white-labeled?

I’ve to ask this again: Why is the Pro plan needed? After you export the code (even on the Lite plan) it is your code and you can do whatever you want. If you want to make it white-labeled, you can do this manually. With or without the Pro plan.

So why do your service only works with the Pro plan!?

For offering to use Webflow’s built-in success/fail message you’ve just to return “success” after sending the form:

if($mailSent == TRUE) {
   header("Location: " . $returnPage);
   echo 'success';
} 

In this case the form will turn to a given page (success-page) and sends parallel “success” if a user uses the JS above to use the build in success/failed-message. Ultra easy for you to implement. Just one line of code “echo ‘success’” in your PHP.


#7

Hi @DeepShader yes it is fully white-labeled. The domain name where the notification is coming from is a standalone web app that we built specifically for this need. It doesn’t come from jinglebell.io. This web app has it’s own website, branding, etc.

The reason right now it only works with Pro plan is because those users have the ability to turn off Webflow branding. We initially thought only users who already use this option would want further anonymization in their code.

If you try importing a Webflow zip file that has the branding option, our system will tell you to turn it off.

But since you’re free to do whatever you want with your exported code, it would also make sense that Lite plan users can anonymize their site, that’s why we’ll add this option.

And yes, we’re looking at how we can implement Webflow’s built-in success/fail message. We’re built on Java though :wink:


#8

That are the best news since weeks working with Webflow :smiley:

I think a lot of people will use your service after it works with the Lite plan and the build in success/fail messages (which should be the easiest thing to change, because you just need to add one line of code ^^)

Any ETA for the success/fail-stuff?


#9

No ETA yet, but if you’d like I can send you a PM once ready!


#10

Definitely!! :smiley:

Do you think this will released in the next few weeks (2-3)?


#11

Yes, around 3 weeks!


#12

@DeepShader just to let you know, you can now use Code Anonymization module even on a Lite plan! We’ve the necessary changes and it’s live.

Also, based on your feedback on others who reached out, the pricing plans have been updated to the following:

  • $6/month for the hidden code module

  • $6/month for the form module

  • $10/month for both module, a 17% saving!

Hoora!

jinglebell


#13

That’s perfect!!! Thank you so much! Love it :smiley: