How to Streamline Form Completion: Pre-filling Forms Using Embed Code with MightyForms
Pre-filling a form using embed code can be a game-changer for businesses and individuals alike. This feature streamlines the user experience by populating form fields with predetermined values, saving time and effort for both the form filler and the form owner. Whether you're collecting leads, conducting surveys, or processing orders, pre-filled forms can enhance efficiency and accuracy. In this step-by-step guide, we'll walk you through the process of pre-filling a form using embed code with MightyForms, empowering you to tailor your forms to your specific needs.
Step 1. Create your form
Login to your MightyForms dashboard, then:
- Select an existing form from your dashboard
- Create a new form from scratch
- Select one of the Templates
- or Transfer an existing Form
Step 2. Publish the form then click 'Share'
On the upper right corner of the screen you'll see the 'Publish' button, click on it to publish the most recent version of your form.
Then, right next to it, click 'Share'.
Step 3. Copy the embed code.
When you click 'Share' a pop-up window will show the options on how you can share the form. Copy the embed code provided.
Step 4. Customize the Embed Code for Pre-filling
Return to the form builder and click on the field you wish to pre-fill to open its settings. Scroll to the bottom of the settings to find the Field Key for the selected field. Copy this Field Key and return to the embed code.
Now, within the embed code, after the form ID, create a space and insert the Field Key followed by "=" and desired pre-filled value enclosed in quotes. Repeat this process for each additional field you wish to pre-fill, separating each field with a space.
Here are the examples of how to customize the embed code:
Original Embed Code:
<!-- MightyForms Section --><div class="mighty-form" id="mf-362af890-6c7d-4f02-8a52-deddd2238fe8"></div><script async src="https://form.mightyforms.com/loader/v1/mightyforms.min.js"></script><!-- End MightyForms Section -->
Embed Code after Pre-filling:
<!-- MightyForms Section --> <div class="mighty-form" id="mf-362af890-6c7d-4f02-8a52-deddd2238fe8" text_1029="MightyForms" text_2916="Form Builder" email_4714="[email protected]" phone_3225="(201) 555-0123" score_24="10"></div><script async src="https://form.mightyforms.com/loader/v1/mightyforms.min.js"></script><!-- End MightyForms Section -->
Step 5. Embed the Code on Your Website
Once you've customized the embed code with your pre-filled values, copy the modified code. Embed this code onto your website following the provided step-by-step guide.
Step 6. Preview Your Embedded Form
After embedding the code on your website, you can preview how the form will look. Below is an example screenshot of how the form will appear after embedding using the provided embed code:
Tips for Professionals:
- Take advantage of pre-filling for any field with a Field Key.
- Customize Field Key names to align with your preferences and easily manage embedded code.
- There's no limit to the number of fields that can be pre-filled using embedded code, providing flexibility and scalability for diverse form needs.
That's it! By following these steps and leveraging the customization options available, you can create seamless form experiences tailored to your specific requirements. Save time, enhance efficiency, and improve user satisfaction with pre-filled forms tailored to your needs.