How to Setup a No Code Contact Form Using Basin and Shifter
Matt Farley on Feb 4 2022
Hosting static Jamstack sites is easier than ever. With Shifter, you can create a static Wordpress site that’s fast, secure, and scalable in minutes. Shifter is going to provide us with our site, and Basin is going to provide us with the no-code form backend to start accepting form submissions/leads/information from our visitors.
Getting Started with Shifter
To begin, head over to Shifter’s home page and log in or sign up for an account.
For this example we’ll be using a Static site, so go ahead and create a Shifter Static site. Select the Free option, click through the additional options, and head over to your Wordpress admin page (it may take a few minutes for your Wordpress site to spin up).
Once the site is ready, go ahead and create a page by clicking the Pages tab, then selecting Add New.
Adding your Basin Form
Choose a page title, click on the floating plus symbol, search for html and select the Custom HTML option. We can then copy the HTML of our Basin form into the page.
Now grab your form’s HTML code from the Basin website. You can find a sample of your form by navigating to the Forms page and selecting the form you’d like to add to the page.
Under the Setup section, click on the link shown below to see a simple pre-built version of your form.
Scroll down to the pre-built form, then select the HTML and copy it.
Now head back to your newly-created Shifter Wordpress page and paste the selected code into the HTML field.
Testing your Form
Click the HTML Preview button if you’d like to see how the form will look on your page. When you’re ready, you can use the Preview or Publish buttons in the top-right to test that your form is working properly. If you’ve copied in the pre-built form, the page should look something like this:
If everything’s working properly, then filling out the form and clicking the Send button should create a new submission on your form’s Submissions tab in Basin.
That’s it! We now have a static site ready to accept information from visitors. Basin makes Jamstack forms a breeze. There’s no need to write code or configure backend services - just copy the form into your page and you’re ready to go.
Thanks for reading, and happy form building!
Have questions or need help?
Visit our docs or drop us a line at firstname.lastname@example.org.