I am doing my first webflow/relume website now and have watched the Webflow video on creating forms, but, I still need a bit of help with this.. I made a 2 minute Loom video to show the problem I am having.. thanks for your help.. https://www.loom.com/share/89b23b293b0f49bbbc5524d8fbf42ec4
To link your forms on Webflow to the correct email addresses and ensure they function correctly, follow these steps:
1. **Form Settings in Webflow**:
- Open your Webflow project.
- Go to the page containing the form you want to link.
- Click on the form to select it.
- In the right-hand settings panel, find the form settings.
2. **Setting the Email Address for Form Submissions**:
- In the form settings, look for the "Action" field.
- Set the "Action" field to the URL of the page or endpoint where you want the form data to be sent. For email submissions, you can typically set it up directly within Webflow’s form settings.
- In Webflow, go to the Project Settings > Forms tab.
- Scroll down to "Form Submissions".
- Enter the email address where you want to receive form submissions.
3. **Handling Imported Forms (from ReLU or other sources)**:
- If the imported form looks different and has different settings, you might need to manually configure it to match Webflow’s form submission process.
- Ensure that the form fields have the correct IDs and names that Webflow recognizes.
- You can also use custom code to handle form submissions if the form structure is significantly different. This would involve writing JavaScript to capture the form data and send it to your desired email address or endpoint.
4. **Testing the Form**:
- After configuring the form settings, publish your site.
- Go to the live site and fill out the form to test if it submits correctly and sends an email to the specified address.
- Check the email to ensure you receive the form submission details.
Here are additional detailed steps and considerations:
### Detailed Steps:
1. **Form Settings in Webflow**:
- Select the form in Webflow Designer.
- Navigate to the Settings panel (gear icon).
- Set the `Action` URL if you are using a custom form handler. If you're using Webflow’s native handling, you won't need to set this.
2. **Email Settings in Webflow**:
- Go to Project Settings > Forms.
- Ensure the `Form Notification Email` is set to the correct email address.
3. **Custom Code for Imported Forms** (if needed):
- Add an `Embed` element in Webflow.
- Insert your custom HTML form.
- Add a custom script to handle form submissions if the form is not natively supported by Webflow.
### Example Custom Script:
If you need to handle form submissions with custom code, you can use JavaScript:
```html <script> document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); const formData = new FormData(event.target); fetch('<a target="_blank" rel="noopener noreferrer" href="https://your-endpoint.com/submit">https://your-endpoint.com/submit</a>', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { alert('Form submitted successfully'); }) .catch(error => { alert('Error submitting form'); console.error(error); }); }); </script> ```
thank u so much.. will work on this tomorrow and let u know how it goes.. thanks, again
I made less than a minute long loom to show you what I need help with.. here it is, thanks: https://www.loom.com/share/6ea3b560082e4720848e4c99f7c4203e
I really need a little more help with this, please refer to video above.. also, how do I find the right ID to use with Webflow for a Relume import form?