Skip to main content
How Can We Help?
< All Topics
Print

Adding CIVICRM (Afform) Forms to WordPress

Posted
Updated
ByBen (Dickson)

It is not difficult to make beautiful CiviCRM forms:

  • We’ve provided out of the box styling
  • The form needs to follow a pattern (see the newsletter form example below):
    • first outermost form needs to be the FIELDSET
    • then for each group of fields (see e.g. personal details)
    • container with TITLE, the container style needs to be set to “panel pane”
    • inside that container you create another container with the fields (the style sheet will look after these)
    • at the end of each FIELD (or seperation of each field) you need a “Text Box” DELETING the text, that makes a space.

Once you save your form it is given a “afform name”, this is name you use to embed the form in any page.
For example here is the form that is default on any CIVICRM install for adding one indivudual:

[civicrm component="afform" name="afformQuickAddIndividual"]

See the documentation on CIVICRM’s wbsite https://docs.civicrm.org/sysadmin/en/latest/integration/wordpress/

For the below Newsletter form (in he image) to work properly and look beautiful, you need to prepare the CSS:
  1. Go to dashboard of your cib based site
  2. scroll down to Astra and hover over it
  3. select Customise and click
  4. select “Additional CSS” and click
  5. add the code found here into the box supplied
  6. save

Note in NEWER installs of CIB based websites the CSS might already be loaded as part of the <HEAD> section.

Here is a Newsletter form (clicking on it will open a bigger image in a NEW tab:

 

Here is how you achieve that (see image below, again clicking on it will open it in a new tab)

  1. Outer most frame, this needs to the “fieldset container” of the fields.
  2. Container, in this case called “Your Details”
    This container style needs to be set to “panel pane”.
  3. Text field, some information about (in this case) the newsletter
  4. SPACER Text box with deleted text, you drag it from the left “Add box”
  5. “First Name” field, drag it from the left pane.
  6. SPACER Text box with deleted text, you drag it from the left “Add box”
  7. “Last Name” field, drag it from the left pane.
  8. SPACER Text box with deleted text, you drag it from the left “Add box”
  9. “Email” field, drag it from the left pane.
  10. Part of the email, make sure you delete items you do not need, like primary
  11. SPACER Text box with deleted text, you drag it from the left “Add box”
  12. Submit button, you drag it from the right.

Table of Contents
Scroll to Top