SilverStripe Custom Layout Page with Contact Us Form & flexible frontend with Google Recaptcha.
1.2.0 2019-07-09 04:45 UTC
- SilverStripe Custom Layout Page with Contact Us Form & flexible frontend with Google Recaptcha.
composer require alexstack/silverstripe-custom-page-with-contact-us-form
- Run your-site-url/dev/build?flush=1 after composer install and refresh your admin page by /admin?flush=1
- Create a new page in SilverStripe admin and choose page type "Custom Page with Contact Us Form"
- Choose custom page layout from built-in layouts
- Or use your own template xxx.ss
- Change Form Settings , Custom form display fields
- Set up Google Recaptcha
- Save & publish the page
- It will use your page.ss in your own theme folder for global layout. eg. it will use your own header/footer/css/js
- Built-in page layouts use bootstrap 4.x for grid layout
- eg. NewProductPage.ss. Please make sure the template file your-theme/templates/includes/xxx.ss already exists!
- How to start the .ss: Copy vendor/alexstack/silverstripe-custom-page-with-contact-us-form/templates/Includes/CustomLayoutPage1.ss to your-theme/includes, rename it to NewProductPage.ss, change the .ss code inside to what you want. Just keep the variable names the same.
- Do not forget to run ?flush=1 first to load your new .ss template
- There are some built-in fields. You can choose what fields will display from FirstName | Email | Phone | Message | LastName | Mobile | Company | Website | Address | Street | PostalCode | City | State | Country
- Use | for the fields separator.
- By default, the form will display: FirstName | Email | Phone | Company | Message
- You can easily change Company to Address by replace it with: FirstName | Email | Phone | Company | Message
- Or you can add more fields if you want.
- You can override the .ss template file if you want to add more fields or change fields display orders, or something else.
- How to override: Copy vendor/alexstack/silverstripe-custom-page-with-contact-us-form/templates/Includes/ContactUsCustomForm1.ss to your-theme/includes, and add/change the html inside to what you want. Just keep the input field name the same.
- Can I add more fields to the form? You can also add some extra fields to extend the form without touch a php file or database. Available extra field names are: ExtraData1, ExtraData2, ExtraData3, ExtraData4, ExtraData5, Category, MyDate
- Override a form .ss template example screenshot:
- It will send an email to the notification email address after a form submitted
- And you can view all the data in admin:
- Inspired by Fractaslabs' contact-page