Streaming live at 10am (PST)

Webflow changes my custom code (php)


#1

Published site: https://www.puzzlefactory.uk/2019

Read-only site: https://preview.webflow.com/preview/pfss-2019-1?utm_source=pfss-2019-1&preview=bb56343e124e2aec369d8bf770388f1c

To cut a very long story short, I’ve embedded a music player into my site.

  1. The music player was breaking because I had it loading it’s own jquery in the head, then the Webflow jquery (3.3.1) was loading at the end of the page. I have fixed it all by removing the old AAP jquery line and moving Webflow’s jquery line to it’s place in the head.
    However, it seems every time I export the site, I need to manually comment-out the jquery 3.3.1 line at the bottom, despite it being added to the HTML head.
    How do I tell Webflow not to add the line twice or tell Webflow to put it in the head rather than the footer?

  2. I need to set the value of the “Listen now” button to <a href=“javascript:amazingAudioPlayerObjects.objects[0].playAudio(); […]”> but when I put javascript:amazingAudioPlayerObjects.objects[0].playAudio(); as the URL, Webflow adds http:// every time.
    I tried to use the Custom attributes section, but when you set href as the Name, it says This is a reserved name.

  3. I have found that, once exported, certain links don’t point where they are supposed to point.
    For the affected links this is 100% reproducable. On my site, they are:

  • mixing-choose.html has two broken links that both render to href="#" instead of mixing-pfss.html and mixing-external.html respectively as shown in the editor.
  • mixing-external.html 's Next button also points to href="#" instead of mixing-pfss.html as shown in the editor.

(Note: I have manually fixed all of these problems in the published site, though as I still have much work to do (responsive, form, etc), I don’t want to have to remember to make a bunch of changes to files each time I export. Ain’t nobody got time fo dat.)

  1. Webflow insists on changing my custom code, adding what it thinks are missing </div></div> (lines 138, 142, 146…).
    There is a warning that says custom code won’t be validated, but it seems like it actually is anyway - even when it shouldn’t be.
    How do I disable this, please? (Thankfully this is not causing me problems, but still shouldn’t be changing things.)

Other than these issues, I have to say, Webflow still blows my mind for how much you can do with it and the relative ease with which you can do it.

Thanks to everyone who reads this far. Happy new year!

-Dax.


#2

Aha, I just discovered another issue related to point 2. Because of my email form, I need to use PHP, which means all pages* need to have .PHP extension. Obviously this is not something I can enable from Webflow (name output files as .PHP instead of .HTML), but where it really screws me over is that, if I were to manually change all links to point to foo.php instead of the Webflow page Foo, Webflow’s code generator will then go ahead and change it to http://foo.php which will obviously not work. I would need to define full paths everywhere, but as we know, that’s not good practice.

Regarding point 3 - this has mysteriously solved itself, with no intervention from me… ???:hushed:???

*All pages have contact form in the footer


#3

I’m spending the time to write this post not to b**** and moan, but in the sincere hope that it’s fixed so others don’t have to deal with the problems I’ve had.

ARRRGGHHHH. I’ve just wasted hours and hours to discover that, once again, Webflow has changed my embedded code to what it think it should be.

Can we please have an option to leave it the f*** alone? I know Webflow thinks it’s being helpful by ‘correcting’ ‘mistakes’, but it’s assuming all code is html. I added php code and it was totally munted by the changes.

For reference, this is what I entered:

               **<?php**
**					if($_SESSION['error'] == "sent"){**
**						echo ("<b><font color=#FFFFFF>");**
**						echo ("Email sent. Someone will be in touch with you soon. Thanks for your enquiry.");**
**						echo ("</b></font><br>");**
**						$_SESSION['error'] = "";**
**					} elseif($_SESSION['error'] != "") {**
**						echo ("<b><font color=#F00>");**
**						echo ("Uhoh, looks like something went wrong.<br>Perhaps you didn't solve the reCAPTCHA correctly?");**
**						echo ("</b></font><br>");**
**						$_SESSION['error'] = "";**
**					}**
**				?>**

And this is what Webflow produced:
I note that even your forum knows this is wrong :frowning:

          **<?php**
