Hi Michelle & Eilidh,
Some comments on the donation widget below.
- The form consists of four pages but the third page is only visible if you tick the GiftAid box (we don’t have to collect billing address except when collecting GiftAid so I wanted to cut down the work the user has to do).
- It works with Stripe’s test card if you want to give it a go:
- Card number: 4000 0082 6000 0000
- Expiry: any date after today
- CVC: any 3-digit number
- Please don’t make this form live to the public until I’ve changed the Stripe integration to live cards rather than test cards.
- The widget on screen consists of a column, header, icon box (all Elementor), with the form itself embedded from Form Assembly using a shortcode.
- So you should be able to simply copy the column from the Elementor navigator and drop it in another page.
- To see what the form looks like outside Elementor you’ll obvs have to view the actual page in a different browser tab and refresh it every time you update Elementor.
- You’ll be able to style the column and headers and everything around it in the usual Elementory way.
- 95% of the styling of the form is done in css and jquery within Form Assembly. So I’ll need to make any changes there.
- There are two piceces of hard-coded css located within Elementor (in Advanced -> Custom CSS of the appropriate element):
- (1) There is a min-width in the Column element that stops the form shrinking to a width less than 300px
- (2) The style for the thank you page after the form has been submitted is contained in the Shortcode widget. (For some bizarre reason Form Assembly deletes its own css after the form has been submitted so you can’t do that within FA)
- I’ve styled up the first page as per your original design. And I’ve tried to follow the same style for the next 2 pages. But there are definitely some infelicities in my pages so if you want to tell me how to make it better I’ll get on it. (There are a few things it’s impossible to do – mainly to do with buttons – due to the way FA structures forms but I’ll let you know what they are if the need arises.)