Extending Webflow Form (ex. Date Picker)

[AlexN (Alex Nichol)]

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

sand-box - Webflow

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].

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.

2.) place the embed widget in the form, where you would like your extra fields to show.

3.) Then place your code;

Example:

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

Your form is not ready to go. You will receive this information in the Webflow dashboard and in your email.  [1]: http://help.webflow.com/elements/topic-forms [2]: http://help.webflow.com/site-settings/custom-code#adding-embed-code

[rowan]

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?

[PixelGeek (Nelson)]

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

[AlexN (Alex Nichol)]

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.

[rowan]

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!

[CircleWorks (rugged)]

Thanks for this @AlexN

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

[rhami]

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

[AlexN (Alex Nichol)]

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

[rhami]

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?

[Revolution]

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 ?