Email ACF Field not working in PG Theme Converter

General Bug Reports
1

Hi there,

I have another issue regarding the Theme Converter and ACF Fields. I basically already know why it’s not working but I have not found a solution to fix this using PG, only editing the PHP files directly.

When I want to link an email, I would create an Email ACF Field and then in PG select the link element from my website and use the ‘Display ACF’ action. In the respective field, I would type in the label of my email field and then choose ‘replace: Href Attribute (with esc_url)’.

Doing this is actually not working, because the code will change to:

<a href="<?php echo esc_url( get_field( 'email' ) ); ?>"

Problem 1: By adding the ‘Display ACF’ Action, PG actually is also overwriting/removing the html ‘mailto:’ and since I can’t edit html with the Theme Converter, I cannot add it back in without directly opening my index.php file (if I change it there, I cannot continue working with PG bc PG will ask me to overwrite any changes I made directly to the files)

Problem 2: is the ‘esc_url’, even when I add ‘mailto:’ directly to my php file, I would also have to remove ‘esc_url’, otherwise it will add ‘http:’ in front of the email.

Is there any workaround in PG that you can link email act fields? Usually I wouldn’t mind just editing my php files directly, but that also means that I can’t continue to work in PG bc it would keep asking me to overwrite my changes.

2

Has anyone an idea on how to fix the problem described above??

3

Hey @JanaL,
Sorry for not getting back to you sooner - ACF isn’t my strong suit!

Can I get a little info? Where are you getting the email address from?

Two potential workarounds.

  1. If you are adding the link in your post, input it as ‘mailto:...@gmail.com’ Within theme converter the ACF action will now work as you set it up.
  2. You can write a custom action in your inc/custom.php to return a proper link.
    Cheers,
    Bob
4

@RobM thank you for your answer! Your first option is not working anymore, bc ACF will not accept anything else in the field than an actual email address. So if I add mailto: to the field, I will get an error and won’t be able to update the page.

Can you explain the 2nd workaround a bit more? Is that something I can do in Pinegrow? As described in my original post, I wouldn’t mind adding custom code in the php file directly but then I can’t continue to work in PG Theme Converter bc once I save in PG it overwrites everything I added manually to the files

5

@JanaL
So, my first workaround was to enter the email as a link, rather than as an email. That is partially why I was asking how you were getting the address. If it was a trustworthy source that didn’t need firm error checking this would work.

So in the Pinegrow Pro Wordpress builder, you could edit the code of the button/link to add in the field.
With the Pinegrow Theme Converter we are more limited in our ability to alter the code, but there are three approaches. (I was messing around with easier alternatives and found one!)

Easiest approach _I THINK this should be fine in all browsers. It does introduce a space between the ‘mailto:’ and the address, which is fine for Chrome.
Select the mailing button/link. Add a ‘Display ACF Field’ action.
For field enter the ACF field name.
For ‘Replace’ select ‘Attribute’.
For ‘Attribute’ enter ‘href’.
Click the 'Append to attribute ’ option.

image
image1036×428 28 KB

Second approach:
Add a PHP Code action. for the Function with params add in something like:

'<a class="custom button" href="mailto:' . get_field('email') . '">E-Mail</a>';

Click on ‘Echo’ and replace the ‘Element’.
This will place a link with the ‘email’ ACF field following the ‘mailto:’. Change this to whatever your field name is. Obviously you can change the code to match your button.

Third approach
In either your ‘functions.php’ or ‘inc/custom.php’ file add the following function:

function shd_return_email() {
    $email = get_field('email');
    echo "<a class='buttons' href='mailto:{$email}'>E-Mail</a>";
}

Again, the ‘get_field()’ should use your field name. The echoed code can be altered to anything you would like - just keep the variable name ‘$email’ in curly braces within your href.

Back in Pinegrow THeme converter, select your link/button.
Add a ‘PHP Code’ action.
For ‘Function with params’ add the function call - in the above example ‘shd_return_email();’
For ‘Replace’ select ‘Element’

image
image1030×342 28.5 KB

This will generate the code:
image
image1144×336 28.7 KB

I hope one of these methods fits your needs. Reach out if you need more help.
Bob

6

@RobM thanks so much for trying all these different options! Really appreciated! I will probably go with the first approach, I still have to alter the index.html file a bit but that’s a Webflow thing. In Webflow I have to put in an actual email address to get the ‘mailto:’, so if I don’t add an email, it’s just ‘href:#’.

So I either have to manually add ‘mailto:’ to the index.html file or get rid of the email I initially inserted in Webflow. But at least I don’t need to touch the index.php file then. It’s just gonna be a pain when I make changes to the Webflow page in Webflow, then export it again, bc then I will have to replace the email stuff again and again haha but still better than altering the php file!

thanks again!