**					if($_SESSION['error'] == "sent"){**
**						echo ("<b><font color="#FFFFFF">");**
**						echo ("Email sent. Someone will be in touch with you soon. Thanks for your enquiry.");**
**						echo ("</font><br>");**
**						$_SESSION['error'] = "";**
**					} elseif($_SESSION['error'] != "") {**
**						echo ("<b><font color="#F00">");**
**						echo ("Uhoh, looks like something went wrong.<br>Perhaps you didn't solve the reCAPTCHA correctly?");**
**						echo ("</font></b><br>");**
**						$_SESSION['error'] = "";**
**					}**
**					?>**

"Custom code is not validated" but WF will change it anyway
#4

We only support html (including css in <style> tags, and js in <script> tags) in the custom code blocks. This is so that we can render that custom code in the designer, when appropriate.

You might want to enclose your code in html comments (<!-- -->), like this:


<!--

<?php
  if($_SESSION['error'] == "sent"){
    echo ("<b><font color=#FFFFFF>");
    echo ("Email sent. Someone will be in touch with you soon. Thanks for your enquiry.");
    echo ("</b></font><br>");
    $_SESSION['error'] = "";
  } elseif($_SESSION['error'] != "") {
    echo ("<b><font color=#F00>");
    echo ("Uhoh, looks like something went wrong.<br>Perhaps you didn't solve the reCAPTCHA correctly?");**
    echo ("</b></font><br>");
    $_SESSION['error'] = "";
  }
?>

-->

Then, you’ll have to remove the (<!-- and -->) after exporting.


#5

Hi Forrest,
Thanks for your reply. Whether WF supports it or not is actually irrelevant in this case. If Webflow detects what it thinks is a code error, the user should be presented with a dialog box with the options [Accept changes and close], [Reject changes and close], [cancel]

Also, can we be sure that code inside comment tags will be left untouched by WF?

Just to be clear, I don’t expect WF to execute PHP code, I just don’t want WF to change it when I use it.

All the best,
Dax.


#6

@daxliniere Webflow doesn’t detect errors or validate HTML code in embeds; that is to say, we assume the code you’re entering is valid HTML, and sometimes things break down in subtle ways if that assumption is incorrect.

Non-HTML code may cause the code generator to fail in surprising or subtle ways, which I’m guessing is what is happening to you in the examples you gave.

Your use case is interesting and something that we do try to support (if indirectly), so thank you for bringing this to our attention.

As you correctly pointed out, this is ultimately a design failure: There were problems with the “HTML” in your embed, and we let them lead to confusing mistakes down the road. We should probably make it clear that only valid HTML is safe to enter into embeds, that anything else may lead to strange publishing/export issues, and we could even link to a tutorial for injecting custom code in other languages like PHP.

For now I would echo @forresto’s suggestion: A simple <!-- COMMENT BLOCK --> is the most elegant workaround for what you need; it should be possible to automatically strip these types of comments if you use a special format like so:

<!--BEGIN_PHP

<?php
  if($_SESSION['error'] == "sent"){
    echo ("<b><font color=#FFFFFF>");
    echo ("Email sent. Someone will be in touch with you soon. Thanks for your enquiry.");
    echo ("</b></font><br>");
    $_SESSION['error'] = "";
  } elseif($_SESSION['error'] != "") {
    echo ("<b><font color=#F00>");
    echo ("Uhoh, looks like something went wrong.<br>Perhaps you didn't solve the reCAPTCHA correctly?");**
    echo ("</b></font><br>");
    $_SESSION['error'] = "";
  }
?>

END_PHP-->

From there, you can run the exported site HTML through a simple search-and-replace regular expression that strips these comments.

Here’s a simple online version of such a tool, pre-populated with the necessary regular expression code to solve your specific problem if you use this format: https://regexr.com/469v9

(Note: with a little programming you could automate this process with a script that operates on all your exported HTML)

I recognize this isn’t the ideal “just works” solution, but I hope this helps - Cheers!


#7

Hey Lou,
Thanks for your reply and setting up the regexr.com profile, that was really cool of you.

Did you know that the comment code for PHP is different to HTML? I thought that would solve the problem (without having to do any code replacement) but it turns out that it messes up other things when you have .PHP pages. In the end, I just stripped out the PHP code and found another way, but you can see it was very confusing and disconcerting to find Webflow has been changing my custom code. It cost me a lot of hours.
Hopefully encountering these issues can help you build a more resilient code export engine.

The biggest concern at this time, is that all links are assumed to be http:// links and this will be added if the user didn’t add it. (I detailed this in my second dot-point in the first post of this thread.) I think this needs to be addressed with the most urgency as there are countless times where this is a problem.

All-in-all, I’m very proud of what I have created with Webflow and I know there wouldn’t have been any other (practical) way to create it.

All the best, team!
Dax.