Integrate AcyMailing with your Joomla contact component

Description

This plugin enables you to integrate AcyMailing with your contact component so when a user submits a contact request on your website, he will be automatically (or based on his choice) subscribed to one or several of your lists in AcyMailing.

This plugin is compatible with:

  • com_contact (the default Joomla contact component)
  • com_gcontact (Grumpy Contacts component)
  • com_qcontacts (QContacts component)
  • com_contact_enhanced (Contact Enhanced component)
    Contact Enhanced has now a native integration with AcyMailing, you don't need to install this plugin if you use Contact Enhanced.
  • Fox Contact has a native integration with AcyMailing, you don't need to install this plugin if you use Fox Contact.

 

Install the plugin

  • Log in to your backend and click on the menu "Extensions -> Install / Uninstall".
  • Browse for the plugin you just downloaded and then click on the button "Upload File & Install".
  • You should now see the AcyMailing : integration with your contact component plugin in the list of plugins. Don't forget to publish this plugin.

Parameters

  • Access the plugin parameters via your AcyMailing Configuration page (tab "plugins")

Contact config Contact parameters

  • Subscribe to: Select the lists you want the user to be subscribed to
  • Require a confirmation: If you require a confirmation when a user subscribes to AcyMailing, you can require the same confirmation for this plugin or silently subscribe the user without requesting a confirmation.
  • Display a checkbox: You can decide to give the choice to your user to subscribe or not to your lists.
    If you select YES, then a checkbox will be displayed on your contact form and the user will be subscribed to AcyMailing only if he checked that checkbox.
    This checkbox and the text is inside a span with class=acycontactform (in case of you want to add some style to it).
  • Check the checkbox: Do you want the checkbox to be checked or unchecked by default?
  • Display checkbox: AcyMailing can display your checkbox on several places, select the one you want.
  • Text : If you display a checkbox, AcyMailing will also add a text near this checkbox. You can customize this text the way you want.
    You can also duplicate this plugin with JomFish if you want to translate this text in several languages.

Example

Our plugin with a checkbox will be displayed that way on your contact form

 

We added this CSS to render it that way on J1.5:

Show/Hide css code

span.acycontactform<span style="color: #00AA00;">{</span>
<span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">border-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">2px</span> <span style="color: #993333;">solid</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">(</span><span style="color: #cc66cc;">132</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">167</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">219</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span> <span style="color: #933;">2px</span> <span style="color: #993333;">solid</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">(</span><span style="color: #cc66cc;">132</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">167</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">219</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">(</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">85</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">187</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">(</span><span style="color: #cc66cc;">195</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">210</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">229</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span>
			

 

We added this CSS to render it that way on J2.5:

Show/Hide css code

<span style="color: #cc00cc;">#acycontactdt</span><span style="color: #00AA00;">{</span>
 <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">4px</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#f5f5f5</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">border-top</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">margin-top</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">white-space</span><span style="color: #00AA00;">:</span><span style="color: #993333;">nowrap</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">}</span>
 
<span style="color: #cc00cc;">#acycontactdt</span> label<span style="color: #00AA00;">{</span>
 <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#666</span><span style="color: #00AA00;">}</span>
 
<span style="color: #cc00cc;">#acycontactdd</span><span style="color: #00AA00;">{</span>
 <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#f5f5f5</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">border-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">margin-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">4px</span> <span style="color: #933;">10px</span> <span style="color: #933;">0px</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">}</span>
			

 

On Joomla 3 you can add this CSS:

Show/Hide css code

span.acycontactform<span style="color: #00AA00;">{</span>
 <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#D9EDF7</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">border-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#BCE8F1</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#3A87AD</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">border-radius</span><span style="color: #00AA00;">:</span> <span style="color: #933;">4px</span> <span style="color: #933;">4px</span> <span style="color: #933;">4px</span> <span style="color: #933;">4px</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">margin-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">8px</span> <span style="color: #933;">35px</span> <span style="color: #933;">8px</span> <span style="color: #933;">14px</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">1px</span> <span style="color: #cc66cc;">0</span> rgba<span style="color: #00AA00;">(</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0.5</span><span style="color: #00AA00;">)</span><span style="color: #00AA00;">;</span>
 <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">}</span>
 
span<span style="color: #6666ff;">.acycontactform</span> label<span style="color: #00AA00;">{</span>
 <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">inline</span>
<span style="color: #00AA00;">}</span>
			

 

The message will then be displayed this way:

 

If you use our plugin for QContacts, you will certainly want to add this CSS to make sure the checkbox and the label are on the same line:

Show/Hide css code

<span style="color: #cc00cc;">#qcontacts</span> span.acycontactform label<span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">inline</span> <span style="color: #00AA00;">}</span>
			

 

Please do not add the checkbox after the e-mail address for QContacts, it won't work.

Still need help? Contact Us Contact Us