How should I add sign up forms into 3rd party sites?

Question

Our install is on Joomla, but Civi newsletter signup forms are needed also on other sites. They use everything from manual HTML (etc.) to other CMS platforms. How can I add group sign up forms to them?

The Civi book suggests using profiles and they do have a HTML generator. However the code it produces both doesn't work and the generator itself is not maintained (according to the core team), so it appears there is no out-of-the-box solution for integration into other hosts since 4.5.

What have you used, done in such situations? Please be explicit.

Answer 1

1. Non-programming approach: Use HTML Snippets for the profile. If it is not working according to documentation in book it might be that a) the documentation needs to be updated, or b) there is a bug in this functionality, or c) there is a bug in the custom page that includes the snippet. I would expect that c), b) and then a) are the likely order of solving this.

NB: when using HTML Snippets, you should ensure that permissions to create all the objects needed for the form (eg custom fields, contacts, etc) are available to an anonymous user.

2. Programming approach: a) If you are doing this to allow one other site to callback into CiviCRM, then I would have it call CiviCRM's API via REST - http://wiki.civicrm.org/confluence/display/CRMDOC/Using+the+API#UsingtheAPI-REST. b) If you are expecting to reuse the form in multiple other sites, then I would create an iFrame via your CMS and include the iFrame from the other sites. The iFrame itself would still need to use the external services protocol at the above link rather than AJAX since in general it will not have logged in before posting.

Answer 2

We have implemented a newsletter signup form into a static non-drupal page by using profiles. The profile generator actually works quite well (using CiviCRM 4.4) but the resulting form is kind of overloaded. But you can break down the markup to a simple form:

                <form method="post" action="https://example.com/civicrm/profile/create?gid=12&amp;reset=1">
                    <div>
                            <input type="hidden" value="" name="postURL"> <input type="hidden" value="https://example.com/civicrm/profile?reset=1&amp;gid=16" name="cancelURL"> <input type="hidden" value="Edit:cancel" name="_qf_default">
                    </div>
                    <ol>
                            <li>
                                    <label for="email-Primary">E-Mail:&nbsp;*</label> <input type="text" class="email required" id="email-Primary" name="email-Primary" size="20" maxlength="64">
                            </li>
                            <li>
                                    <label>Newsletter:&nbsp;*</label>
                                    <div class="input-group">
                                            <input type="hidden" value="" name="group[8]"> <input type="checkbox" value="1" name="group[8]" id="group_8">&nbsp;Cooking recieps<br>
                                            <input type="hidden" value="" name="group[7]"> <input type="checkbox" value="1" name="group[7]" id="group_7">&nbsp;Cats<br>
                                            <input type="hidden" value="" name="group[9]"> <input type="checkbox" value="1" name="group[9]" id="group_9">&nbsp;Dogs<br>
                                    </div>
                            </li>
                    </ol>
                    <div class="actions">
                            <p>
                                    <input type="submit" value="Sign up" name="_qf_Edit_next" class="button">
                            </p>
                            <p>
                                    <small>* required</small>
                            </p>
                    </div>
            </form>

The group inputs are part of a checkbox list and the index inside the name array represents the CiviCRM group id (e.g name="group[8]"). The form action url and the hidden cancelURL input are containing the profile id "gid", which you have created in CiviCRM before.

The profile itself has to be a "Standalone Form or Directory" and be marked as "active". Of course it is containing active fields for contact groups and primary e-mail. The groups have to be of type "mailing list" and visible for public pages.

Answer 3

I have implemented this as a resource for an IFRAME. My implementation was in Drupal not Joomla and just used the CiviCRM API.

So I built a simple app in Drupal that took a mailing list Id on its URL, checked that this was one that allowed public sign-ups, built and validated the form and then used CiviCRM's API to add the records.

Then other sites simply included that as an IFRAME.

This obviously required coding skills, but if you have those then using the API is a great way to be able to make it work just-so, regardless of the quirks your organisation requires (e.g. different themes for different sites).

Answer 4

You might want to check out the CiviWCI extension. It's still in beta format - and when I tried it on Wordpress, I found a hard-coded URL that assumed Drupal. It's designed for this situation though.

Answer 5

In principle you can use the REST api to get the form and submit it.

Also if you want to do the iFrame idea, make a link to the profile with &tmpl=component at the end, which gives you the page with just component and no module. Then you can use that url for the iFrame.