Extending Webflow Form (ex. Date Picker)

Community resources Webflow Tips
1

If you are looking to extend your Webflow form with more input types read on.

Here is the link to my custom form page where I have demonstrated what can be done when you combine the Webflow form widget and the embed widget.
http://sand-box.webflow.io/custom-forms
https://webflow.com/website/sand-box

To use this technique you will need the from block on your page. You can learn more about the [Webflow form in the this tutorial][1].

Pasted image1600×702 187 KB








You also will need to use the embed widget. You can find more about the [embed widgets in the tutorials][2].








Now lets get to it.

1.) Place the form widget on your page and style it anyway you like.

form.jpg1920×980 101 KB









2.) place the embed widget in the form, where you would like your extra fields to show.
embed.jpg1920×982 109 KB









3.) Then place your code;

Example:

<label for="date">Date:</label>
    <input class="w-input" type="date" name="date">

paste.jpg1920×982 117 KB





Your form is not ready to go. You will receive this information in the Webflow dashboard and in your email. ![|690x198](upload://kUyWcFwewFiWwzC5psFT20BZ36r.jpg) [1]: http://help.webflow.com/elements/topic-forms [2]: http://help.webflow.com/site-settings/custom-code#adding-embed-code
5 Likes
2

This is pretty awesome. I am going to try this very soon.
Any idea if it’s possible to use custom styling on those embedded fields?

1 Like
3

GJ! It’s always fun to see the community come up with cool new ways to do things within the tool.

4

Yes you can use custom styling. The easiest way is to create a class on a native form element and style it in the editor. Then apply it to the embed code. Like this;
<label for="date">Date:</label> <input class="w-input yourclassname" type="date" name="date">
Note that even though you might use capital letters in your class naming; the class is outputted all lower case, because CSS is not case sensitive.

5

Great, yeah that’s what i was looking for, wasn’t sure how to fill in the class names i created in the embedded field. NICE!

6

Thanks for this @AlexN

Do you know how I can set this up with mailchimp instead of webflow?

7

Any way to restrict choosing a date prior to today’s date?

2 Likes
8

Hey,

You can restrict the dates available by using the min and max values in the input.
http://custom-forms.webflow.io/

The form input for date on this site is using that technique to prevent dates earlier then September 22nd from being selected.

Hope this helps :smile:

9

Thanks Alex,

But I need the min value to always be the current date, so I don’t want to manually go in everyday and change the min value to today’s date…I hope I’m being clear?

1 Like
10

can you provide more specifics about your date picker ?

your’s is better than my custom date picker.

Can you feel me picking your brain ? :smile: