What are embedded forms?
A webform is an online interface that enables users to input and submit data through a web browser. Embedded forms take this a step further by integrating directly into a webpage or application, allowing users to complete and submit the form without leaving the site. The primary advantage of embedded forms is that they provide a seamless user experience, enabling visitors to stay on the same page while submitting their information.
To add a form to your site, you would use these steps:
- Form creation: You create the form using a form builder like QuestionScout or by writing HTML code directly.
- Generate embed code: The form builder or platform provides an embed code, usually a snippet of HTML or JavaScript.
- Paste embed code: You insert this code into the HTML of your webpage at the desired location.
Common Embedding Methods:
- Iframe: An iframe (inline frame) is an HTML element that allows you to embed another HTML document within the current page. It creates a separate browsing context within your webpage.
- JavaScript: Some form builders offer JavaScript embed codes, which dynamically load the form into your page.
- Direct HTML: If you've created the form using HTML, you can directly copy and paste the HTML code into your webpage.
Why use embedded forms?
Improved user experience: Embedded forms provide a seamless experience by allowing users to interact with your site without interruptions.
Increased engagement: Strategically placed embedded forms encourage users to engage more with your site, which can increase conversion rates. Forms can also be designed as quizzes, which are powerful tools for lead generation.
Easy maintenance: Externally hosted forms can be updated and maintained independently. This reduces the need for direct changes to your website's code and minimizes potential performance issues.
How can embedded forms be used?
Embedded forms can be utilized in various ways to enhance your website's functionality and engagement. Here are some of the most common use cases:
- Lead generation: Capture potential customer information directly on your site to build a list of prospects interested in your products or services.
- Transactions: Facilitate direct purchases or service requests through your website, simplifying the transaction process.
- Customer feedback: Collect feedback from visitors about their experience or satisfaction with your services. This will help you improve and address any issues.
- Event signup: Enable visitors to register for events, webinars, or workshops, making the signup process simple and convenient.
How to create an embeddable form?
Creating an embeddable form in QuestionScout is a straightforward process that takes just a few minutes. Here's a step-by-step guide to building a simple contact form:
Open QuestionScout
Log into your QuestionScout account or sign up here. Once you're in, select the "New Form" option to start building your form. You can choose to begin with a pre-designed template or start from scratch. Let's select start from scratch and go with the traditional format.
Add form elements
To add elements, click the "Add" button, which is highlighted by default when you create a new form. QuestionScout offers various form elements, including multiple-choice, image choice, scale ratings, and matrix options.
Add the title element to describe your form. On the right, you will see the field settings, where you can change the label.
Let's add two Short Answer fields and set the field as Required. You can add placeholder text as an example.
Add a Section and set the number of columns to 2 to arrange the fields side by side. To add elements into a section, go to the navigator and simply drag the required element over the section and drop it in. Similarly, you can rearrange fields by dragging and dropping them into your desired order. Similarly, add the rest of the fields.
Customize your form
Personalize your form to match your brand using QuestionScout's stock themes or create a custom theme. Use the Custom Code tab to add custom HTML, CSS, and JavaScript for advanced styling.
That's it! your form is ready. Check out the settings tab for more options.
How to embed a form?
Publish the form
When you're ready to share your form, press the "Share" button at the builder's top-right corner. Pressing the toggle will make your form go live.
Copy embed code
Select one of the embedding options and copy the embed code:
- Responsive embed - This form scales up to fit the width of its container.
- Fixed embed - This form will be fixed to the size you select
- Popup embed - This form will launch in a popup window when the user clicks the button.
- Fullscreen embed - This form will take up an entire page.
Paste the code on your website
To embed the form on your website, access the HTML editor of the webpage where you want the form to appear, then paste the copied embed code into the HTML. If you're using WordPress, you can also use a plugin.
Embed a form in WordPress:
- Go to the page or post where you want to add the form.
- Click the "+" button to add a new block.
- Search for and select the "Custom HTML" block.
- Paste the copied embed code into the "Custom HTML" block.
- Click "Preview" to see how the form looks, then click "Save" or "Publish" to save your changes.
Embed a form in Wix
- Go to the page where you want to add the form.
- Click the “+” button
- Select "HTML code"
- Paste the copied embed code into the block and save.
Embed a form in Squarespace:
- Go to the page editor where you want to add the form.
- Click the "Add Block" button
- Select "Code" and press the pencil icon to edit
- Paste the embed code and save
Embed a form in Webflow:
- Go to the page or post where you want to add the form
- Click the “+” button or type
- Select "Code Embed"
- Paste the embed code and save
Do more with QuestionScout
Customise post-submit actions: Show a custom thank you page or redirect users to a specific URL.
Protect against spam: Enable Invisible reCAPTCHA to safeguard your form against spam, fraud, and abuse.
Track abandonment rates: Capture data input by respondents even if they do not submit the form, reducing potential data loss.
Export responses: Export results as a CSV file or connect to an external database via Webhooks. Use Integrations to communicate with other apps to send submissions directly to a compatible web app or URL.
Use intelligent fields: Pass pre-existing information into your form via the URL, automatically capturing it in the response and pre-filling fields to boost conversion rates.
Enforce input validation: Validate user input on both the client and server sides to prevent malicious data injection attacks, such as SQL injection and cross-site scripting.
Best practices for embedded forms
Form length: Generally, shorter forms lead to higher conversions. However, the context, conversion type, user expectations, and incentives should also be considered. For instance, a detailed credit card application could result in higher conversions despite having multiple fields.
Use clear labels: Clear instructions within labels help users understand what is required, reducing confusion and errors. Placeholder text can guide users on what to enter, especially for fields with specific formats or requirements.
Enable prefill: Prefill enhances user convenience by reducing redundant data entry, particularly for returning users or multistep forms.
Ensure data security and privacy: Inform users how their data will be used, stored, and protected through a clear and accessible privacy policy.
Consider multistep forms: Multistep forms can sometimes be more optimal than single-step forms. Splitting a long process into smaller, manageable steps makes it feel less overwhelming for users. This approach often leads to higher completion rates because people are more likely to finish a form broken down into bite-sized chunks.
Use effective error messages: Instead of generic alerts like "Error" or "Invalid input," provide specific feedback about what went wrong and how to fix it.