So you're working on your beautiful landing page and wanting to include your lovely new Active Campaign form. Except their logo is there! This isn't because you have the free account, either. They force their logo upon the first several tiers of paid accounts too.
So how do we bypass this?
In sites you code entirely yourself, you can just grab the code and remove the attribution stuff. Easy. But what if you're on a WordPress system, and the plugin they recommend also adds the logo?
To get around this, you'll need to do a bit of coding, but don't freak out. Just follow the steps, and you'll be fine.
Step 1: Grab your code from the completed form page
Make sure NOT to use the embed code, but rather, grab the lengthy one. You can opt out of copying the CSS and styling it yourself in your stylesheet, but if you're OK leaving it, that's fine too.
Step 2. Open your theme's functions.php file
Here we work primarily with Genesis themes, so you'd find that in the child theme.
In any case, your functions file is usually in this directory:
/wp-content/themes/yourthemename/functions.php
Step 3. Create simple shortcode function
If you are unfamiliar with shortcode, it's something that looks like this:
[someshortcode] or [someshortcode x=”5″]
You've seen these right? Plugins will ask you to sometimes paste this type of thing into a text area in a widget to generate a rotating plugin or what not. These are common.
It's a great way to implement code in places like text areas where WordPress would otherwise disallow executing PHP, which is what we'll use to make this super simple thing work.
Here's what our code will look like (I have removed the CSS style tags and all the styling as well as the Javascript. Neither is necessary for this tutorial, but you MUST include those in your code.)
<?php
function AC_shortcode(){
$var='
//Stylesheet code goes here
<div style="text-align: center;">
<form method="POST" action="https://yourhosthere.activehosted.com/proc.php" id="_form_9_" class="_form _form_9 _inline-form _inline-style _dark" novalidate>
<input type="hidden" name="u" value="9" />
<input type="hidden" name="f" value="9" />
<input type="hidden" name="s" />
<input type="hidden" name="c" value="0" />
<input type="hidden" name="m" value="0" />
<input type="hidden" name="act" value="sub" />
<input type="hidden" name="v" value="2" />
<div class="_form-content">
<div class="_form_element _x17756950 _inline-style " >
<label class="_form-label">First Name</label>
<div class="_field-wrapper">
<input type="text" name="firstname" placeholder="Type your first name" />
</div>
</div>
<div class="_form_element _x55921169 _inline-style " >
<label class="_form-label">Last Name</label>
<div class="_field-wrapper">
<input type="text" name="lastname" placeholder="Type your last name" />
</div>
</div>
<div class="_form_element _x73666591 _inline-style " >
<label class="_form-label">Email*</label>
<div class="_field-wrapper"><input type="text" name="email" placeholder="Type your email" required/></div>
</div>
<div class="_button-wrapper _inline-style">
<button id="_form_9_submit" class="_submit" type="submit">
Submit
</button>
</div>
<div class="_clear-element"></div>
</div>
<div class="_form-thank-you" style="display:none;"></div>
<div class="_form-branding">
<div class="_marketing-by">
Marketing by
</div>
<a href="http://www.activecampaign.com" class="_logo"></a>
</div>
</form>
</div>';
//Javascript code goes here
return $var;
}
?>
Step 4. Delete the logo code
Do you see the code for the logo? It's between lines 54-59. Get rid of all that.
<div class="_form-branding"> <div class="_marketing-by"> Marketing by </div> <a href="http://www.activecampaign.com" class="_logo"></a> </div>
Step 5. Make the code your just pasted function in PHP
If you notice that when I declared $var, I assigned the whole code block to it with a single quote. This is fine, but we have javascript that uses single quotes below (I omitted the code here bc it was too long, but yours will have it.) So you'll have to create escape characters, either for the single quote or double quote. Read about escape characters and why they're needed when you're assigning a code block to a variable in PHP here.
I decided to display the below updated code with an escape character for the double quotes, to assign the whole variable with double quotes, that is. So the code will look a bit different now in that $var=” instead of $var='.
To create a double quote escape character, you replace every quote INSIDE the variable declaration with a \” and leave $var as is.
Replace: ”
With: \”
Understanding escape characters is not necessary to execute the code, either.
Now to manually do all the replacing would be nuts, so make sure that you can select the code you want to edit and have your replace function do the following “for the selected code only” aka make sure you don't replace every quote on the functions.php page.
Like so:
<?php
function AC_shortcode(){
$var="
//Stylesheet code goes here
<div style=\"text-align: center;\">
<form method=\"POST\" action=\"https://yourhosthere.activehosted.com/proc.php\" id=\"_form_9_\" class=\"_form _form_9 _inline-form _inline-style _dark\" novalidate>
<input type=\"hidden\" name=\"u\" value=\"9\" />
<input type=\"hidden\" name=\"f\" value=\"9\" />
<input type=\"hidden\" name=\"s\" />
<input type=\"hidden\" name=\"c\" value=\"0\" />
<input type=\"hidden\" name=\"m\" value=\"0\" />
<input type=\"hidden\" name=\"act\" value=\"sub\" />
<input type=\"hidden\" name=\"v\" value=\"2\" />
<div class=\"_form-content\">
<div class=\"_form_element _x17756950 _inline-style \" >
<label class=\"_form-label\">First Name</label>
<div class=\"_field-wrapper\">
<input type=\"text\" name=\"firstname\" placeholder=\"Type your first name\" />
</div>
</div>
<div class=\"_form_element _x55921169 _inline-style \" >
<label class=\"_form-label\">Last Name</label>
<div class=\"_field-wrapper\">
<input type=\"text\" name=\"lastname\" placeholder=\"Type your last name\" />
</div>
</div>
<div class=\"_form_element _x73666591 _inline-style \" >
<label class=\"_form-label\">Email*</label>
<div class=\"_field-wrapper\"><input type=\"text\" name=\"email\" placeholder=\"Type your email\" required/></div>
</div>
<div class=\"_button-wrapper _inline-style\">
<button id=\"_form_9_submit\" class=\"_submit\" type=\"submit\">
Submit
</button>
</div>
<div class=\"_clear-element\"></div>
</div>
<div class=\"_form-thank-you\" style=\"display:none;\"></div>
</form>
</div>";
//Javascript goes here
return $var;
}
?>
Step 6. Call the shortcode function
Now we just have to call the shortcode function below the function declaration so that you can use it in your sidebar or your blog page. (Of course I would say to add a sidebar widget and an “After Post” sidebar so that you don't have to manually add the shortcode to every post you want it to show up on, but that's a different conversation.)
add_shortcode ('AC-form', 'AC_shortcode');
You can declare the shortcode you use (the first element in the call above, in this case ‘AC-form') as you will be using that code in your text widgets.
Step 7. Use the shortcode
Using the new shortcode is as simple as [AC-form], and the form will show up wherever you need it.
That's it!
Let me know how it goes for you.