How to Upload a Site on Squarespace
Squarespace is a pop website edifice and hosting platform. Information technology provides software equally a service for website edifice and hosting, and allows users to utilise pre-congenital website templates and drag-and-drop elements to create and modify webpages. Squarespace sets itself apart from other website-builders past combining ease of use with stylish, professional design.
Even though Squarespace'southward core features appeals to a lot of website makers, experienced users might want more than customization opportunities. Squarespace forms also don't support file and attachment uploads. That's where yous would need a tertiary-party service like Getform to offer a wider variety of customization and design options also as creating file upload forms for your Squarespace website.
In this blog mail, yous'll learn how to build forms using Squarespace'due south default templates and how to brand custom file upload forms using Getform.
While building your Squarespace, yous don't need whatever coding skills. Most of the Squarespace templates accept built-in contact pages and grade sections. But you might take more specific needs that require edifice your ain form.
Allow's walk through setting upwardly a elementary contact form with Squarespace blocks. Squarespace uses Blocks to lay out content. You tin find these by creating an empty page and clicking the "Add together Section" button.
Then click to "Course" from the side menu. Then, select the template based on your demand from the fix made ones.
In one case you've chosen a form template, you can double click on it to commencement editing your form. You can alter the proper noun of the form, and specialize the fields or add together a new ane.
These field include text areas, radio and select buttons. Just there is no such field for file uploads.
The Advanced options on this folio lets you edit the characterization and alignment of the submit button. You lot can also modify what happens afterwards users submit the class by setting a redirect URL.
That'southward all you need to do to create a simple functional form on Squares. But if yous are looking for more customization, i.east file upload forms where y'all tin can enable file attachments on your, then you tin brand your own class from scratch.
Here'southward what one of the default Squarespace forms looks like:
Creating Squarespace file upload forms using Lawmaking Blocks and Getform
Squarespace's default grade blocks give the basic capability of form management only they don't permit y'all to exercise high level of customization, peculiarly if you demand to add additional field types and file upload capabilities. If you need to enhance your form'southward capabilities, then your option is to utilize the "Lawmaking Blocks" in Squarespace.
In the Squarespace page editor, click i of the "+" buttons to add new Content Block. Information technology will wait similar below:
Then select the "Code" choice to add a new Code Cake.
Paste the following HTML lawmaking block with Proper noun, Email and Resume fields:
<div class="course-container"> <div class="championship">Apply Now!</div> <form have-charset="UTF-8" action="https://getform.io/f/{your-form-endpoint}" method="POST" target="_blank" enctype="multipart/form-data"> <div class='course-field'><label class='form-label'>Proper noun</label> <div grade="form-input-container"> <input class="form-input" type="text" proper noun="last_name" placeholder="John"> </div> </div> <div class='form-field'><label class='grade-label'>Email</label> <div class="course-input-container"> <input class="class-input" blazon="email" proper noun="electronic mail" placeholder="john@doe.com"> </div> </div> <div class='grade-field'><label grade='form-label'>Upload your resume</label> <div class="class-input-container"> <input form="form-input" type="file" name="file" placeholder="Upload your resume" > </div> </div> <push course="form-push button" type="submit">SUBMIT</button> </form> </div> <style> .form-container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; width: 95%; } .title { font-family: "Celias", "Helvetica Neue", Helvetica, Arial, sans-serif; text-marshal: center; text-transform: uppercase; font-size: 2em; font-weight: bold; alphabetic character-spacing: .05em; padding-bottom: 1em; } .form-label { font-family: "Celias", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; line-height: one.42857143; color: #2c3e50; box-sizing: border-box; display: inline-block; max-width: 100%; margin-top: 5px; margin-bottom: 5px; font-weight: bold; } .form-input { box-sizing: border-box; font: inherit; font-family: "Celias", "Helvetica Neue", Helvetica, Arial, sans-serif; width: 100%; acme: 45px; padding: 10px 15px; font-size: 15px; color: #2c3e50; groundwork-color: #ffffff; border: 1px solid #dce4ec; border-radius: 4px; border-width: 2px; } .class-push { border: none; font-size: 16px; margin-meridian: 15px; font-weight: 800; line-height: 1.v; border-radius: 3px; padding: 16px; background-color: #ccc; width: 100%; text-align: heart; cursor: arrow; -webkit-transition: all .15s ease; transition: all .15s ease; } </fashion> Don't forget to change the action aspect to a grade endpoint URL with yours. If y'all haven't received your first submission yet, check out the "Collecting form submissions" section on our docs or watch our helper video here to get started.
Here's a form added to a Squarespace website using the Code Cake:
You have a form that looks the fashion you want with a file upload field to accept resumes. You'll need a style to manage what happens when a user submits data.
Getform lets you lot receive e-mail notifications when someone submits to your form, allows y'all to preview the uploaded files.
- Receive emails when someone submits to your course with uploaded file'due south link so you can export or download attachments like resumes or photos.
- Take hold of and remove whatever spam submissions by setting upward a reCaptcha integration.
- Connect to Google Sheets, Dropbox, Google Drive, Pipedrive, Slack and many more than.
- If you are willing to go for more than advanced integrations, you tin can also use Getform Submission API to integrate your form to any custom app or website you are edifice.
Cheers for reading! You tin can find more data and code samples for dissimilar use cases from the resources provided below.
- Codepen examples
- Codesandbox examples
- Getform's Zapier page
- Getform Documentation.
Getform on CodePen
Easy form endpoints. Form backend platform for designers and developers. No library, no CSS override
CodePen
Take your Squarespace forms to side by side level using Getform today and feel gratis to accomplish us out at info@getform.io or using our live conversation on Getform.io if you would like help while doing that!
Mertcan from Getform
Form backend platform for designers and developers
Source: https://blog.getform.io/how-to-setup-a-contact-form-on-squarespace/
0 Response to "How to Upload a Site on Squarespace"
Post a Comment