Contact Form

Learn how to create a contact form, embed it on your website and start receiving enquiries.

Chris Garbacz avatar
Written by Chris Garbacz
Updated over a week ago

Use this page to create a contact form that you can either embed on your website or we can host it for you. 

Whenever an enquiry is received through the contact form, a new client is automatically created in Studio Ninja and you will be notified by email with all the details. 

Create a contact form

To create a contact form, just go to Settings > Contact Form > Add new form. 

There are three stages to complete when setting up your contact form:

1. Build - this is the main page of your contact form where you can drag and drop the fields you want to add in any way you like in a single or double column. And also, edit and delete fields. 

The first thing you would like to add is the 'Heading' field. We suggest you add it above the contact form and customise it to invite potential clients to fill in the contact form. 

Next, drag and drop the fields that you would like to add to your contact form, and add a description if necessary. By default, the 'First name' and 'Email' fields are both mandatory fields and cannot be deleted from the contact form. 

The fields Last name, Phone, Company, Business Numbers, Street Address, etc. will automatically get copied into the client profile when the contact form is completed; 

and the answers to the Single-line and Multi-line Message fields get copied straight into the client notes so you have a permanent record of the enquiry for future reference.

Each field can be edited to customise the 'Label' and the 'Placeholder text', and an option to set it to 'Mandatory'. 

Input the label names and placeholder text that you would like to appear on your contact form. For example, the field Single-line Message, should have a label of 'How can I help you?' or 'Please tell me more about your wedding'. 

    • There are three unique fields to edit: Job Type, GDPR Consent Checkbox and Submit

           - For Job Type, you can untick the box to remove the other job types. That                      way your contact form will only show the job types you want the clients to see.

            - For GDPR Consent Checkbox, you can edit what your clients are                                    consenting to and what they are opting-in for.

               - The Submit button's text can be edited and it's alignment can be changed. 

Ninja tip: You can add up to three Single-line message, Multi-line message, Heading, and Description fields as you want.

When you're happy with everything, click the 'Style' tab above to proceed to the next stage.

2. Style - Here you can customise the contact form to match the colour and style of your branding. You can change the width, font, text size, form field and button style. 

3. Configure - set up a thank you message, send an auto-email, and redirect potential clients to a landing page. 

Thank you Text: appears once the contact form has been successfully completed by your potential client. Customise it in any way you like to sound more on brand with your business. 

Redirect URL: Turn this on to redirect your potential clients to a landing page after the form is submitted. It's ideal for setting up conversion tracking. 

Auto-responder Email Message: enable this to immediately send out an email to the person who completed the form. You can customise the email font, size, add hyperlinks and insert variables (Company Name, Company Email, Company Phone, Client name, Client Surname).

Contact Form Integration

You can integrate the Studio Ninja contact form in two different ways. Choose between a Studio Ninja hosted contact form or an embedded contact form on your web page.

Studio Ninja hosted contact form

To use the Studio Ninja hosted contact form simply click the 'Copy URL' button and then copy / paste the link onto your website or share it on any social media sites. 

Embedded Contact Form

To use the Studio Ninja embedded contact form, simply click on the 'Copy to Clipboard' button and then copy / paste the iframe code into your website CMS (like Wordpress or Squarespace for example). You should add this link to your Contact Us button and anywhere else on your website where you would like to link to this contact form.

If you like you can customise the height and width of your contact form by changing the values. These values are measured in pixels, so in the example above, this iframe is 600px wide X 650px high.

Once saved, the contact form will appear embedded into your website.

Need Help?

If you need help with anything we are here for you :-) 

  • Message us in-app by clicking on the green chat icon on the bottom right hand side and one of our friendly staff with give you a hand. (Users accessing their account from the mobile app can click on Settings > Open Settings in web browser).

  • Book a training session and Elle will help you through every step of the process to get you setup as quickly as possible. She can also answer any questions you may have and also make sure your account is running in the most efficient way.

  • Join our Ninja community and chat with all of our users in the private (members only) Facebook Group. 

Now you're ready young padawan! Go forth and conquer. 

Did this answer your question?